使用 JS 在 MVC 中加载部分视图时出错

Question

I am trying to load a partial view in my MVC project using the action method and javascript / jquery. I am not very knowledgeable in this area but I have tried to do some research.

What is supposed to happen is the user puts in the year and month they want to see the data for and press go. It then returns the partial view underneath with the data in. The SP works fine, I am just struggling with getting the data to show correctly in the page. Here is my code below:

Action method:

public ActionResult Search(string month, string year)
    {
        var list = Singleton.Instance().Repository.Form.GetAllFormsByDate(month, year, GetCurrentUserDepartmentId());
        var departmentId = GetCurrentUserDepartmentId();
        var modelList = list.Select(form => new FormModel
        {
            FormId = form.FormId,
            UserId = form.UserId,
            Year = form.Year,
            Month = form.Month,
            IsApproved = form.IsApproved,
            IsSubmitted = form.IsSubmitted

        }).ToList();
        return PartialView("_AdminView", modelList);
    }

Main view

@model Expenses.Models.FormModel
@using Expenses.Models
@{
    ViewBag.Title = "AdminIndex";
}

<div class="card card-custom">
    <div class="card-body">
        <div class="row">
            @Html.DropDownListFor(x => x.Year, new List<SelectListItem>
     {
          new SelectListItem{ Text = "2020", Value = "2020"},
          new SelectListItem{ Text = "2021", Value = "2021"}
    }, new { @id = "year", @class = "form-control w-200px mr-5" })
            @Html.DropDownListFor(x => x.Month, new List<SelectListItem>
           {
                new SelectListItem{ Text = "January", Value = "January"},
                new SelectListItem{ Text = "February", Value = "February"},
                new SelectListItem{ Text = "March", Value = "March"},
                new SelectListItem{ Text = "April", Value = "April"},
                new SelectListItem{ Text = "May", Value = "May"},
                new SelectListItem{ Text = "June", Value = "July"},
                new SelectListItem{ Text = "August", Value = "August"},
                new SelectListItem{ Text = "September", Value = "September"},
                new SelectListItem{ Text = "October", Value = "October"},
                new SelectListItem{ Text = "November", Value = "November"},
                new SelectListItem{ Text = "November", Value = "November"},
                new SelectListItem{ Text = "December", Value = "December"}
          }, new { @id = "month", @class = "form-control w-200px" })

            <button type="button" class="btn btn-success ml-20" id="btnOk">
                Go
            </button>
        </div>
        <div class="row mt-10">
            <div class="col-md-12">
                <div id="sessions" style="min-height: 500px;"></div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">

    $(function () {
        
        $("#btnOk").click(function () {
            debugger;
            loadSessions();
        });

    });

    function loadSessions() {
        $('#sessions')
        debugger;
                .html('<h4>Please wait.</h4>')
                .load('@Url.Content("~/Form/Search/")' +
                    "&month=" +
                    $('#month').val() +
                    "&year=" +
                    $('#year').val());

    }

</script>

Partial View:

 @model List<Expenses.Models.FormModel>
@{
    ViewBag.Title = "_AdminView";
}

<table class="table table-hover">
    <thead>
        <tr class="d-flex">
            <th scope="col" class="col-2">
                Year
            </th>
            <th scope="col" class="col-2">
                Month
            </th>
            <th scope="col" class="col-2">
                Submitted
            </th>
            <th scope="col" class="col-2">
                Approved
            </th>
            <th scope="col" class="col-2">

            </th>
            <th scope="col" class="col-2">

            </th>
        </tr>
    </thead>
    <tbody>
        @foreach (var a in Model)
        {

            <tr class="d-flex">
                <td class="col-2">
                    @a.Year
                </td>
                <td class="col-2">
                    @a.Month
                </td>
                <td class="col-2">
                    @if (a.IsSubmitted == false)
                    {<i class="far fa-times-circle text-danger icon-2x"></i> }
                    else
                    { <i class="far fa-check-circle text-success icon-2x"></i>}
                </td>
                <td class="col-2">
                    @if (a.IsApproved == false)
                    {<i class="far fa-times-circle text-danger icon-2x"></i> }
                    else
                    { <i class="far fa-check-circle text-success icon-2x"></i>}
                </td>
                <td class="col-2">
                    @if (a.IsSubmitted == false)
                    {@Html.ActionLink("Edit", "Edit", "Form", new { formId = a.FormId }, new { @class = "btn btn-primary" })}
                else
                {@Html.ActionLink("View", "View", "Form", new { formId = a.FormId }, new { @class = "btn btn-primary" })}
                </td>
                <td class="col-2">
                    <button type="button" class="btn btn-success" data-toggle="modal" data-target="#exampleModal">
                        <i class="fab fa-telegram-plane"></i>Submit
                    </button>
                </td>
            </tr>
        }
    </tbody>
</table>

Any help is much appreciated, thanks in advance!

Answer 1

For binding partial view from jquery, you need to try with this

function loadSessions() {
   $.ajax
        ({
            url: "/Search",
            contentType: "application/html; charset=utf-8",
            type: "GET",
            data: { month: $('#month').val(), year: $('#year').val()},
            cache: !0,
            datatype: "html",
            success: function (t) {
                $('#sessions').empty();
                $("#sessions").html(t);
               
            }
      
        })