Home > ASP.NET MVC > ASP.NET # MVC # 12 – Render Partial Views (.ascx) on parent View(.aspx) asynchronously , using Ajax with example.

ASP.NET # MVC # 12 – Render Partial Views (.ascx) on parent View(.aspx) asynchronously , using Ajax with example.

Hi Geeks,

In our last post UpdateDivUsingAjax we saw how to update the div asynchronously using Ajax.BeginForm Method.

Today We will see how to render partial view asynchronously using Ajax.

Example :

Let’s take the case where you want to do the simplest operation:

Filter the list of employees in the table on your page when a user gives input name and  clicks the “search” button , we want this form to post asynchronously to the server, and we will able to see the filtered list/result.

I) We have our main view as follows :-

The view is strongly typed with model TestModel

public class TestModel
   {
       public List<Employee_Details> lstEmployee { get; set; }
   }

In the following view we have put the partial view inside the div “divToUpdate” which will asynchronously render using Ajax.BeginForm Method .

For more on Ajax.BeginForm Method visit Ajax.BeginMethod

<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<AJAXDiv.Models.TestModel>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">

   
Home Page

</asp:Content>

<
asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

    <
script src="../../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>

    <
script src="../../Scripts/MicrosoftAjax.js" type="text/javascript"></script>

    <
script src="../../Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>

   
<%using (Ajax.BeginForm("Search", "Home", new AjaxOptions { HttpMethod = "Post", UpdateTargetId = "divToUpdate" }))

      {  %>

    Name

    <input id="txtName1" name="EmployeeName" type="text" value="" />

    <
br />

    <
br />

  

<div id="divToUpdate">

       
<%–render what you want to update here..—%> 

<%Html.RenderPartial("~/Views/Home/About.ascx", Model); %>

<div />

    <br />

    <
input type="submit" id=’btnSubmit’ value="Search" />

   
<% }%>

</asp:Content>

Note :- we have given path of the partial view as"~/Views/Home/About.ascx"

because it is on that path.so you can put the path of the view overhere

For more on RenderPartial Method visit  RenderPartial MSDN

The method Ajax.Begin form will call the method “Search” on controller “Home” once the form is posted to the server.

II)  We have partial view “about.ascx” as follows.

The Partial view is also strongly type with TestModel

<%@ Control Language="C#"  Inherits="System.Web.Mvc.ViewUserControl<AJAXDiv.Models.TestModel>" %>

     
    <% if (Model.lstEmployee != null)

       {  %>

    <%foreach (var emp in Model.lstEmployee)

      {%>

    <table>

        <
tr>

            <
td>

               
<%:Html.Encode(emp.Emp_Number) %>

            </td>

            <
td>

               
<%:Html.Encode(emp.First_Name) %>

            </td>

        </
tr>

    </
table>

   
<%} %>

    <%} %>

III) The code to write on controller is as follows

public class HomeController : Controller

{

     public ActionResult Index()

     {

        
         AllInMvcEntities Entity = new AllInMvcEntities();

         TestModel model = new TestModel();

         model.lstEmployee = (from emp in Entity.Employee_Details select emp).Take(5).ToList<Employee_Details>();

         return View(model);

     }

  

     public ActionResult Search(string EmployeeName)

     {

         AllInMvcEntities Entity = new AllInMvcEntities();

         TestModel model = new TestModel();

         model.lstEmployee = (from emp in Entity.Employee_Details where emp.First_Name == EmployeeName select emp).Take(5).ToList<Employee_Details>();

                          
         return PartialView("~/Views/Home/About.ascx", model);

       
    
     }

}

once you execute all the code we will have our first view / Output as follows

 

image

when you enter the name and click on Search button the Search(string EmployeeName)

method of the controller .

The search method is returning the partial view about.ascx .so when we return this method the table on the partial view will be filtered and we will have output as follows

image

Advertisements
Categories: ASP.NET MVC
  1. January 12, 2012 at 3:47 pm

    Hi,
    I tried this and the index.aspx view (the textbox field) disappears after i click the search button.what i am able to see is just the result. Can you plz help me out.
    Thanks in advance.

  2. January 12, 2012 at 4:14 pm

    @ Nil286 hey i m not getting where are you going wrong, because ajax will render only divToUpdate as this control is updateTargetId for the ajax form,i think you may have taken TextBox inside updateTargetID.

  3. January 12, 2012 at 4:31 pm

    Thanks Ganesh for the instant reply and taking out time to help me out. Yes it should work but i don’t know where i am going wrong. i would like to share this Test application with you, so that you will be in a better position to check , can u send me a mail on email id nil5286@rediffmail.com. I will appreciate it.

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: