DropDownListFor won't call function when changed

Question

I'm pretty new to html, razor, and MVC so I apologize if this is a easy fix, but I've worked on this issue for a while with no resolution. I would like a controller action to be triggered that re-populates a partial view every time a drop down list changes. I've tried implementing this with the 'onchange' html attribute as well as by setting an id for the drop down and having a jquery function trigger it. But I can't get any of the three functions below to fire. Here's my code..

@model AislesOnlineDataControl.Models.PickupPointsListModel

@{
  ViewBag.Title = "PickupPointsList";
}

<script>
   function Select() {
     @Html.Action("PickupPartial", "PickUpPoint", new { mod = Model.points[Model.selectedID] });
   };

  $("#PupDropDown").on('change', function () {
    @Html.Action("PickupPartial", "PickUpPoint", new { mod = Model.points[Model.selectedID] });
  });

   $(function() {
     $('#PupDropDown').change(function () {
        Model.selectedID = Convert.ToInt32(selectPoint.SelectedValue);
        //window.location.reload();
        @Html.Action("PickupPartial", "PickUpPoint", new { mod = Model.points[Model.selectedID] });
     });
   });
</script>

<h2>Manage Pick-Up Points</h2>


@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()

     <div class="form-horizontal">
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })

        @{SelectList selectPoint = new SelectList(Model.selectedPoint, "Value", "Text");}
       <div class="form-inline">
          <div class="row">
             @Html.DropDownListFor(model => model.selectedID, selectPoint, null, new { @id="PupDropDown", @onchange = "Select()" })
             @Html.ActionLink("New", "CreatePickup", "PickUpPoint", null, new { @class = "btn btn-default pull-right" })
          </div>
       </div>
       <div>
          @Html.Partial("~/Views/PickUpPoint/PickupPartial.cshtml", Model.points[Model.selectedID])
       </div>
    </div>
}

`@Html.Action()` is razor code and is evaluated on the server before its passed to the client. It does not get re-evaluated on the client in response to client side events. You need to use ajax to call a server method to return a partial view. — , May 18 '16 at 23:41

score 0 · Answer 1 · edited May 23 '17 at 12:31

0

@Html.Action(..) returns the ActionResultfrom your partial view, which eventually turns out to be a block of html code. So you cant put your html code in your JavaScript block.

What you need is the JavaScript code to have a ajax call to the action and render action Result.

Here is example of making simple ajax call in asp.Net MVC

https://stackoverflow.com/a/16186212/2802809

edited May 23 '17 at 12:31

Community

1
1

answered May 18 '16 at 21:07

Z.Z.

674
6
16

DropDownListFor won't call function when changed

1 Answers1