使用参数加载页面中div的内容

时间:2017-01-27 07:54:39

标签: javascript c# jquery ajax asp.net-mvc

我有一个带有不同过滤器的表单和一个"开始"在C#/ ASP.NET MVC中的按钮,当我点击按钮时,由于Ajax,我在部分视图中显示我的数据库的数据,具体取决于参数。

在这个局部视图中,我有一个链接,它将参数发送到控制器以执行插入(并且单元格的颜色会发生变化,绿色变为白色或白色变为绿色),但在插入后,整个页面都会刷新, 我只是想刷新我的局部视图。

这要归功于ajax吗?

enter image description here

enter image description here

我的观点代码:

    @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>

部分视图的代码:

    @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>

链接控制器的代码:

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

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

    return RedirectToAction("rlog009");
}

该操作与部分视图的最后一个链接有关(id =&#39; cal&#39;)。

提前感谢您:)

当我将return RedirectToAction("rlog009");替换为return PartialView("AfficheRlog009");时, 它有效,但它只显示部分视图,而不是整个页面:

enter image description here

1 个答案:

答案 0 :(得分:0)

您需要返回完整局部视图的方法,并将其加载到您想要更改的div中

检查出来

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

如果您只想更改行或单元格

你可以,但你需要确保唯一性