Search code examples
jqueryonchangehtml.dropdownlistforasp.net-mvc-partialview

MVC PartialViewResult not triggered on Dropdownlistfor changed event (event is triggered, PartialViewResult is not)


Hi all and thank you for reading this.

I have the same scenario already working thanks to Stephen Muecke his answer

The only difference here is that i don't want a Partial view loading data from a textbox search value but from a dropdownlistfor selection.

I have managed to have the .on("change", ...) event working but i my PartialViewResult "action" is not hit for some reason. I have no errors in the console so i don't think its JS/JQuery.

This is what i have:

Partial View:

    @Html.DropDownListFor(p => p.SelectedSupplier, Model.SuppliersSelectList, new { @class = "form-control col-md-5", @id = "dropdownSuppliers" })

(Product)Controller:

   public PartialViewResult SupplierChanged(int selectedSupplierId ,ProductViewModel model)
    {     
        // perform logic and load new data into the partial view
        return PartialView("_ProductDetail");
    }

Javascript inside the regular view that is calling the PartialViewResult:

 <script type="text/javascript">
    $(function () {
        $('#dropdownSuppliers').on("change",function () {

            //Content to send
            var selectedValue = $(this).val();             

            $.get('@Url.Action("SupplierChanged", "Product")', { "SelectedValue": selectedValue },
                        function (result) { $('#panel6').html(result); }
            );            
        });
    });
</script>

Reference the PartialView:

 <div class="col-md-12 tab-pane fade float-left" id="panel6" role="tabpanel" style="margin-right:0;">

                    @Html.Partial("_ProductDetail")

                </div>

I have tested several ways, with alerts to see if my JS was executed and it is, i have an ID of the selected item in the dropdownfor, only i can not seem to hit my PartialViewResult in my controller.

I am able to use a @onchange = "this.form.submit();" in my dropdown, but this is not what i want, i have half page which must stay static, the other, based on the selection in the dropdownfor it should load data relevant to that selection.

Can anyone tell me possible reasons why this is not firing my PartialViewResult?

Thank you in advance! kind regards


Solution

  • Try pass only one parameter.

    Change your method to

    public PartialViewResult SupplierChanged(int selectedSupplierId)
    {     
        // perform logic and load new data into the partial view
        return PartialView("_ProductDetail");
    }
    

    In a lot of case the engine ASP.NET MVC cannot do binding to the method where got more than one parameter.

    I hope this helped you