Using AJAX to developed simple application in ASP.NET MVC

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.

Go to file -> New->Projects

Create an ASP.NET MVC 2 Web Application

The name of the application is "Manishapplication"

Step2: First we open site.master page.

Open Views Folder-> Shared Folder->Site.master page

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.

Open the controller Folder->Homecontroller.controller

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.

Open the Views Folder->Home Folder->Click index.aspx page

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

Step6: Press crtl+f5 to run the program

Output: