ASP.NET Core 6 MVC ajax 在正文部分呈现视图

Question

我正在创建一个 ASP.NET Core 6 MVC 应用程序。

在我的_Layout.cshtml ，我有一个菜单，该选项调用 controller 中的一个方法，该方法在@RenderBody()中呈现一个视图

化繁为简，菜单是这样的

<li><a class="nav-link link-light" asp-controller="Employer" asp-action="Index">Employer Setup</a></li>

controller是这样的

public IActionResult Index()
{
    var sessionValue = HttpContext.Session.GetString("Header");
    HeaderViewModel header = JsonSerializer.Deserialize<HeaderViewModel>(sessionValue);

    return View("Index", header);
}

在某些情况下，我还需要通过 Ajax 调用此操作。我在我的_Layout.cshtml中定义了它：

 <div>
        <main id="main" role="main" class="pb-3">
            @RenderBody()
        </main>
    </div>
<script language="javascript" type="text/javascript">
    $(document).ready(function () {
$.ajax(
             {
                type:"POST",
                    url: '@Url.Action("Index", "Employer")',
                    success:function(result){
                        $("#main").html(result);
                    },
                    
             }
         );
</script>

我遇到的问题是 controller 返回一个视图，因此整个布局在正文部分再次呈现，而不是仅呈现新视图。 所以我必须返回局部视图而不是视图。

我不想重复检索相同数据的方法。

有没有办法返回视图？

Answer 1

在视图中

<script type="text/jscript">     
$(document).ready(function () {        
    $("#partialviews").load('/controller/actionmethod');        
});        

在 controller

public PartialViewResult ActionMethod()
{
    return PartialView("_partialviewname");
}

Answer 2

返回视图（“索引”，标题）；

因为你返回视图，所以整个布局在主体部分再次呈现。

您可以创建一个新操作来显示内容。

家庭控制器：

 public IActionResult Index()
        {
            return View();            
        }
        
        public ContentResult TestData(string header)
        {
            header = "sss";
            return Content(header, "text/plain");
        }

布局：

<div>
        <main  id="main" role="main" class="pb-3">
            @RenderBody()    
        </main>       
    </div>     
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
         $(document).ready(function () {
      
                $.ajax({
                    type: 'GET',
                    url: '/home/TestData/',
                    success: function (result) {
                        $('#main').html(result);
                    }
                });
            });     
   </script>

结果：