javascript - 如何根据 MVC 中的 DropDownList 选择刷新页面的一部分？

Question

我正在研究 ASP.Net MVC。 我有一个ViewPage SaveStallMenu.cshtml ，其中有 2 个下拉列表 (MF 下拉菜单、Stalls 下拉菜单)和 FilerMenu 按钮

当页面第一次加载时，它持有Stall 1的MenuItem。

现在，我的问题是，当我从MF Dropdownlist中选择一个选项时和Stall DropdownList ，然后点击筛选菜单按钮，将 <div id="partialViewDiv"></div> 中的内容应使用与停顿选择相关的菜单项来刷新。

我正在使用 AJAX 来实现此目的。

当我单击 FilterMenu 按钮时

 @using (Ajax.BeginForm("uppendStallData", "Admin", new AjaxOptions { HttpMethod = "POST", InsertionMode = InsertionMode.Replace, LoadingElementId = "", UpdateTargetId = "partialViewDiv" }))
            {
}

这应该将我的表格提交到 uppendStallData ActionMethod，但我不知道为什么它不起作用。

如果您发现我对问题的解释有缺陷，请原谅。请尝试浏览我的代码并提供您的指导。

我尝试了很多解决方案，您可以看到下面的脚本，但没有得到我想要做的事情。

试验 1: 如果我使用上面 Ajax.BeginForm ，然后uppendStallData未获取已发布的 ViewModel 数据。

[HttpPost]
public PartialViewResult uppendStallData(AdminVM VM)
{ 

    List<StallsModel> data = _provider.GetStallsList();
    VM.StallNameDDl = data.ToDictionary(x => x.StallId, x => x.StallName);

    List<MFDetailsModel> data1 = _provider.GetMFDetailsList();
    VM.MFNameDDl = data1.ToDictionary(x => x.Id, x => x.MFName);

    long MFID1 = Convert.ToInt64(VM.StallMenuModel.MFId);

    long STallId = Convert.ToInt64(VM.StallMenuModel.StallId);

    VM.CompleteMenuByStallIDList = _provider.GetCompleteMenuByStallId_List(STallId);   

    return PartialView("_MenuTabs", VM);

}

试验 2: 如果我调用 a 如下所示，请单击 FilterMenu 按钮， 此脚本将下拉列表选定的值发送到 uppendStallData ，但是在Contoller中成功执行该方法后，无法返回PartialView并追加到<div id="partialViewDiv"> .

使用Trial2，我的脚本和 Controller 方法如下，

<script>
    $('#Filter').click(function () {
        var MF_Id = $('#StallMenuModel_MFId').val();
        var Stall_Id = $('#StallMenuModel_StallId').val();

        $.ajax({
            url: '@Url.Action("uppendStallData", "Admin")',
            data: { MFID: $("#StallMenuModel_MFId").val(), STID: $("#StallMenuModel_StallId").val() },
            type: 'POST',
            success: function (data) {
                $("#partialViewDiv").html(data);
            }
        });
    });
</script>

Controller

         public PartialViewResult uppendStallData(string MFID,string STID)
         {


             List<StallsModel> data = _provider.GetStallsList();
             VM.StallNameDDl = data.ToDictionary(x => x.StallId, x => x.StallName);

             List<MFDetailsModel> data1 = _provider.GetMFDetailsList();
             VM.MFNameDDl = data1.ToDictionary(x => x.Id, x => x.MFName);


             long MFID1 = Convert.ToInt64(MFID);

             long STallId = Convert.ToInt64(STID);

             VM.CompleteMenuByStallIDList = _provider.GetCompleteMenuByStallId_List(STallId);    
             return PartialView("_MenuTabs", VM);
         }

这是 Controller 代码:

[HttpGet]
public ActionResult SaveStallMenu()
{
    AdminVM VM = new AdminVM();
    List<StallsModel> data = _provider.GetStallsList();
    VM.StallNameDDl = data.ToDictionary(x => x.StallId, x => x.StallName);

    List<MFDetailsModel> data1 = _provider.GetMFDetailsList();
    VM.MFNameDDl = data1.ToDictionary(x => x.Id, x => x.MFName);
    VM.StallMenuModel = new StallMenuModel();


    VM.CompleteMenuByStallIDList = _provider.GetCompleteMenuByStallId_List(1);                     
    return View(VM);
}


[HttpPost]
public PartialViewResult uppendStallData(string MFID,string STID)
{

    List<StallsModel> data = _provider.GetStallsList();
    VM.StallNameDDl = data.ToDictionary(x => x.StallId, x => x.StallName);

    List<MFDetailsModel> data1 = _provider.GetMFDetailsList();
    VM.MFNameDDl = data1.ToDictionary(x => x.Id, x => x.MFName);


    long MFID1 = Convert.ToInt64(MFID);

    long STallId = Convert.ToInt64(STID);

    VM.CompleteMenuByStallIDList = _provider.GetCompleteMenuByStallId_List(STallId);    
    return PartialView("_MenuTabs", VM);

}

Answer 1

非常感谢您的立即回复。这是我的问题的答案。

SaveStallMenu.cshtml

<div class="col-lg-4">
         <div class="form-group form-group-select2">
            <label style="font-size:15px;font-weight:bold;">Select MF Name</label>
           @Html.DropDownListFor(model => model.StallMenuModel.MFId, new SelectList(Model.MFNameDDl, "Key", "Value", "--- Select ---"), new { @onchange = "FillService()", @class = "form-control" })
           @Html.ValidationMessageFor(model => model.StallMenuModel.MFId, "", new { @class = "text-danger" })
         </div>
</div>

<div class="col-lg-4">
     <div class="form-group form-group-select2">
         <label style="font-size:15px;font-weight:bold;">Select Stall Name</label>
       @Html.DropDownListFor(model => model.StallMenuModel.StallId, new SelectList(Model.StallNameDDl, "Key", "Value", "--- Select ---"), new { @class = "form-control" })
       @Html.ValidationMessageFor(model => model.StallMenuModel.StallId, "", new { @class = "text-danger" })
    </div>
</div>

<div class="col-lg-4" style="float:right;">
    <div class="form-group form-group-select2">
           <input type="submit" value="Filter Menu" id="Filter" class="btn btn-success" style="margin-top:25px;float:right;" />
     </div>
</div>

    <div id="partialViewDiv"></div>

    <script>
        $('#Filter').click(function () {
            var MF_Id = $('#StallMenuModel_MFId').val();
            var Stall_Id = $('#StallMenuModel_StallId').val();

            $.ajax({
                url: '@Url.Action("uppendStallData1", "Admin")',
                data: { MFID: $("#StallMenuModel_MFId").val(), STID: $("#StallMenuModel_StallId").val() },
                type: 'POST',
                success: function (data) {
                    $("#partialViewDiv").html(data);
                }
            });
        });
    </script>

Controller 代码:

[HttpPost]
public PartialViewResult uppendStallData1(string MFID, string STID)
{
    AdminVM VM= new AdminVM();

    long MFID1 = Convert.ToInt64(MFID);
    long STallId = Convert.ToInt64(STID);

    List<StallsModel> data = _provider.GetStallsList();
    VM.StallNameDDl = data.ToDictionary(x => x.StallId, x => x.StallName);

    List<MFDetailsModel> data1 = _provider.GetMFDetailsList();
    VM.MFNameDDl = data1.ToDictionary(x => x.Id, x => x.MFName);             

    VM.CompleteMenuByStallIDList = _provider.GetCompleteMenuByStallId_List(STallId);
    return PartialView("_MenuTabs", VM);
}