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

问题描述

在我的 MVC5 项目中有一个布局页面，我想通过单击菜单链接(超链接)来呈现所有页面内容(部分视图)) 在左侧，如下所示.有一些方法使用 Ajax 等，但我不确定哪种方法最能满足我的需求.是否有任何关于此问题的示例，其中包含 Layout 页面和 Controller 方法?

解决方案

你必须首先将你的正文内容包裹在 div 中并为其分配任何 id:

@RenderBody()

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

$(".menuLinkItem").click(function (e) {e.preventDefault();var controllerName = $(this).attr('data-controllername');var actionName = $(this).attr('data-actionname');if (String(actionName).trim() == '') {返回假；}if (typeof (controllerName) == "undefined") {返回假；}var url = "/" + controllerName + "/" + actionName;//按ctrl键在新标签页中打开url如果(e.ctrlKey){window.open(url, '_blank');event.stopPropagation();返回假；}$.ajax({网址:网址，类型:'POST'，成功:功能(数据){var requestsUrl = String(this.url).replace(/[&?]X-Requested-With=XMLHttpRequest/i, "");if (typeof (requestedUrl) == "undefined" || requestsUrl == 'undefined') {requestUrl = window.location.href;}//如果url相同，则替换状态如果(typeof(history.pushState)！=未定义"){如果(window.location.href == requestsUrl){history.replaceState({ html: '' }, document.title, requestsUrl);}别的 {history.pushState({ html: '' }, document.title, requestsUrl);}}$("#divContentArea").html(data);},错误:函数(xhr){}});});

控制器:

[AcceptVerbs(HttpVerbs.Get | HttpVerbs.Post)]公共 PartialViewResult 索引(){if (HttpContext.Request.HttpMethod == "GET"){返回视图()；}别的{返回 PartialView();}}

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?

解决方案

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

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

Now in Script Menu click event:

$(".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) {
        }
    });

});

Controller:

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

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