Rendering Partial Views using AJAX

Question

I have a very simple task, I have to render Partial Views on the main Page so that the whole Page is not loaded every time I click a link rather just that particular div or section.

Check this out:

• Link.

When you click a link at the header on the above website, it only loads the particular section not the whole page.

I have tried many solutions on the Internet but I could not make it work.

Solutions I have tried:

• Link
• Link
• Link

Since I can not explain all of them, I am only going to ask about this one:

Link

After reading a lot of tutorials I got the dummy Project to work but its not working in a Project that my team is working on:

1. I added a PartialView in my Home named Partial.

2. I added a Method in my Home Controller:

   public PartialViewResult Test()
   {
       return PartialView();
   }
   

3. I added a button in my Index:

   <input type="submit" id="clik" />
   

4. My JavaScript:

   <script type="text/javascript">
       $('#clik').click(function () {
       $("#s").load("/Home/Test");
       });
   </script>
   

5. I added the following references:

   <script src="../../Scripts/jquery.unobtrusive-ajax.js" type="text/javascript"></script>
   <script src="../../Scripts/jquery-1.7.1.js" type="text/javascript"></script>
   

Screen Shot before I click Submit

Screen Shot after I click Submit

This is working fine on my dummy Project but not on the Project my team is working on, When I try to implement this following the exact same steps written above I am getting the following errors while inspecting the Page through Google Chrome Developer Tools:

GET http://localhost/Employees/Test 404 (Not Found) 
    jquery-1.7.2.min.js:4
        send                        jquery-1.7.2.min.js:4
        f.extend.ajax               jquery-1.7.2.min.js:4
        f.fn.extend.load            jquery-1.7.2.min.js:4
        (anonymous function)        Employees:278
        f.event.dispatch            jquery-1.7.2.min.js:3
        h.handle.i                  jquery-1.7.2.min.js:3

I am a beginner to ASP .Net MVC and I am using ASP .Net MVC 4...

Answer 1

To make things simpler:

1. Create an ajax action link for each of the menu link.
2. Set the UpdateTargetId as the id of div where you want to show your partial view.