Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Load PartialView with using jquery Ajax?

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.

like image 289
AliRıza Adıyahşi Avatar asked Aug 14 '12 07:08

AliRıza Adıyahşi


People also ask

Can we use jQuery in partial view?

Partial helper functions will not work with jQuery Client Side scripting. The Partial View will be populated and fetched using jQuery AJAX and finally it will be rendered as HTML inside DIV using jQuery.

How load partial views in ASP NET MVC using jQuery Ajax?

The GetPartial() action create a List of countries. It then calls the PartialView() method to return the partial view to the client. The first parameter of PartialView() is the name of the partial view and the second parameter is the model object to be passed to the partial view.

How can I return a partial call from Ajax?

When making AJAX requests, it is very simple to return HTML content as the result. Simply return an ActionResult using the PartialView method that will return rendered HTML to the calling JavaScript. Now define an action method in the book controller that returns an ActionResult using the PartialView.


1 Answers

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.

like image 141
Darin Dimitrov Avatar answered Oct 26 '22 09:10

Darin Dimitrov