1

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:

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:

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

enter image description here

Screen Shot after I click Submit

enter image description here

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...

Community
  • 1
  • 1
Syed Farjad Zia Zaidi
  • 3,302
  • 4
  • 27
  • 50
  • The message suggests the `Test` method in `EmployeesController` does no exist. Check by entering that address in the browser address bar –  Oct 16 '14 at 11:23
  • @StephenMuecke I put the address in the browser and the `Test` method is working fine... Can you think of another problem that might be returning this message? – Syed Farjad Zia Zaidi Oct 17 '14 at 05:22
  • Not sure, but you do have another problem. Your button is `type="submit"` which is going to submit the form. It should be `type="button" or modify your script to `$('#clik').click(function(e) { e.preventDefault(); ....` to stop the form submitting. Note also you refer to both HomeController and EmployeeController (as per the error message) –  Oct 17 '14 at 05:29
  • @StephenMuecke I tried @Venkat's approach and it worked, however I still did not get the above way to work... it did not work even after I modified it to `button` and I am only refering to `EmployeesController`. Here: `$("#change").load("/Employees/Test");` – Syed Farjad Zia Zaidi Oct 17 '14 at 05:53
  • Your question had `$("#s").load("/Home/Test");` so I assume that was just a typo. If it works using an ajax action link then it should work using `.load()` so not sure where the problem is but it definitely cant find `//localhost/Employees/Test` if the error is 404. –  Oct 17 '14 at 06:01

1 Answers1

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.
Syed Farjad Zia Zaidi
  • 3,302
  • 4
  • 27
  • 50
Venkatesh
  • 1,204
  • 1
  • 10
  • 18