将PartialView渲染到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() == '') { 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(); } }