Как реализовать history.js с ASP.NET MVC - PullRequest
Новая
       23

Как реализовать history.js с ASP.NET MVC

4 голосов
/ 12 января 2012

Может ли кто-нибудь указать мне правильное направление с реализацией истории History.js с проектом MVC на https://github.com/browserstate/history.js

Я только начинаю работать с MVC, и я рассматриваю полноценное Ajax-приложение с Ajax nav или стандартным nav (urls) с контентом, загруженным через Ajax, не знаю, какой путь выбрать, но помощь приветствуется.

Я новичок в MVC, так что, пожалуйста, прости меня, если это простой или очевидный вопрос

Ответы [ 2 ]

1 голос
/ 02 января 2016

копия по этой ссылке: Создание приложения MVC в SPA с AJAX и History.js (из Edson_Ferreira)

1 .. Давайте начнем сФайл макета.Нам нужно добавить следующие ссылки на нашу страницу макета (_Layout.cshtml): 

<script src="~/Scripts/jquery-2.1.0.js "></script>
<script src="~/Scripts/jquery.history.js"></script>
<script src="~/Scripts/jquery.showLoading.js"></script>

2 .. Создать контроллер (ы) и связанные представлениячто мы собираемся перейти к: Вот как будет выглядеть метод MVC Controller, который возвращает представление: 

public ActionResult Rating()
{
    ViewBag.IsAjaxRequest = Request.IsAjaxRequest();
    return View();
}

Причина, по которой нам нужно указать динамическое свойство "ViewBag.IsAjaxRequest = Request.IsAjaxRequest (); "это потому, что эта информация будет использоваться для отключения или включения связанного макета с возвращаемым представлением.

За управление этим будет отвечать _ViewStart.cshtml.Файл должен выглядеть следующим образом: 

@{
    if (ViewContext.ViewBag.IsAjaxRequest == true)
    {
        Layout = null;
    }
    else
    {
        Layout = "~/Views/Shared/_Layout.cshtml";    
    }    
}

Это необходимо для того, чтобы пользователь мог вводить URL-адрес в адресной строке и не получать PartialView, а вместо этого получать ожидаемое полноестраница с макетом, нанесенным поверх него.

3 .. Подготовьте ваши ссылки для управления через AJAX: В элементе привязки нам нужно добавить класс, который будет использоваться позжесвязать событие «Click» с помощью jQuery.Кроме того, нам нужно добавить атрибут «data-ref», чтобы мы могли хранить URL-адрес, связанный с этой ссылкой.

Поскольку это приложение MVC, мы можем использовать помощник '@ Url.Action', чтобы помочьмы в создании URL;1-й параметр - это «Вид», а 2-й - «Контроллер».

Вот так он должен выглядеть: 

<a href="#" class="ajaxLink" data-href="@Url.Action("Rating", "Visualisation")" data-title="Rating">Rating</a>

4.. Подготовьте контейнер, в который будут вставлены виды.Файл _Layout.cshtml должен содержать следующие строки кода: 

<div id="bodyContent">
     @RenderBody()
</div>

5 .. Создать JavaScript, отвечающий за навигацию и историю на основе AJAXуправление состоянием: 

$(function () {

    var contentShell = $('#bodyContent');
    var History = window.History, State = History.getState();       

    $(".ajaxLink").on('click', function (e) {        
        e.preventDefault();        
        var url = $(this).data('href');
        var title = $(this).data('title');
        History.pushState(null, title, url);
    });

    History.Adapter.bind(window, 'statechange', function () {
        State = History.getState();
        if (State.url === '') {
            return;
        }
        navigateToURL(State.url);
    });

    function navigateToURL(url) {        
        $('#bodyContent').showLoading();
        $.ajax({
            type: "GET",
            url: url,
            dataType: "html",
            success: function (data, status, xhr) {
                contentShell.hideLoading();
                $('#bodyContent').hide();
                contentShell.html(data);                
                $('#bodyContent').fadeIn(1000);                
            },
            error: function (xhr, status, error) {
                contentShell.hideLoading();
                alert("Error loading Page.");
            }
        });
    }
}

6 .. Добавьте ссылку на этот файл JavaScript в файле _Layout.cshtml после контейнера представлений: 

<div id="bodyContent">
    @RenderBody()
</div>
@RenderSection("scripts", required: false)
<script src="~/Scripts/App_Scripts/Layout.js"></script>

Вот и все!

1 голос
/ 08 февраля 2012

Если вы новичок в MVC, вы также можете использовать библиотеку, чтобы помочь вам сделать это. Backbone делает это для вас очень чисто, а также поддерживает историю через свой маршрутизатор.

...