Load PartialView with using jquery Ajax?

asp.net-mvc, html.dropdownlistfor, jquery

Solution

You could subscribe to the `.change()` event of the dropdown and then trigger an AJAX request:

<script type="text/javascript">
    $(function() {
        $('#meters').change(function() {
            var meterId = $(this).val();
            if (meterId && meterId != '') {
                $.ajax({
                    url: '@Url.Action("MeterInfoPartial")',
                    type: 'GET',
                    cache: false,
                    data: { meter_id: meterId }
                }).done(function(result) {
                        $('#container').html(result);
                });
            }
        });
    });
</script>

and then you would wrap the partial with a div given an id:

<div id="container">
    @Html.Partial("MeterInfoPartial")
</div>

Also why are you parsing in your controller action, leave this to the model binder:

[HttpGet]
public ActionResult MeterInfoPartial(int meter_id)
{
    var meter = entity.TblMeters.FirstOrDefault(x => x.sno == meter_id);
    return PartialView(meter);
}

Be careful with `FirstOrDefault` because if it doesn't find a matching record in your database given the `meter_id` it will return `null` and your partial will crash when you attempt to access the model.

Problem

PartialView ``` @model OsosYeni23072012.Models.TblMeters <h3> Model.customer_name </h3> <h3> Model.meter_name </h3> ``` Controller ``` [HttpGet] public ActionResult MeterInfoPartial(string meter_id) { int _meter_id = Int32.Parse(meter_id); var _meter = entity.TblMeters.Where(x => x.sno == _meter_id).FirstOrDefault(); return PartialView("MeterInfoPartial", _meter); } ``` Razor ``` @Html.DropDownList("sno", new SelectList(Model, "sno", "meter_name"), "-- Select Meter --", new { id = "meters"}) @Html.Partial("MeterInfoPartial") ``` I want to load partial view, if dropdownlist change. But I dont know How can I do this. I cant find any example about this. I do this with actionlink. But I did not with dropdown before. controller parameter `meter_id` equals dropdownlist selectedvalue. Thanks.

Original source