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>

結果：