Partial view is not displaying as a Json after requested .NET CORE MVC

Question

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!

From your Action you are returning a full json object not your view. return PartialView(viewname) might help. — AliK, Jul 05 '21 at 22:39
@AliK No, the data in partial view is dynamic and it rendered depending on the `id` key in dropdown list item whenever I click. So I want to returned `Json` . — frankiie, Jul 05 '21 at 22:52

score 0 · Accepted Answer · answered Jul 05 '21 at 22:53

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>

I followed you suggest and it worked! Thank you for your help! — frankiie, Jul 06 '21 at 00:29

Partial view is not displaying as a Json after requested .NET CORE MVC

1 Answers1