How to dynamically update a div immediately when an item is selected in a drop-down list?

Question

Editing for clarity. When an item is selected from the drop-down list, call a method in my controller that will return a partial view and refresh the div on my page.

---

I have a PartialView ActionLink that I want to call every time I select a new item from the drop-down list to refresh the table on my web page - how can I do this without clicking a button?

@Html.DropDownListFor(m => m.SelectedCustomerId, Model.CustomerIDItem)

I can make Request ["selectedCustomerId"] to retrieve the value from it without any problems, but my question really concerns the dynamic part. The first idea was to connect AJAX to the drop-down list or use jQuery, but I don't know how to actually make this work.

Thanks in advance.

Change 4:

:

_ DefaultValuesView.cshtml:

 @Html.DropDownListFor(m => m.SelectedCustomerId, Model.CustomerIDItem)

<div id="divValues">
    @{ Html.RenderPartial("_DefaultValuesPartialView");}
</div>

DefaultValuesController.cs

[HttpPost]

public PartialViewResult DefaultValuesPartialView(string SelectedCustomerId)
       {
            Session["theCustomerId"] = Request["selectedCustomerId"];
            var model = new DefaultValuesModel
            {
                CustomerIDItem = GetCustomerIds(),
                FieldIDItem = GetValues(),
                CurrentValuesItem = GetCurrentValues()
            };

            model.TriggerOnLoad = true;

            this.customerId = Convert.ToInt32(Request["selectedCustomerId"]);

            errorMessage = "PartialView is loaded!";
            model.TriggerOnLoadMessage = errorMessage;
            return PartialView("_DefaultValuesPartialView", model);
        }

Answer 1

:

@Html.DropDownListFor(m => m.SelectedCustomerId, Model.CustomerIDItem, new { @id = "customId" })
<div id="divValues">

</div>


$(function() {
    $("#customId").change(function() {
        var id = $(this).val();
        $('#divValues').load('@Url.Action("DefaultValuesPartialView", "DefaultValues")?selectedCustomerId=' + id, function (response, status, xhr) { 
             $("#divValues").html(response); 
        });
    });
});

:

public PartialViewResult DefaultValuesPartialView(int? selectedCustomerId)
{
     Session["theCustomerId"] = selectedCustomerId.Value;
     var model = new DefaultValuesModel
     {
         CustomerIDItem = GetCustomerIds(),
         FieldIDItem = GetValues(),
         CurrentValuesItem = GetCurrentValues()
     };

     model.TriggerOnLoad = true;

     this.customerId = selectedCustomerId.Value;

     errorMessage = "PartialView is loaded!";
     model.TriggerOnLoadMessage = errorMessage;
     return PartialView("_DefaultValuesPartialView", model);
}

, , , .

jQuery .load, , , - ,

Answer 2

, ( JQuery)... JSFiddle

<select id="myDdl">
    <option value="AM">AM</option>
    <option value="PM">PM</option>
</select>
<div id="babylonAndTing">
    A up lad.
</div>

$(function() {
    $("#myDdl").change(function() {
        $("#babylonAndTing").text( $('option:selected', this).text() );
    });
});

P.S. , -, " div , ?", - ?!?!? , , : p

Edit: , - ...

@using (Ajax.BeginForm("SelectCustomer", "MyControllerName", FormMethod.Post, null))
{ 
    @Html.DropDownListFor(m => m.SelectedCustomerId, Model.CustomerIDItem)
}

<script type="text/javascript">
    $('#SelectedCustomerId').change(function () {
        $(this).parents('form').submit();
    });
</script>

[HttpPost]
public ActionResult SelectCustomer(int? selectedCustomerId)
{
    // Stuff goes here.
}

Answer 3

You can make an ajax request for a partial view and get back only its HTML content. The key is used url: "@Url.Action("DefaultValuesPartialLayout")"to get the correct URL to download partial from.

<div id="divValues">
    @{ Html.RenderPartial("_DefaultValuesPartialLayout");}
</div>

$(document).ready(function() {
    $("#@Html.IdFor(m => m.SelectedCustomerId)").change(function() {
        var selectedCustomerId = $("#@Html.IdFor(m => m.SelectedCustomerId)").val();

        $.ajax({
            url: "@Url.Action("DefaultValuesPartialView")",
            method: "GET",
            data: { SelectedCustomerId: selectedCustomerId },
            success: function(data, status, xhr) {
                $("#divValues").html(data);
            }
        });
    })
});