javascript - section - ¿Cuál es la mejor manera de convertir PartialView a una página de diseño en MVC?

render partial view mvc 5

Question

Hay una página de diseño en mi proyecto MVC5 y quiero MVC5 todos los contenidos de la página (vistas parciales) haciendo clic en enlaces de menú (hipervínculo) en el lado izquierdo como se muestra a continuación. Hay algunos métodos que usan Ajax , etc. pero no estoy seguro de qué enfoque satisface mejor mis necesidades. ¿Hay algún ejemplo relacionado con este problema que contenga la página Layout y los métodos del Controller ?

Answer 1

Primero debe envolver el contenido de su cuerpo en div y asignarle cualquier ID:

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

Ahora en el menú de Script, haga clic en evento :

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

Controlador:

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