I'm trying to load partial view as Json object using Ajax. I have a dropdown select list items, for each time I click on the item in the dropdown list the data must be returned respectively.
Here is my NotePartial.cs action that return partial view as Json.
[ActionName("NotePartial")]
public JsonResult NotePartial(int? id)
{
if (id == null)
return null;
var noticeModel = _context.Course
.Include(n => n.Notices)
.AsNoTracking()
.FirstOrDefault(m => m.CourseId == id);
if (noticeModel == null)
return null;
return Json(noticeModel);
}
This is my .cshtml file which will render and load Json as partial view.
<div class="col-sm-4 offset-4 form-inline">
<label class="">Courses </label>
<select id="courses_dropdown_list" class="custom-select ml-2" asp-items="@(new
SelectList(ViewBag.CourseList, "Value","Text") )">
</select>
// some code ...
<div class="note-partial">
<section class="text-center">
<div class="container">
<div class="row" id="note_table" data-url="@Url.Action(action: "NotePartial", controller: "Note")">
// I want partial view is loaded in here
</div>
</div>
</section>
</div>
And this is my Ajax script
@section Scripts
{
<script src="~/lib/jquery/dist/jquery.js"></script>
<script>
$(document).ready(function () {
$("#courses_dropdown_list").change(function () {
var id = $("#courses_dropdown_list").val();
var note_db = $("#note_table");
$.ajax({
cache: false,
type: "GET",
url: '@Url.Action("NotePartial", "Note")',
data: { "id": id },
success: function (data) {
var result = "";
note_db.html('');
$.each(data, function (id, note) {
result += '<table class="table table-striped">' +
'<thead>' +
'<tr>' +
'<th>#</th>' +
'<th>Name</th>' +
'<th>File Type</th>' +
'<th>File</th>' +
'<th>Created On</th>' +
'</tr>' +
'</thead>' +
'<tbody>' +
'<tr>' +
'<td>' + note.Id + '</td>' +
'<td>' +
'<a class="nav-link" mt-0 asp-controller="Note" asp-action="Detail" asp-route-Id="">' + note.Name + '</a>' +
'</td>' +
'<td>' +
'<a>' + note.FileType +'</a>'
'</td>' +
'<td>' +
'<a class="nav-link mt-0" asp-controller="Note" asp-action="Detail" asp-route-Id="">' + '##' + '</a>' +
'</td>'
'<td>' + note.CreatedOn +'</td>' +
'</tr>'
'</tbody>';
});
note_db.html(result);
},
error: function (xhr, ajaxOtions, errorMsg) {
alert("Failed to retrive data");
}
})
});
});
</script>
When I ran the program and set break points for NoteParial action, it retured the object as I expected brefore and the Ajax request is succeced as well. However the partial view is not displaying in the div tag. Hope someone could help me!
You need to move the result variable before ajax call.
@section Scripts
{
<script src="~/lib/jquery/dist/jquery.js"></script>
<script>
$(document).ready(function () {
$("#courses_dropdown_list").change(function () {
var id = $("#courses_dropdown_list").val();
var note_db = $("#note_table");
// **** Move result variable to here
var result = "";
$.ajax({
cache: false,
type: "GET",
url: '@Url.Action("NotePartial", "Note")',
data: { "id": id },
success: function (data) {
note_db.html('');
$.each(data, function (id, note) {
result += '<table class="table table-striped">' +
'<thead>' +
'<tr>' +
'<th>#</th>' +
'<th>Name</th>' +
'<th>File Type</th>' +
'<th>File</th>' +
'<th>Created On</th>' +
'</tr>' +
'</thead>' +
'<tbody>' +
'<tr>' +
'<td>' + note.Id + '</td>' +
'<td>' +
'<a class="nav-link" mt-0 asp-controller="Note" asp-action="Detail" asp-route-Id="">' + note.Name + '</a>' +
'</td>' +
'<td>' +
'<a>' + note.FileType +'</a>'
'</td>' +
'<td>' +
'<a class="nav-link mt-0" asp-controller="Note" asp-action="Detail" asp-route-Id="">' + '##' + '</a>' +
'</td>'
'<td>' + note.CreatedOn +'</td>' +
'</tr>'
'</tbody>';
});
note_db.html(result);
},
error: function (xhr, ajaxOtions, errorMsg) {
alert("Failed to retrive data");
}
})
});
});
</script>