Come si fa a costruire una Pagina Singola Interfaccia ASP.NET MVC?

Question

Voglio costruire una webapplication con una "Pagina Singola Interfaccia", utilizzando ASP.NET MVC.

Ho cercato se questo era almeno possibile e credo che la risposta sia:non con i mezzi più semplici (la lettura http://msdn.microsoft.com/en-us/magazine/cc507641.aspx#S2 secondo-ultimo paragrafo;che l'articolo è da Maggio 2008, però).

Ho trovato altri esempi che hanno implementato questa codifica/hacking con jQuery.Tuttavia, sto cercando una soluzione pulita, utilizzando standard .NET approcci, se possibile.

Quello che voglio è proprio la stessa funzionalità quando si crea un nuovo "MVC Web Application".Tuttavia, invece di link a "/Home/About" che consente di ricaricare l'intera pagina, voglio il link a "#Home/chi", che carica solo la parte nuova via AJAX.

L'approccio standard di chiamare modelli (vista parziale) con l'Html.RenderPartial è esattamente quello che voglio, solo per poi caricarli tramite AJAX-le richieste.

Naturalmente, potrebbe essere che non posso usare questi modelli che esegue il rendering delle pagine Master per qualche motivo (forse è in attesa di essere sempre chiamato in un certo contesto, da un certo posto o giù di lì).Ma forse c'è un'altra soluzione pulita per come costruire un modello di pagine e recuperarli dalla pagina Master.

Che ha una bella soluzione per l'implementazione di tale cosa, una Sola Pagina di Interfaccia?

PS:Sto sviluppando in Visual Web Developer 2008 Express Edition con MVC 1.0 installato in C#

[modifica] Qui sotto ho letto che il lavoro con i modelli è possibile e che jQuery sembra davvero come inevitabile, così ho provato.Il codice riportato di seguito trasforma collegamenti regolari creato da Html.ActionLink in anchor-link (con #) per contenere la storia, e quindi scaricare la pagina tramite AJAX e solo l'iniezione di html-la parte che mi interessa (es.la parte della pagina all'interno del div#partialView):

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

Questi collegamenti consentono di grazioso degrado.

Ma quello che ho lasciato oggi, non è ancora il recupero dell' tutto pagina invece che solo la parte della pagina.Alterare il controller non ha aiutato;ancora mi ha fornito il codice html della pagina intera, con tutte queste dichiarazioni:

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

Come posso restituire solo il contenuto della parte che mi interessa (es.il contenuto della Home/About.aspx)?Quello che mi piacerebbe è la Pubblicazione di un valore con l'AJAX (ad es."requesttype=ajax"), in modo che il mio controller sa che si accederà alla pagina tramite AJAX e restituisce solo la parte della pagina;altrimenti restituirà l'intera pagina (es.quando si visita /Home/invece di #Home/About).

È una buona pratica per modificare Globale.asax.cs forse, per creare un nuovo schema di routing per AJAX-chiamate, che restituirà solo parziale delle pagine?(Non ho indagato più di tanto, ancora.)

[edit2] Robert Koritnik è giusto:Ho bisogno anche di un'Circa.ascx pagina (UserControl) con solo i piccoli contenuti in formato HTML di quella pagina.La prima linea di Circa.aspx è stato collegato con la pagina Master via MasterPageFile="~/..../Site.master" che fece sì che tutti HTML è stato stampato.

Ma per essere in grado di eseguire i seguenti nel mio controller:

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

Avevo bisogno di cambiare il modo in cui un PartialView (.file ascx) e un View (.aspx) file trovato, altrimenti entrambi i metodi di restituire la stessa pagina (About.aspx, che si traduce in un ciclo infinito).Dopo aver inserito il seguente in Global.asax.cs, il corretto pagine verranno restituiti con PartialView() e 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

Pieno vista vsVista parziale

Mi sembra di aver incasinato qualcosa.Se si crea un About.aspx pagina con il codice HTML necessario per visualizzare l'intera pagina, non importa se si dice

return PartialView('About');

La vista ancora restituisce il codice HTML che è scritto in esso.

Si dovrebbe creare un separato About.ascx che avrà solo il contenuto della pagina stessa, senza l'intestazione e l'altra roba che fa parte di tutta la pagina.

La pagina originale About.aspx avrà qualcosa di simile a questo nel suo contenuto (per evitare la ripetizione di scrivere lo stesso contenuto due volte):

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

E si possono avere due controller di azioni.Quello che restituisce una visualizzazione normale e uno che restituisce una visione parziale:

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

Per quanto riguarda le rotte Globali.asax

Invece di scrivere percorsi separati per le chiamate Ajax si preferisce scrivere un'azione di filtro che consenta di lavoro simili AcceptVerbsAttribute l'azione di filtro.In questo modo le vostre richieste dal client sarebbe rimasto lo stesso (e quindi di prevenire l'utente manualmente la richiesta di roba sbagliata), ma a seconda del tipo di richiesta corretta azione di controller, dovranno essere eseguite.

Answer 2

Bene, è possibile caricare Vista parziale con richiesta AJAX. Nel esempio, io uso jQuery per effettuare una chiamata AJAX.

Questi potrebbero essere l'azione di controllo (chiamato HomeController):

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

JQuery Ajax Chiama per effettuare la html retured nel luogo che si desidera:

var resultDiv = $('#contentDIV');

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

[edit-domanda è aggiornato]

E 'possibile fare esattamente quello che vuoi. Prima azione di controllo può ridarti la vista parziale, in modo mio "AboutView" avrebbe potuto essere qualcosa di simile:

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

e questo HTML è esattamente ciò che hai intenzione di avere in responseHTML il gestore successo nel metodo jquery ajax.

In secondo luogo, è possibile distinguere in azione di controllo, se la richiesta è una richiesta 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

Abbiamo un sito che fa esattamente questo, e davvero si vuole utilizzare il percorso jQuery qui - molto più facile da implementare nel lungo periodo. E si può facilmente rendere degrada con grazia per gli utenti che non hanno javascript abilitato -. Come Google

Answer 4

non è tutto chiaro che cosa stai chiedendo, è un esempio completo o per alcune funzionalità specifiche? Si dovrebbe essere in grado di fare questo senza JQuery per gli scenari semplici, è possibile utilizzare la vista helper Ajax come il metodo ActionLink. Inoltre, io non capisco qual è il tuo problema con RenderPartial, ma forse siete alla ricerca di qualcosa di simile RenderAction da ASP.NET MVC Futures.

Answer 5

ASP.NET MVC 4 (ora in beta) aggiunge il supporto per singola pagina Applicazioni in MVC.

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

UPDATE: ... e hanno tolto dal MVC 4 RC

UPDATE: ... ed è tornato con l'aggiornamento autunno 2012