¿Cómo se construye una página de interfaz individual en ASP.NET MVC?

Question

Quiero construir una aplicación web con una "página de la interfaz individual", con ASP.NET MVC.

He buscado si esto era lo menos posible y creo que la respuesta es: no por medios simples (lectura http://msdn.microsoft.com/en-us/magazine/cc507641.aspx#S2 penúltimo párrafo;. que el artículo es de mayo de 2008, sin embargo)

he encontrado otros ejemplos que implementan esta codificando / piratería con jQuery. Sin embargo, estoy buscando una solución limpia, utilizando .NET estándar enfoques, si es posible.

Lo que quiero es precisamente la misma funcionalidad cuando se crea un nuevo "Aplicación Web MVC". Sin embargo, en lugar de enlaces a "/ Inicio / Acerca de", que vuelve a cargar la página entera, quiero enlaces a " # Inicio / Acerca de", que sólo cargas la parte nueva a través de AJAX.

El enfoque estándar de llamar a las plantillas (vistas parciales) con Html.RenderPartial es exactamente lo que quiero, sólo entonces cargarlos a través de Ajax-solicitudes.

Por supuesto, podría ser que no pueda usar estas las plantillas que se representan por el Maestro páginas por alguna razón (tal vez es esperando a ser llamado siempre en un cierto contexto de una cierta colocar más o menos). Pero tal vez hay otra solución limpia para la forma de construir la plantilla de páginas y descargarlas de la página maestra.

¿Quién tiene una buena solución para implementar tal cosa, una sola página de interfaz?

PS: Estoy desarrollando en Visual Web Developer 2008 Express Edition con MVC 1.0 instalado, en C #

[editar] A continuación leí que el trabajo con las plantillas es posible y que jQuery se ve de hecho como inevitable, así que lo probé. El siguiente código transforma enlaces regulares creados por Html.ActionLink en el anclaje de enlaces (con #) para contener la historia, y luego buscar a la página a través de AJAX y sólo inyectar el html-parte que me interesa (es decir, la parte de la página dentro de div # PartialView):

$("a").each(function() {
    $(this).click(function() {
        $("div#partialView").load($(this).attr("href") + " div#partialView");
        location.hash = $(this).attr("href");
        return false;
    });
});

Estos enlaces permiten también la degradación elegante.

Pero lo que me queda ahora, todavía es ir a buscar el toda página en lugar de sólo la página parcial. Alterar el controlador no ayudó; todavía me HTML de la página entera siempre, con todas estas declaraciones:

public ActionResult About()
{
    return View();
    return View("About");
    return PartialView();
    return PartialView("About");
}

¿Cómo podría devolver sólo el contenido de la parte que me interesa (es decir, el contenido de Inicio / About.aspx)? Lo que me gustaría es la publicación de un valor con AJAX (por ejemplo, "RequestType = ajax") para que mi controlador conoce la página se descargue a través de AJAX y sólo devuelve la página parcial; en caso contrario devolverá toda la página (es decir, cuando usted visita / Inicio / Acerca lugar de # Inicio / Acerca de).

Es una buena práctica para alterar Global.asax.cs tal vez, para crear un nuevo esquema de direccionamiento para llamadas Ajax-, que sólo devolverá las páginas parciales? (No he mirado en esto mucho, sin embargo.)

[Edit2] Robert Koritnik estaba en lo cierto: también necesitaba una página About.ascx (UserControl), con sólo la pequeña HTML contenido de esa página. La primera línea de About.aspx estaba vinculado con el Maestro-a través de la página MasterPageFile="~/..../Site.master" lo que hizo que todo el HTML se imprimió.

Pero para ser capaz de ejecutar la siguiente en mi controlador:

public ActionResult About()
{
    return Request.IsAjaxRequest() ? (ActionResult)PartialView() : View();
}

I necesitaba para alterar la forma se encontró una PartialView (archivo .ascx) y un archivo View (.aspx), de lo contrario ambos métodos volverían la misma página (About.aspx, en última instancia resulta en un bucle infinito). Después de poner el siguiente en Global.asax.cs, las páginas correctas serán devueltos con PartialView() y View():

protected void Application_Start()
{
    foreach (WebFormViewEngine engine in ViewEngines.Engines.Where(c => c is WebFormViewEngine))
    {
        /* Normal search order:
        new string[] { "~/Views/{1}/{0}.aspx",
            "~/Views/{1}/{0}.ascx",
            "~/Views/Shared/{0}.aspx"
            "~/Views/Shared/{0}.ascx"
        };
        */

        // PartialViews match with .ascx files
        engine.PartialViewLocationFormats = new string[] { "~/Views/{1}/{0}.ascx", "~/Views/Shared/{0}.ascx" };

        // Views match with .aspx files
        engine.ViewLocationFormats = new string[] { "~/Views/{1}/{0}.aspx", "~/Views/Shared/{0}.aspx" };
    }

    RegisterRoutes(RouteTable.Routes);
}

Answer 1

Vista completa vs Vista parcial

Parece que se ha ensuciado algo. Si crea una página de About.aspx con todo el HTML necesario para mostrar la página entera que en realidad no importa si usted dice

return PartialView('About');

La vista sigue devolviendo todo el HTML que está escrito en ella.

Se debe crear una directiva separada About.ascx que sólo tendrá el contenido de la página en sí, sin la cabecera y otras cosas que de parte de toda la página.

Su About.aspx página original tendrá algo como esto en su contenido (para evitar la repetición de escribir el mismo contenido dos veces):

<%= Html.RenderPartial("About") %>

Y usted puede tener dos acciones del controlador. Uno que devuelve una vista normal y uno que devuelve una vista parcial:

return View("About"); // returns About.aspx that holds the content of the About.ascx as well
return PartialView("About"); // only returns the partial About.ascx

En cuanto a rutas en Global.asax

En lugar de escribir rutas separadas para llamadas Ajax que prefiere escribir un filtro de acción que funcionan de manera similar como filtro de acción AcceptVerbsAttribute. De esta manera sus solicitudes del cliente se mantendrá igual (y evitando así que el usuario solicite manualmente cosas mal), pero dependiendo del tipo de solicitud de la acción del controlador correcta se ejecutan.

Answer 2

Bueno, puede cargar la vista parcial a través petición AJAX. En el ejemplo, voy a utilizar jQuery para hacer una llamada AJAX.

Estos podría ser la acción en el controlador (nombrada HomeController):

public ActionResult About()
    {
        //Do some logic...
        //AboutView is the name of your partial view
        return View("AboutView");
    }

jQuery Ajax llamar a colocar el html retured en el lugar que desee:

var resultDiv = $('#contentDIV');

    $.ajax({
        type: "POST",
        url: "/Home/About",
        success: function(responseHTML) {
            resultDiv.replaceWith(responseHTML);
        }
    });

[edit-pregunta se actualiza]

Es posible hacer exactamente lo que quiere. acción primer controlador puede dar una copia de la vista parcial, así que la mía "AboutView" Podría haber sido algo como esto:

<table>
<tr>
    <th>
        Column1Header
    </th>
    <th>
        Column2Header
    </th>
</tr>
<tr>
    <td>
    ...
    </td>
    <td>
    ...
    </td>
</tr>

y este código HTML es exactamente lo que vas a tener en responseHTML el manejador de éxito en el método jQuery Ajax.

En segundo lugar, se puede distinguir en la acción del controlador si la petición es una petición AJAX:

public ActionResult About()
    {
        //partial AboutView is returned if request is ajax
        if (Request.IsAjaxRequest())
            return View("AboutView");
        else //else it will be the default view (page) for this action: "About"
            return View();
    }

Answer 3

Tenemos un sitio que hace exactamente esto, y que realmente desea utilizar la ruta jQuery aquí - mucho más fácil de implementar en el largo plazo. Y se puede hacer fácilmente con gracia degrada para los usuarios que no tengan habilitado JavaScript -. Como Google

Answer 4

no es del todo claro lo que estás pidiendo, es que para un ejemplo completo o por alguna funcionalidad específica? Usted debe ser capaz de hacer esto sin jQuery para escenarios simples, puede utilizar los ayudantes de vista Ajax como el método ActionLink. Además, yo no entiendo muy bien cuál es su problema con renderPartial, pero tal vez usted está buscando algo así como RenderAction de ASP.NET MVC futuros.

Answer 5

ASP.NET MVC 4 (ahora en fase beta) añade soporte para aplicaciones Una sola página en MVC.

http://www.asp.net/single-page-application

ACTUALIZACIÓN: ... y lo sacaron de la MVC 4 RC

ACTUALIZACIÓN: ... y vuelve con la actualización 2012 de otoño