在 MVC 核心应用程序中 Ajax 成功后刷新部分视图

Question

I have a partial view and I want to refresh its data after updating database. this is the layout:

@{
    ViewData["Title"] = "View";
    Layout = "~/Views/Shared/xxxx.cshtml";
}
<div id="myDiv">
   <partial name="_myView.cshtml" />
</div>
<!--some other partial views-->

<div class="customerBody">
    @RenderBody()
    <!--some other partial views-->
</div>

in my partial view named _myView I use:

<form asp-action="SaveAccountNo" data-ajax="true" data-ajax-success="myFunc">

and this is Jquery after form

<script>
    function myFunc() {
        $("#accountChangeModal").modal('hide');
        $("#myDiv").load("/Customer?handler=MyPartial");}
   
</script>

in my Customer controller:

 public PartialViewResult OnGetMyPartial()
        {
            return PartialView("_myView", /*data model*/_customer);

        }

    }

      //upadte accountNo
        [HttpPost("SaveAccountNo")]
        [ValidateAntiForgeryToken]
        public void SaveAccountNo(string NewAccountNo)
        {
            if (ModelState.IsValid)
            {
                if (NewAccountNo != null)
                {
                    //upadte accountNo
                    _customer.customer.AccountNo = NewAccountNo;

               }
            }
         }

it hides my modal window but injects whole the page in myDiv not the partial view, I put a breakpoint on OnGetMyPartial() and it didn't hit. it seems it has never called! the Index action is called and because of that whole the page is injected! this is my first AJAX call in MVC .net core maybe I am missing something.

Answer 1

You said you are using MVC, but the format of the load path is that in Razor Page. Maybe you can replace it with below:

$("#myDiv").load("/Customer/MyPartial");

and change your action name:

 public PartialViewResult MyPartial()
 {
     return PartialView("_myView", /*data model*/_customer);
 }