Using AJAX show the heating time in ASP.NET MVC

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"

Step2: Open master page and set the directories.

Set AJAX directories
Open Views Folder ->Shared Folder-> mater page

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

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.

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: