Show partial view using jQuery.load () function
I have a project where when I insert something, I want to update only a partial view or only a table. When I click on the button to insert, it inserts but does not load the table, the table will just be empty =
View:
@model ClinicManagemet.Models.Assessment
@{
ViewBag.Title = "Update Assessment";
}
<script src="~/Scripts/jquery-3.1.1.min.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
<h2>Assessment</h2>
<script>
$(document).ready(function () {
$('#btn-disease').click(function () {
var diseaseID = $('#DiseaseID').val();
var assessmentID = $('#AssessmentID').val();
var urll = '/DiseaseLists/_DiseaseList?id=' + assessmentID;
$.ajax({
type: "POST",
dataType: "Json",
data: {
'diseaseID': diseaseID,
'assessmentID': assessmentID
},
url: '@Url.Action("CreateDisease", "DiseaseLists")',
success: function (f) {
$('#tbl-disease').load(urll);
alert(f);
}
})
})
})
</script>
@Html.HiddenFor(model => model.AssessmentID)
<div class="form-group">
@Html.LabelFor(model => model.DiseaseID, "DiseaseID", htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.DropDownList("DiseaseID", null, htmlAttributes: new { @class = "form-control" })
@Html.ValidationMessageFor(model => model.DiseaseID, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" id="btn-disease" value="Add" />
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2W col-md-10">
<div id="tbl-disease">
@{
Html.RenderAction("_DiseaseList", "DiseaseLists", new { Model.AssessmentID });
}
</div>
</div>
</div>
partial view controller:
public ActionResult _DiseaseList(int? assessmentID)
{
var diseaseLists = db.DiseaseLists.Include(d => d.Assessment).Include(d => d.Disease).Where(d => d.AssessmentID == assessmentID);
return PartialView(diseaseLists.ToList());
}
+3
source to share