Introduction: This is a simple article that provides help with how to do simple AJAX is ASP.NET MVC tools. In this article we have a simple perform the functionality how to get the updated status using AJAX in ASP.NET MVC. AJAX stands for Asynchronous
JavaScript and XML. 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. AJAX is a technique for creating fast and dynamic web pages. AJAX
(Asynchronous Javascript and XML) is like DHTML in that it is a combination of
several existing technologies rather than being a single technology. ASP.NET MVC
application and how this architecture enables you to write good software
applications. We have know that the ASP.NET MVC application and how this
architecture enables you to write good software applications. We have know that
the MVC is the integrated module that provide the tools developed the flexible
and good software.
Step1:
Open Visual Studio 2010.
- Go to file -> New->Projects
- Create an ASP.NET MVC 2 Web
Application
- Name of "Bhanu"
![start.gif]()
![Clipboard04.gif]()
Step2: Open master page and set the
directories.
- Set AJAX directories
- Open Views Folder ->Shared Folder-> mater
page
![master.gif]()
Code:
<%@
Master Language="C#"
Inherits="System.Web.Mvc.ViewMasterPage"
%>
<!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>
<script
src="<%=
Url.Content("~/Scripts/MicrosoftAjax.debug.js")
%>"
type="text/javascript"></script>
<script
src="<%=
Url.Content("~/Scripts/MicrosoftMvcAjax.debug.js")
%>"
type="text/javascript"></script>
<body>
<div
class="page">
<div
id="header">
<div
id="title">
<h1>My
MVC Application</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:
Add a controller.
- Right click on the Controllers folder
->add->Controllers
- Name of Controllers is "Home"
- In a controller, define the request
![addcontroller.gif]()
![contr11.gif]()
Step4: Write the below controller code.
Code:
using
System;
using
System.Collections.Generic;
using
System.Linq;
using
System.Web;
using
System.Web.Mvc;
namespace
Bhanu.Controllers
{
[HandleError]
public class
HomeController :
Controller
{
public
ActionResult Index()
{
ViewData["Message"] =
"Ajax using by manish";
return View();
}
public
ActionResult About()
{
return View();
}
public string
GetStatus()
{
return
"Status OK at " + DateTime.Now.ToLongTimeString();
}
public string
UpdateForm(string textBox1)
{
if (textBox1 !=
"DtataEnter")
{
return
"You entered: \"" + textBox1.ToString() +
"\" at " +
DateTime.Now.ToLongTimeString();
}
return
String.Empty;
}
}
}
Step5:
Add the view.
- The first view is "index"
Step6: Write
the index view code.
![view.gif]()
![viewwww.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><%=
Html.Encode(ViewData["Message"])
%></h2>
<p>
Page Rendered:
<%=
DateTime.Now.ToLongTimeString()
%>
</p>
<span
id="status">No Status</span>
<br
/>
<%=
Ajax.ActionLink("Update",
"GetStatus", new
AjaxOptions{UpdateTargetId="status"
}) %>
<br
/><br
/>
<%
using(Ajax.BeginForm("UpdateForm",
new AjaxOptions{UpdateTargetId="text"}))
{ %>
<%=
Html.TextBox("textBox1","Enter
text")%>
<input
type="submit"
value="Submit"/><br
/>
<span
id="text">There
is no data</span>
<%
} %>
</asp:Content>
Step7: Press crtl+f5 run the application.
Output:
![out.gif]()
![outttttttttt.gif]()