Post
Ask Question

Display Partial View and View Using AJAX in MVC

I know this is not an all new topic to write about, many examples and explanations are available in the web. The truth to be told, however, is that just now, one of my friends had trouble displaying a partial view in her application. So, we had a small chat for her issue and finally I showed her a small POC, then thought okay, I have POC and code, why not add a few lines to it to make it an article, maybe it will help someone.

Ok, fine, let's start the topic. We know that in MVC, a view is nothing but a user interface and there is a partial view or page let in MVC. We can map the concept with a master and normal page in a Web Form application.

The question may arise, why a partial view? Let me give a notion where a partial view may be useful. We are trying to build a website where a few things are common in all pages, for example header, footer , menus and much more.

If this is the situation then we can keep the code in a partial view and the great advantage is that, once we change to a partial view, it will affect all pages, no need to change page to page.

So, let's create one simple MVC application and try to return a partial from controller and display it using jQuery AJAX.

Here is our small controller class.

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Diagnostics;  
  4. using System.Linq;  
  5. using System.Web;  
  6. using System.Web.Mvc;  
  7. using MVC_5.App_Data;  
  8. namespace MVC_5.Controllers  
  9. {  
  10.     public class testController : Controller  
  11.     {  
  12.         public ActionResult testPartial()  
  13.         {  
  14.             return PartialView("myPartial");  
  15.         }  
  16.     }  
  17. } 

The controller class is just a stub and not doing anything great. It contains a testPartial() function that will return a partial view as a result. Now, let's add one partial view to the testPartial() action.

partial view

Have a look at the view name, it is kept as “myPartial” and the checkbox is checked to make the view a partial view.

Fine, now we will write a few lines of HTML code in our partial view, just for demonstration purposes. Here it is.

HTML

Fine, nothing is there except a paragraph tag, but in a real scenario you might use much more original stuff. We will now implement the client page that will call the controller using the jQuery ajax function. Have a look at the following code.

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="test.aspx.cs" Inherits="MVC_5.test" %>  
  2. <head runat="server">  
  3.     <script src="Scripts/jquery-1.10.2.min.js"></script>  
  4.     <script>  
  5.         $(document).ready(function () {  
  6.             $.ajax({  
  7.                 url: "/test/testPartial",  
  8.                 success: function (result) {  
  9.                     alert(result);  
  10.                 }  
  11.             });  
  12.         });  
  13.     </script>  
  14. </head>  
  15. <body>  
  16. </body>  
  17. </html> 
Again , it's very simple, we re just pointing to the action located within the test controller and when we run the application, we will find the following output.
 
run the application

We see that the output has come in the success callback of the ajax() function.

Want to make it simpler?

Ok, let's use the load() function of jQuery and I hope this is the perfect and best way to load a partial view, using ajax(). We have replaced the ajax() function with the loadfunction.
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="test.aspx.cs" Inherits="MVC_5.test" %>  
  2. <head runat="server">  
  3.     <script src="Scripts/jquery-1.10.2.min.js"></script>  
  4.     <script>  
  5.         $(document).ready(function () {  
  6.             $('#partial-load').load('/test/testPartial');  
  7.         });  
  8.     </script>  
  9. </head>  
  10. <body>  
  11.     <div id="partial-load"></div>  
  12. </body>  
  13. </html>
And please note that we have added one div to the body. So, when the output comes, it will attach to the div tag. Here is the output.

output
Conclusion

Though this idea is very simple, it can work great with a real project application. I hope you have learned and will implement it very soon. Happy learning.


Similar Articles