Как перезагрузить только RenderBody

Question

У меня есть Layout с меню навигации, когда я щелкаю меню - вся страница перезагружается. Поэтому я попытался перезагрузить страницу, используя ajax-ссылку, но у меня все еще есть проблема. Моя проблема заключается в том, что я не вижу код представления javascript и не изменяю URL-ссылку. Как перезагрузить только частичные представления в разделе RenderBody ()?

В LayOut

 <a href="@Url.Action(Model.SubMenuVMs[0].ActionName,  Model.SubMenuVMs[0].ProgramName )" class="ajaxLink">
@Html.DisplayFor(model => Model.SubMenuVMs[0].MenuDescription)
</a>

 <div id="MainContent">
     @RenderBody()
 </div>

<script>
 $(function () { 
        $("a.ajaxLink").click(function (e) {
            e.preventDefault();
            $("#MainContent").load($(this).attr("href"));
        });

    });
</script>

Answer 1

Ну, в этом случае вам нужно использовать angular или react, чтобы сделать это легко. Вы также можете сделать это с jQuery. В этом случае вам нужно сделать это, заменив html в своей области содержимого. Вот ваш раздел рендеринга

<div id="MainContent">
    @RenderBody()
</div>

Возьмите лишние div там, где вы хотите переключить просмотра.

<div id="MainContent">
    @RenderBody()
    <div id="contentView"></div>
</div>

Теперь вам нужно создать ajax запрос кваш контроллер и вернуть частичные представления и заменить это представление в этой конкретной области в contentView. Вот действие для частичного просмотра

[HttpGet]
public ActionResult PartialViewUser(){
    return Partial("_UserPartial");
}

Создайте ajax-запрос к этому action

$.ajax({
    type: 'GET',
    url: '/Controller/PartialViewUser',
    success: function(resp){
        // Clear html from contentView ID
        // Then append new response
        $("#contentView").empty().append(resp);
    },
    error: function(resp){
        console.log(resp);
    }
});

Вы готовы идти. Это переключит просмотр для вас внутри contentView div. Помните, что для этого вам нужно только вернуть частичное представление.

Answer 2

Попробуйте библиотеку Pjax, установите флажок https://github.com/MoOx/pjax

В Javascript

var pjax = new Pjax({
    elements: "a", 
    selectors: [
        "#MainContent",
    ],
})

.NET

public ActionResult Product(int id)
{
      var product = productRepository.GetById(id);
      if (string.IsNullOrEmpty(Request.Headers["X-PJAX"]))
          return View(product);
      else
          return PartialView("/Views/Home/Product.cshtml", product);
}