Load content of div in a page with parameters

Question

I have a form with differents filters and a "Start" button in C# / ASP.NET MVC, when I click on the button, I display the data of my database in a partial view thanks to Ajax, depending on the parameters.

In this partial view, I have a link that sends parameters to the controller to perform an insert (and the color of the cell changes, green to white or white to green), but after the insert, the entire page is refreshed, I just want to refresh my partial view.

It's possible thanks to ajax ?

My code of the view :

    @using System.Web.Script.Serialization;

@{
    ViewBag.Title = "rlog009";
    Layout = "~/Views/Shared/_Layout.cshtml";

    List<SelectListItem> listAtelier = new List<SelectListItem>();

    SelectListItem tous = new SelectListItem();
    tous.Value = "TOUS";
    tous.Text = "TOUS LES ATELIERS";
    tous.Selected = true;
    listAtelier.Add(tous);

    foreach (KeyValuePair<string, string> key in ViewData["atelier"] as Dictionary<string, string>)
    {
        SelectListItem atelier = new SelectListItem();
        atelier.Value = key.Key;
        atelier.Text = key.Value;
        listAtelier.Add(atelier);
    }

    List<SelectListItem> listIlot = new List<SelectListItem>();
    List<string> listItemIlot = new List<string>();

    foreach (KeyValuePair<string, string> key in ViewData["ilot"] as Dictionary<string, string>)
    {
        SelectListItem ilot = new SelectListItem();
        ilot.Value = key.Key;
        ilot.Text = key.Value;
        listIlot.Add(ilot);
        listItemIlot.Add(key.Value);
    }
}

@using (Ajax.BeginForm("AfficheRlog009", new AjaxOptions
{
    InsertionMode = InsertionMode.Replace,
    UpdateTargetId = "divAfficheRlog009",
    HttpMethod = "POST",
    LoadingElementId = "loadAjax"
}))
{
    <div class="row">
        <div class="col-md-9" style="padding-top:6px;">
            <a href="#" class="not-active-title">
                <u>Planning des machines</u> :
            </a>
        </div>
        <div class="col-md-3">
            <div style="margin-top:10px;"></div>
            <a href="#" class="not-active-date">
                <u>Date du document</u> : @Html.Label(DateTime.Now.ToShortDateString()) <br />
                <u>Référence</u> : <strong>rlog009.cshtml</strong>
            </a>
        </div>
    </div>

    <hr />

    <form class="form">

        <div class="row">
            <div class="col-md-4">
                <div class="form-group">
                    <label for="Tdate_d">Date de début</label>
                    @Html.TextBox("Tdate_d", DateTime.Now.ToShortDateString(), new { @class = "form-control" })
                </div>
            </div>
            <div class="col-md-4"></div>
            <div class="col-md-4"></div>
        </div>

        <div class="row">
            <div class="col-md-4">
                <div class="form-group">
                    <label for="Ddl_atelier">Atelier</label>
                    @Html.DropDownList("Ddl_atelier", listAtelier, new { @class = "form-control" })
                </div>
            </div>
            <div class="col-md-4">
                <div class="form-group">
                    <label for="Ddl_ilot">Ilot</label>
                    @Html.DropDownList("Ddl_ilot", listIlot, new { @class = "form-control" })
                </div>
            </div>
            <div class="col-md-4">
                <div class="form-group">
                    <label for="Tposte">Matricule</label>
                    @Html.TextBox("Tposte", "%", new { @class = "form-control" })
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-4">
                <img src="~/image/p_vert.jpg" width="28" height="25" class="img-responsive" style="border:dotted;display:inline-block;" />
                <span>>= 7h30</span>
            </div>
            <div class="col-md-4">
                <img src="~/image/p_orange.jpg" width="28" height="25" class="img-responsive" style="border:dotted;display:inline-block;" />
                <span>< 7h30</span>
            </div>
            <div class="col-md-4">
                <img src="~/image/p_blanc.jpg" width="28" height="25" class="img-responsive" style="border:dotted;display:inline-block;" />
                <span>= 0</span>
            </div>
        </div>

        <div class="row">
            <div class="col-md-4">
                <div class="form-group" style="padding-top:24px;">
                    <input type="submit" value="Lancer" id="btnLancer" class="btn btn-primary" />
                </div>
            </div>
            <div class="col-md-4"></div>
            <div class="col-md-4"></div>
        </div>
    </form>
}

<div id="divAfficheRlog009"></div>

<img id="loadAjax" src="http://www.mediaforma.com/sdz/jquery/ajax-loader.gif" style="display:none">

