Как создать одностраничный интерфейс в ASP.NET MVC?

Question

Я хочу создать веб-приложение с "Одностраничным интерфейсом", используя ASP.NET MVC.

Я искал, возможно ли это, по крайней мере, и я думаю, что ответ таков:не простыми средствами (чтение http://msdn.microsoft.com/en-us/magazine/cc507641.aspx#S2 предпоследний абзац;однако эта статья датирована маем 2008 года).

Я нашел другие примеры, которые реализовали это путем кодирования / взлома с помощью jQuery.Тем не менее, я ищу чистое решение, используя стандартные подходы .NET, если это возможно.NET.

Чего я хочу, так это точно такой же функциональности при создании нового "веб-приложения MVC".Однако вместо ссылок на "/Home/ About", которые перезагружают всю страницу, я хочу ссылки на "#Главная / О программе", которая загружает только новую часть через AJAX.

Стандартный подход вызова шаблонов (частичных представлений) с помощью Html.RenderPartial - это именно то, что я хочу, только затем загружая их через AJAX-запросы.

Конечно, может случиться так, что я не смогу использовать эти шаблоны, которые по какой-то причине отображаются главной страницей (возможно, она ожидает, что они всегда будут вызываться в определенном контексте из определенного места или около того).Но, возможно, есть другое чистое решение для создания ваших страниц шаблонов и извлечения их с Главной страницы.

У кого есть хорошее решение для реализации такой вещи, одностраничного интерфейса?

PS:Я разрабатываю в Visual Web Developer 2008 Express Edition с установленным MVC 1.0 на C#

[править] Ниже я прочитал, что работа с шаблонами возможна и что jQuery действительно выглядит неизбежным, поэтому я протестировал его.Следующий код преобразует обычные ссылки, созданные с помощью Html.ActionLink в ссылки-привязки (с #), чтобы содержать историю, а затем извлекает страницу через 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;
    });
});

Эти связи также обеспечивают плавную градацию.

Но то, что у меня осталось сейчас, все еще приносит пользу. весь страница, а не только частичная страница.Изменение контроллера не помогло;он по-прежнему предоставлял мне html всей страницы со всеми этими утверждениями:

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

Как я мог бы вернуть содержимое только той части, которая меня интересует (т. е.содержимое Home/About.aspx)?Что бы я хотел, так это опубликовать значение с помощью AJAX (например"requesttype= ajax"), чтобы мой контроллер знал, что страница извлекается через AJAX, и возвращает только частичную страницу;в противном случае он вернет всю страницу целиком (т. е.когда вы посещаете /Home/About вместо #Home /About).

Возможно, рекомендуется изменить Global.asax.cs, чтобы создать новую схему маршрутизации для AJAX-вызовов, которая будет возвращать только частичные страницы?(Я еще не особо вникал в это.)

[правка2] Роберт Коритник был прав:Мне также нужна была страница 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

Ну, вы можете загрузить Частичный просмотр через 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);
        }
    });

[редактировать-вопрос обновлен]

Можно делать именно то, что вы хотите.Первое действие контроллера может вернуть вам частичный вид, поэтому мой "AboutView" мог бы быть чем-то вроде этого:

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

и этот HTML - это именно то, что вы собираетесь иметь в responseHTML для обработчика успеха в методе 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 view, такие как метод ActionLink.Кроме того, я не совсем понимаю, в чем ваша проблема с RenderPartial, но, возможно, вы ищете что-то вроде RenderAction из ASP.NET MVC Futures.

Answer 5

ASP.NET MVC 4 (сейчас в бета-версии) добавляет поддержку одностраничных приложений в MVC.

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

Обновить:... и они удалили его из MVC 4 RC

Обновить:... и он вернулся с осенним обновлением 2012 года