How do you create a single page interface in ASP.NET MVC?

Question

I want to create a web application using the "Single Page Interface" using ASP.NET MVC.

I searched if it was at least possible, and I think the answer is: not in an easy way (reading http://msdn.microsoft.com/en-us/magazine/cc507641.aspx#S2 second- the last paragraph, however this article is from May 2008).

I found other examples that implemented this by encoding / hacking using jQuery. However, I am looking for a clean solution using standard .NET approaches, if possible.

What I want is exactly the same functionality when you create a new “MVC web application”. However, instead of links to "/ Home / About", which reloads the entire page, I need links to " # Home / About", which downloads only the new part via AJAX.

The standard approach for calling templates (partial views) using Html.RenderPartial is exactly what I want, only then loading them through AJAX requests.

Of course, it is possible that I cannot use these templates, which for some reason are visualized by the master page (perhaps he expects that he will always be called in a certain context from a certain place or so). But maybe there is another clean decision on how to create template pages and extract them from the main page.

Who has a good solution to implement such a thing, a single page interface?

PS: I am developing in Visual Web Developer 2008 Express Edition with MVC 1.0 installed, in C #

[] , , jQuery , . , Html.ActionLink, anchor-links (with #), , AJAX html ( div # PartialView):

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

.

whole, . ; html :

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

, (.. Home/About.aspx)? , POSTing AJAX (, "requesttype = ajax" ), , AJAX ; (.. //, # / ).

Global.asax.cs, , AJAX-, ? ( .)

[edit2] : About.ascx(UserControl) HTML- . About.aspx MasterPageFile="~/..../Site.master", HTML.

:

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

PartialView (.ascx) View (.aspx), (About.aspx, ). Global.asax.cs PartialView() 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

, - . About.aspx HTML, , ,

return PartialView('About');

HTML.

About.ascx, , .

About.aspx - ( ):

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

. , , :

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

Global.asax

, Ajax, , , AcceptVerbsAttribute . , (, , ), .

Answer 2

, Partial View AJAX. jquery ajax.

( HomeController):

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

JQuery ajax- html :

var resultDiv = $('#contentDIV');

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

[edit-question ]

, . , "AboutView" :

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

HTML - , HTML jQuery ajax-.

-, , 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

, , jQuery - . , javascript, - , google.

Answer 4

, , ? JQuery , Ajax, ActionLink. , , RenderPartial, , , - RenderAction ASP.NET MVC Futures.

Answer 5

ASP.NET MVC 4 ( -) Single Pages MVC.

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

UPDATE: ... MVC 4 RC

UPDATE: ... 2012