Wie erstellt man eine einzelne Seitenschnittstelle in ASP.NET MVC?

Question

Ich möchte eine Webapplication mit einer "Single -Page -Schnittstelle" mit ASP.NET MVC erstellen.

Ich habe gesucht, ob dies zumindest möglich war und ich denke, die Antwort lautet: nicht mit einfachen Mitteln (Lesen http://msdn.microsoft.com/en-us/magazine/cc507641.aspx#s2 zweitletzter Absatz; Dieser Artikel ist jedoch aus Mai 2008).

Ich habe andere Beispiele gefunden, die dies durch Codieren/Hacken mit JQuery implementierten. Ich suche jedoch nach einer sauberen Lösung, die nach Möglichkeit Standard -NET -Ansätze verwende.

Was ich möchte, ist genau die gleiche Funktionalität, wenn Sie eine neue "MVC -Webanwendung" erstellen. Anstatt jedoch Links zu "/home/über", die die gesamte Seite neu laden, möchte ich Links ".#Home/über ", der nur den neuen Teil über Ajax lädt.

Der Standardansatz beim Aufrufen von Vorlagen (teilweise Ansichten) mit html.renderPartial ist genau das, was ich möchte, nur dann eingeladen wird, wenn sie durch Ajax-Requests eingeladen werden.

Natürlich kann es sein, dass ich nicht benutzen kann diese Vorlagen, die aus irgendeinem Grund von der Master-Seite gerendert werden (vielleicht erwartet es, immer in einem bestimmten Kontext von einem bestimmten Ort oder so aufgerufen zu werden). Aber vielleicht gibt es eine weitere saubere Lösung, wie Sie Ihre Vorlagenseiten erstellen und von der Master-Seite abrufen können.

Wer hat eine schöne Lösung für die Implementierung von so etwas, eine einzelne Seitenoberfläche?

PS: Ich entwickle mich in Visual Web Developer 2008 Express Edition mit MVC 1.0 in C# ein

bearbeitenIm Folgenden habe ich gelesen, dass die Arbeit mit den Vorlagen möglich ist und dass JQuery in der Tat unvermeidlich aussieht, also habe ich es getestet. Der folgende Code verwandelt regelmäßige Links, die von html.actionlink erstellt wurden, in Ankerlinks (mit #), um die Geschichte zu enthalten, und holen die Seite über AJAX und injizieren nur den HTML-Teil, an dem ich interessiert bin (dh die Teilseite in Div # Teilansicht):

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

Diese Links ermöglichen auch eine anmutige Degredierung.

Aber was ich jetzt gegangen bin, holt immer noch die ganz Seite statt der Teilseite. Die Änderung des Controllers half nicht; Es gab mir immer noch HTML der gesamten Seite mit all diesen Aussagen:

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

Wie könnte ich nur den Inhalt des Teils zurückgeben, an dem ich interessiert bin (dh der Inhalt von zu Hause/über.aspx)? Was ich gerne mit AJAX (z. B. "RequestType = ajax") veröffentlichen würde, so dass mein Controller weiß, dass die Seite über AJAX abgerufen wird und nur die Teilseite zurückgibt. Andernfalls wird die gesamte Seite zurückgegeben (dh wenn Sie besuchen/zu Hause/über #zu Hause/über).

Ist eine gute Praxis, um global.asax.cs zu verändern, um ein neues Routing-Schema für Ajax-Calls zu erstellen, das nur Teilseiten zurückgibt? (Ich habe noch nicht so viel untersucht.)

edit2Robert Koritnik hatte Recht: Ich brauchte auch eine About.ascx-Seite (UserControl) mit nur dem kleinen HTML-Inhalt dieser Seite. Die erste Zeile von caN.aspx wurde mit der Master-Seite über verbunden MasterPageFile="~/..../Site.master" was verursachte, dass alle HTML gedruckt wurden.

Aber in meinem Controller Folgendes ausführen zu können:

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

Ich musste die Art und Weise verändern, wie a PartialView (.ascx Datei) und a View (.aspx) Datei wurde gefunden, sonst würden beide Methoden dieselbe Seite zurückgeben (About.aspx, letztendlich zu einer unendlichen Schleife). Nachdem Sie Folgendes eingesetzt haben Global.asax.cs, Die richtigen Seiten werden mit zurückgegeben PartialView() und 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

Volle Ansicht vs. Teilansicht

Scheint, als hättest du etwas durcheinander gebracht. Wenn Sie eine erstellen About.aspx Seite mit all den HTML, die erforderlich sind, um die gesamte Seite anzuzeigen

return PartialView('About');

Die Ansicht gibt immer noch alle HTML zurück, die darin geschrieben sind.

Sie sollten eine separate Erstellung erstellen About.ascx Das wird nur den Inhalt der Seite selbst ohne den Header und andere Dinge haben, die Teil der gesamten Seite sind.

Ihre Originalseite About.aspx Wird so etwas in seinem Inhalt haben (um das Wiederholen von zweimal denselben Inhalt zu vermeiden):

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

Und Sie können zwei Controller -Aktionen haben. Eine, die eine reguläre Ansicht zurückgibt und eine, die eine teilweise Ansicht zurückgibt:

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

In Bezug auf Routen in Global.asax

Anstatt separate Routen für Ajax -Anrufe zu schreiben, schreiben Sie lieber einen Aktionsfilter, der ähnlich funktioniert wie AcceptVerbsAttribute Aktionsfilter. Auf diese Weise bleiben Ihre Anfragen vom Kunden gleich (und verhindern, dass der Benutzer manuell falsche Dinge anfordert). Abhängig vom Anforderungsart wird die richtige Controller -Aktion ausgeführt.

Answer 2

Nun, Sie können eine Teilansicht über Ajax -Anfrage laden. In Beispiel werde ich JQuery verwenden, um einen Ajax -Anruf zu tätigen.

Dies könnte die Aktion im Controller (benannt Homecontroller) sein:

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

JQuery Ajax Call, um die returierte HTML zu platzieren, die Sie möchten:

var resultDiv = $('#contentDIV');

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

Bearbeiten-Frage wird aktualisiert

Es ist möglich, genau das zu tun, was Sie wollen. First Controller -Aktion kann Ihnen die teilweise Ansicht zurückgeben, sodass mein "appeview" so etwas gewesen sein könnte:

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

Und diese HTML ist genau das, was Sie als ResponseHTML bei Success Handler in der Jquery Ajax -Methode haben werden.

Zweitens können Sie in der Controller -Aktion unterscheiden, wenn die Anfrage eine AJAX -Anfrage ist:

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

Wir haben eine Site, die genau das macht, und Sie möchten hier die JQuery-Route wirklich nutzen-auf lange Sicht einfacher zu implementieren. Und Sie können es leicht für Benutzer, die JavaScript nicht aktiviert haben, anmutig abbauen-wie Google.

Answer 4

Es ist nicht so klar, wonach Sie fragen, ist es für ein vollständiges Beispiel oder für bestimmte Funktionen? Sie sollten in der Lage sein, dies ohne JQuery für einfache Szenarien zu tun. Sie können die AJAX -View -Helfer wie die ActionLink -Methode verwenden. Außerdem verstehe ich nicht wirklich, was Ihr Problem mit RenderPartial ist, aber vielleicht suchen Sie nach einer Renderaktion von ASP.NET MVC -Futures.

Answer 5

ASP.NET MVC 4 (jetzt in Beta) fügt Unterstützung für einseitige Anwendungen in MVC hinzu.

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

Update: ... und sie haben es aus dem MVC 4 RC entfernt

Update: ... und es ist wieder mit dem Herbst -Update 2012 zurück