Introduction: In this application we using AJAX in ASP.NET MVC. AJAX stands for "Asynchronous JavaScript and XML." AJAX is a technique for creating fast and dynamic web pages. Now in this application we developed the Updated status Information using ASP.NET MVC. An XMLHttpRequest object is used to to exchange data asynchronously with a server. JavaScript/DOM to display and interact with the information. AJAX allows web pages to be updated asynchronously by exchanging small amounts of data with the server behind the scenes. This means that it is possible to update parts of a web page, without reloading the whole page. CSS is used to set style the data and last XML is used as the format for transferring data. Now we know that ASP.NET MVC framework was designed to enable you to write good software applications.

Step1: Open Visual Studio 2010.

start.gif

Step2: First we open site.master page.

addsite.gif

Code:

<%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %>
<script src="<%= Url.Content("~/Scripts/MicrosoftAjax.debug.js") %>"
type="text/javascript"></script>
<script src="<%= Url.Content("~/Scripts/MicrosoftMvcAjax.debug.js") %>"
type="text/javascript"></script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
 <title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
 <link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
</head>
<body>
 <div class="page">
 <div id="header">
 <div id="title">
 <h1>Ajax using by manish</h1>
 </div>
 <div id="logindisplay">
 <% Html.RenderPartial("LogOnUserControl"); %>
 </div>
<div id="menucontainer">
 <ul id="menu">
<li><%: Html.ActionLink("Home", "Index", "Home")%></li>
 <li><%: Html.ActionLink("About", "About", "Home")%></li>
 </ul>
 </div>
 </div>
 <div id="main">
 <asp:ContentPlaceHolder ID="MainContent" runat="server" />
 <div id="footer">
 </div>
 </div>
 </div>
</body>
</html>

Step3: Second we open the Homecontroller.

addcont5roller.gif

Code:

 using System;
 using System.Collections.Generic;
 using System.Linq;
 using System.Web;
 using System.Web.Mvc;
 using MvcAjaxApplication.Models;
 namespace MvcAjaxApplication.Controllers
{
[HandleError]
public class HomeController : Controller
 {
public string GetStatus()
{
return "yes " + DateTime.Now.ToLongTimeString();
}
public string UpdateForm(string TextBox1)
{
if (TextBox1 != "Plese text Enter")
{
return "Youe Feedback: \"" + TextBox1.ToString() + "\" at " +
DateTime.Now.ToLongTimeString();
}
return String.Empty;
}
public ActionResult Index()
{
ViewData["Message"] = "This is Manish application!";
return View();
}
public ActionResult About()
{
return View();
}
}
}

Step4:Open the index view.

addview.gif

Code:

 <%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>
 <asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
 Home Page
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
 <h2 style="background-color: #FF80C0"><%= Html.Encode(ViewData["Message"]) %></h2>
 <p style="background-color: #FF8080">
 Data of Page: <%= DateTime.Now.ToLongTimeString() %>
 </p>
<span id="status" style="background-color: #00CC66">No any Data</span>
 <br />
<%= Ajax.ActionLink("Update Status", "GetStatus", new AjaxOptions{UpdateTargetId="status" }) %>
 <br /><br />
 <% using(Ajax.BeginForm("UpdateForm", new AjaxOptions{UpdateTargetId="textEntered"})) { %>
 <%= Html.TextBox("textBox1","Enter text")%>
<input type="submit" value="Login" style="background-color: #00FFFF" /><br />
 <span id="textEntered" style="background-color: #FFFF00">Nothing Entered</span>
 <% } %>
 </asp:Content>

Step5: The complete application

completeapplication.gif

Step6: Press crtl+f5 to run the program

Output:

out.gif