How to implement history.js with ASP.NET MVC

Question

Can someone point me in the right direction with the implementation of the History.js project with the MVC project at https://github.com/browserstate/history.js

Im just dealing with MVC and im considering a full Ajax application with Ajax navigation or standard navigation (urls) with content downloaded via Ajax, not sure where to go, but with thanks.

I like MVC, so please forgive me if this is a basic or obvious question.

Answer 1

If you are new to MVC, you can use the library to help you do this. Backbone does this for you in a very simple way, and also supports history through a router.

Answer 2

copy from this link: Make MVC application in SPA with AJAX and History.js (from Edson_Ferreira)

1 ... Start with a layout file. We need to add the following links to our Layout page (_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 .. Create the Controller and its associated views, which we are going to switch to: Here is how the MVC Controller method that returns the view will look like this:

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

The reason we need to specify the dynamic property "ViewBag.IsAjaxRequest = Request.IsAjaxRequest ();" because this information will be used to disable or enable the corresponding layout with the returned view.

Responsibility for management will depend on _ViewStart.cshtml. The file should look like this:

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

This is necessary so that the user can enter the URL in the address bar and not get a PartialView, but instead get the expected full page with the layout applied on top of it.

3 .. Prepare your links for control via AJAX: In the Anchor Element we need to add a class that will be used later to bind the 'Click' event using jQuery. In addition, we need to add the attribute 'data-ref' so that we can save the URL associated with this link.

Since this is an MVC application, we can use the @@ Url.Action helper to help us create the URL; the first parameter is “View” and the second parameter is “Controller”.

Here's how it should look:

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

4. .. Prepare the container into which the views will be inserted. The _Layout.cshtml file should contain the following lines of code:

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

5 .. Create JavaScript to manage navigation and history in 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 .. Add a link to this JavaScript file in the _Layout.cshtml file after the views container:

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

What is it!