Home > ASP.NET MVC > ASP.NET # MVC # 11 – Update a particular div asynchronously using Ajax.BeginForm mehod with example

ASP.NET # MVC # 11 – Update a particular div asynchronously using Ajax.BeginForm mehod with example

Hi friends,

Today we will see how to update the content of a particular div in ASP.NET MVC using Ajax.BeginForm method.

Ajax.BeginForm method has 10 overloaded method you can see those overloads on link AjaxExtensions.BeginForm Method .

Now we will see how to update the div content asyncronously..

Example

Let’s take the case where you want to do the simplest operation: update a DIV element on your page with search results when a user clicks the “search” button. You want this form to post asynchronously to the server, and you’re going to take the results, as rendered, and populate a DIV element on the page (let’s call it “results”):

Suppose we have our view as follows , the name of the div to update asynchronously is divToUpdate as follows

 

<%@PageLanguage="C#"MasterPageFile="~/Views/Shared/Site.Master"

Inherits="System.Web.Mvc.ViewPage"%>

<asp:ContentID="Content1"ContentPlaceHolderID="TitleContent"runat="server">
  
Home Page
</asp:Content>
<
asp:ContentID="Content2"ContentPlaceHolderID="MainContent"runat="server">  

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

<%using(Ajax.BeginForm("Save", "Home", newAjaxOptions { UpdateTargetId = "divToUpdate"}))
      {  %>
    Name
    <inputid="txtName1"name="txtName"type="text"value="" />
    <
divid="divToUpdate">
  
<%–render what you want to update here..–%>
    </div>
    <
inputtype="submit"id=’btnSubmit’value="Search" />
  
<% }%>
</asp:Content>

 

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

public class HomeController : Controller
   {
       public ActionResult Index()
       {
           return View();
       }
       //The Save method
       public string Save(string txtName)
       {
           return "You have entered " + txtName;
       }

       public ActionResult About()
       {
           return View();
       }
   }

 

Once you click on the Search button by entering some text in to the input text box you will have output as follows

 

image

 

for more on ASP.NET MVC visit ASP.NET MVC Learning

Thank You.

Advertisements
Categories: ASP.NET MVC
  1. May 7, 2013 at 1:03 am

    I cherished up to you will obtain carried out right here. The comic strip is tasteful, your authored material stylish. nonetheless, you command get got an nervousness over that you would like be delivering the following. ill no doubt come further until now again as precisely the similar just about a lot often inside case you defend this hike.

  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: