Как обновить часть страницы, основанную на выборе DropDownList в MVC?

Question

Я работаю над ASP.Net MVC. У меня есть ViewPage SaveStallMenu.cshtml, который имеет 2 выпадающие списки (MF DropDown, Лавки Dropdown) и кнопку FilerMenu

Когда страница загружается в первый раз, он держит MenuItem стойла 1.

сейчас , Мой вопрос заключается в том, что когда я выбираю опцию из 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, но я не знаю, почему это не работает.

Простите меня, если вы обнаружите недостатки в моем объяснении вопроса. И, пожалуйста, попробуйте прочитать мой код и дать свое руководство.

Я пробовал много решений, так как вы можете увидеть Скрипты ниже, но не получили то, что я пытаюсь сделать.

Trial 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); 

} 

Trial 2: Если я называю, как показано ниже, на FilterMenu кнопки мыши, этого скрипт отправляет DropDownList выбранного значения uppendStallData, но после успешного выполнения метода в-регулятора, не возвращается PartialView и добавьте к <div id="partialViewDiv">.

С Trial2, мой сценарий и метод Контроллер илит нижеследовал,

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

Контроллер

  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); 
     } 

Это код контроллера:

[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); 
}