How to Refresh a part of a Page, based on DropDownList selection in MVC?

Question

I'm working on ASP.Net MVC. I have a ViewPage SaveStallMenu.cshtml, which has 2 DropDown Lists (MF Dropdown, Stalls Dropdown) and a FilerMenu Button

When the page is loaded for the first time, it holds MenuItem of Stall 1.

Now, My question is, when I select an option from MF Dropdownlist and Stall DropdownList, and click Filter Menu button, the contents in the <div id="partialViewDiv"></div> should be refreshed with the Menu Item related to the Stall Selection.

I'm using AJAX for this purpose.

When I click the FilterMenu button

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

This Should submit my form to uppendStallData ActionMethod, but I don't know why It's not working.

Pardon me, if you find flaws in my explanation of Question. And please try to go through My code and provide your guidance.

I tried many solutions as you can see the Scripts below,but didn't get what I'm trying to do.

Trial 1: If I use above Ajax.BeginForm, then uppendStallDatadoesn't get ViewModel data POSTed.

[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: If I call a as shown below, on FilterMenu button click, this script sends the dropdownlist selected values to uppendStallData, but after successful execution of the Method in Contoller, fails to return the PartialView and append to <div id="partialViewDiv">.

With Trial2, my script and contoller method is as follow,

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

This is Controller code:

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

}

That is way too much code. Please only post the least amount of code that is related to the issue. — CodingYoshi
– CodingYoshi, Commented Feb 5, 2017 at 16:11
Pardon me for posting too much code. I thought if would be of help to understand my question. Please go through the Scripts ,My Contoller code, MY Trials. — Sridevi Mahapatra
– Sridevi Mahapatra, Commented Feb 5, 2017 at 16:20
Which specific part is not working ? When you submit the button, what happens now ? Is it making an ajax call (check browser network tools)? What is inside your form ? — Shyju
– Shyju, Commented Feb 5, 2017 at 17:13
@Shyju , when please check Trial1 and Trial 2. I have described the problem and what I did. — Sridevi Mahapatra
– Sridevi Mahapatra, Commented Feb 6, 2017 at 5:17

Dawood Awan · Accepted Answer · 2017-02-06 05:36:58Z

Thanks a lot for Your Immediate response. This is the answer for My Question.

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

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

THANKS a Lot to all whose POSTS i have refered in stackoverflow, to get this result :)

Collectives™ on Stack Overflow

How to Refresh a part of a Page, based on DropDownList selection in MVC?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related