Load PartialView with using jquery Ajax?

Question

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.

Sharla

Is the model loaded on the initial page load? if the model is not instantiated and initialized won't it cause an exception. Or are you loading a partial view with a record from when the page is loaded the first time? Sorry for any incorrect vernacular; I am new to this. – Treadmill

Answer 1

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.

Westminster

Thanks. Should I check if the return is null in the view? – Coracle

No, you should do that in your controller action. You could return a JSON response in this case so that the success AJAX handler is able to detect this case and act accordingly. – Westminster

@DarinDimitrov $('#container').html(result); this will fills the partial view in that container rite ?. So is it required for to call the corresponding action that you mentioned after this line then you would wrap the partial with a div given an id: . – Emileeemili

@DarinDimitrov - is the @Html.Partial required? Assuming the Partial view has the same name as the controller action (MeterInfoPartial in this case), it seems to work okay without it. – Haematinic

@DarinDimitrov what if partial view parameter is viewmodel with many field not just single string/int parameter?? – Coelenteron

Answer 2

<script type="text/javascript">
    $(function() {
        $('#addnews').click(function() {
                $.ajax({
                    url: '@Url.Action("AddNews", "Manage")',
                    type: 'GET',
                    cache: false,
                }).done(function(result){
                    $('#containera').html(result);
                });
        });
    });
</script>

Subspecies