Skip to main content

How to load partial view using jquery ajax call in asp.net mvc

Load partial view using jquery ajax call in asp.net MVC

In this post, We will learn loading partial view using jquery ajax call. you can load multiple numbers of partial views using this method.

it will improve the user experience because the components that can be loaded earlier won't be delayed until all the components load. As soon as each control loads, they will be available to the user on the screen.

I have used ASP.NET MVC5 for this article but it does not matter whether you use MVC3 or MVC4 or MVC5. I have created a main View (called here HomePage.cshtml) and created one partial View (_GetUserList.cstml) that will be displayed. So I'll show you how easily we can load this partial view viaAjax. It will make the page more intuitive and seamless to users.

At MainView (UserList.cshtml):

  1. <body>  
  2. <h1>Load Partial View at Parent View</h1>  
  3. <div id="dvPartial">  
  4. </div>  
  5. </body>  

Jquery:
  1. <script src="https://code.jquery.com/jquery-3.5.1.min.js" />

  3. <script>
  4. $.get("/Home/GetUserList",null, function(data){
  5. $("#dvPartial").html(data);
  6. });  
  7. </script>

Controller:
  1. public ActionResult GetUserList(){
  2. List<User> lstUser = db.Users.ToList();
  3. return PartialView("_GetUserList"lstUser);
  4. }

Partial View (_GetUserList.cstml):
  1. @model IEnumerable<MyProject.Models.User>
  2. <body>  
  3. <div>  
  4. <table style="width: 100%%; height: 100%">  
  5. <tr>  
  6. <th>User Name</th>  
  7. <th>Registered Date</th>  
  8. <th>Date Of Birth</th>  
  9. <th>Is Active</th>  
  10. </tr>  
  11. @foreach (var item in Model)  
  12. {  
  13. <tr>  
  14. <td> @item.Name</td>  
  15. <td> @item.RegisteredDate</td>  
  16. <td> @item.DOB</td>  
  17. <td> @item.IsActive</td>  
  18. </tr>  
  19. }  
  20. </table>  
  21. </div>  
  22. </body>  
Labels:

Comments

Post a Comment

Popular posts from this blog

Introduction to ASP.NET, Components and features with brief explanation

What is ASP.NET ASP.NET is a web development platform, which provides a programming model.  ASP.NET  provided by Microsoft . It is used for creating web-based applications.  ASP.NET  was first released in the year 2002. ASP.NET  works on top of the HTTP protocol and uses the HTTP commands and policies to set a browser-to-server bilateral communication and cooperation. The first version of  ASP.NET  deployed was 1.0. The most recent version of  ASP.NET  is version 4.6. ASP.Net is designed to work with the HTTP protocol. This is the standard protocol used across all web applications. It is a comprehensive software infrastructure and various services required to build up robust web applications for PC, as well as mobile devices. ASP.Net applications can also be written in a variety of .Net languages. These include C#, VB.Net, and J#. In this chapter, you will see some basic fundamentals of the .Net framework. ASP.NET is a part of the ...
Post a Comment
Read more

Introduction to .NET Framework and its components

.NET is a developer platform developed by Microsoft and made up of tools, programming languages, and libraries for building many different types of applications.  The first version of the .Net framework was 1.0 which came in the year 2002. the framework has come a long way since then, and the current version is 4.7.1.  In easy words, it is a virtual machine for compiling and executing programs written in different languages like C#, VB.Net, etc. The framework provides language interoperability across several programming languages – each language can use code written in other languages. This framework contains a large number of class libraries known as Framework Class Library (FCL). The software programs written in .NET are executed in the execution environment, which is called CLR (Common Language Runtime). These are the core and essential parts of the .NET framework. .NET Framework supports more than 60 programming languages in which 11 programming languages are designed and ...
Post a Comment
Read more