将PartialView渲染到MVC中的布局页面的最佳方法是什么？ [英] What is the best way to render PartialView to a Layout Page in MVC?

问题描述

我的 MVC5 项目中有一个布局页面，我想渲染所有页面内容（部分视图）通过单击左侧的菜单链接（超链接），如下所示。有一些方法使用 Ajax 等，但我不确定哪种方法最符合我的需求。是否有关于此问题的示例包含布局页面和控制器方法？

There is a layout page in my MVC5 project and I want to render all the page contents (partial views) by clicking menu links (hyperlink) on the left side as shown below. There are some methods using Ajax, etc. but I am not sure which approach meets my needs best. Is there any example regarding to this problem containing the Layout page and Controller methods?

推荐答案

您必须首先将您的正文内容包装在div中并为其指定任何ID：

You have to first wrap your body content in div and assign any id to it:

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

现在在脚本菜单点击事件：

$(".menuLinkItem").click(function (e) {
    e.preventDefault();        
    var controllerName = $(this).attr('data-controllername');
    var actionName = $(this).attr('data-actionname'); 

    if (String(actionName).trim() == '') {
        return false;
    }
    if (typeof (controllerName) == "undefined") {
        return false;
    }

    var url = "/" + controllerName + "/" + actionName;

    //Open url in new tab with ctrl key press
    if (e.ctrlKey) {
        window.open(url, '_blank');
        event.stopPropagation();
        return false;
    }            

    $.ajax({
        url: url,
        type: 'POST',
        success: function (data) {
            var requestedUrl = String(this.url).replace(/[&?]X-Requested-With=XMLHttpRequest/i, "");
            if (typeof (requestedUrl) == "undefined" || requestedUrl == 'undefined') {
                requestedUrl = window.location.href;
            }

            // if the url is the same, replace the state
            if (typeof (history.pushState) != "undefined") {
                if (window.location.href == requestedUrl) {
                    history.replaceState({ html: '' }, document.title, requestedUrl);
                }
                else {
                    history.pushState({ html: '' }, document.title, requestedUrl);
                }
            }

            $("#divContentArea").html(data);                

        },
        error: function (xhr) {
        }
    });

});

控制器：

[AcceptVerbs(HttpVerbs.Get | HttpVerbs.Post)]
public PartialViewResult Index()
{
        if (HttpContext.Request.HttpMethod == "GET")
        {
            return View();
        }
        else
        {
            return PartialView();
        }
}

这篇关于将PartialView渲染到MVC中的布局页面的最佳方法是什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！