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.