@* Import d'un fichier pour reformater les chaînes JSON *@
<script src="~/Scripts/ReformatString.js"></script>

@{
    JavaScriptSerializer jss = new JavaScriptSerializer();
    string ilotJSON = jss.Serialize(listItemIlot);
}

<script type="text/javascript">

    $(function () {
        $("#Tdate_d").datepicker($.datepicker.regional["fr"]);
    });

    $("#Ddl_ilot").append('<option selected="selected" value="TOUS">Tous les ilots</option>');

    var listIlotJSON = '@ilotJSON';
    listIlotJSON = formatString(listIlotJSON);
    listIlotJSON = JSON.parse(listIlotJSON);

    $("#Ddl_atelier").change(function () {

        $("#Ddl_ilot").removeAttr("disabled");
        var value = $("#Ddl_atelier").val();

        var numAtelier = value.substr(0, 2);

        $("#Ddl_ilot").children().remove();

        for (var i = 0; i < listIlotJSON.length; i++) {
            var numIlot = listIlotJSON[i].substr(0, 2);

            if (numIlot == numAtelier) {
                $("#Ddl_ilot").append('<option value="' + listIlotJSON[i].substr(0, 4) + '">' + listIlotJSON[i] + '</option>');
            }
        }
        $("#Ddl_ilot").append('<option selected="selected" value="TOUS">Tous les ilots</option>');
    });

</script>

My code of the partial view :

    @using System.Globalization;
<div class="table-responsive" style="padding-top:30px;">
    <table class="table table-bordered">
        <thead>
            <tr>
                <th>POSTE</th>
                <th>CR</th>
                <th>LIBELLE</th>
                <th colspan="3">NBR EQ</th>
                <th>Machine</th>
                @foreach (string row in ViewBag.ListEnTete)
                {
                    <th>@Html.Raw(row)</th>
                }
            </tr>
        </thead>
        <tbody>
            @{
                bool isClassSuccess = true;
                string classLigne;

                foreach (List<string> item in ViewBag.ListHisto)
                {
                    if (isClassSuccess)
                    {
                        classLigne = "#dff0d8";
                        isClassSuccess = false;
                    }
                    else
                    {
                        classLigne = "#f2dede";
                        isClassSuccess = true;
                    }
                    @:<tr style='background-color:@classLigne !important; '>


                        <td>@item[0] </td>
                        <td>@item[1] </td>
                        <td>@item[2] </td>

                    for (int i = 3; i < 6; i++)
                    {
                        int eq;

                        if (i == 3)
                        {
                            eq = 1;
                            <td>@Html.Raw("<a href='/Logistique/Logistique/rlog009eq?poste=" + item[0] + "&eq=" + eq + "'>" + item[i] + "</a>") </td>
                        }
                        else if (i == 4)
                        {
                            eq = 2;
                            <td>@Html.Raw("<a href='/Logistique/Logistique/rlog009eq?poste=" + item[0] + "&eq=" + eq + "'>" + item[i] + "</a>") </td>
                        }
                        else if (i == 5)
                        {
                            eq = 3;
                            <td>@Html.Raw("<a href='/Logistique/Logistique/rlog009eq?poste=" + item[0] + "&eq=" + eq + "'>" + item[i] + "</a>") </td>
                        }


                    }
                    <td>@item[6] </td>

                    int k = 7;

                    foreach (string row in ViewBag.ListEnTete)
                    {
                        // Parsage de la chaîne en date
                        string date = row;
                        string[] arrDate = date.Split('/');

                        <td>@Html.Raw("<a id='cal' href='/Logistique/Logistique/rlog009cal?machine=" + item[6] + "&date=" + arrDate[2]+ arrDate[1] + arrDate[0]+ "'>" + item[k] + "</a>")</td>
                        k++;
                    }


                    @:</tr>
            }
            }
        </tbody>
    </table>
</div>

The code of the controller of the link :

    [ModuleFilter(FilterFormulaire = false, SourceFormulaire = "rlog009")]

public ActionResult rlog009cal(string machine, string date)
{
    model.setCalendrier(machine, date);

    return RedirectToAction("rlog009");
}

The action relates to the last link of the partial view (id='cal').

Thanks you in advance :)

---

When I replace return RedirectToAction("rlog009"); by return PartialView("AfficheRlog009"); , It works but it only shows me the partialview, not the whole of my page :

Answer 1

you need method that return full partial view and load it in the div that holds you want to change

check this out

        function reFillGrid(ItemId) {
$("#CartItemGridDiv").load('@Url.Content("~/User/Items/CartItemGrid")');
        }

if you want to change only a row or cell

you can but you need to be sure of uniqueness