Creating a fully ajax based website with ASP.NET MVC

Question

What I'm planning is creating a website that is based fully ajax requests. But there are some questions in my mind,

1- Should I use a javascript routing engine, library ext.? Do I really need it? Because the website I'm working on is very large and will surely grow up.

2- I will just load every page content via ajax, but I won't use JSON , I'm planning to use PartialViews is that OK?

3-

  <script type="text/javascript">
       $("a.ajax").click(function() {
           $(".placeholder").load(this.href);
           return false;
       });

   </script>
   <a class="ajax" href="/Home/Products/2">Products</a>
   <div class="placeholder"></div>

This is the simple code of my process, the problem is here history, when user wants get back, it will fail. How can I achieve this problem?

Answer 1

1- Should I use a javascript routing engine, library ext.? Do I really need it? Because the website I'm working on is very large and will surely grow up.

If you have lots of logic on the client you might consider using some MVVM javascript framework. KnockoutJS and AngularJS are some popular choices.

2- I will just load every page content via ajax, but I won't use JSON, I'm planning to use PartialViews is that OK?

You could use the HTML5 History API which would allow you to add entries to the browser history everytime you make an AJAX request.

Here's an example:

$("a.ajax").click(function() {
    var href = this.href;
    var title = $(this).text();
    $(".placeholder").load(href, function() {
        // Add an entry in the browser history
        history.pushState(null, title, href);
    });
    return false;
});

Answer 2

Try to look on angularjs. AngularJs + asp.net web api will be the good approach

Answer 3

answer q1 : it is better to use some mvvm frameworks like angular.js but also you can handle everything yourself , ofcourse if you want to handle such things you must code much more ! answer q2: it is ok ,simply call an action method via ajax call and in action method render a partialview and in your success function update anywhere you want , I am using this method too :)