What is Ajax and How
to implement Server side Ajax concept in Mvc 4.0
AJAX Short for
for Asynchronous JavaScript and XML. AJAX is a new technique for creating better, faster, and
more interactive web applications with the help of XML, HTML, CSS, and Java
Script.
Type
of Ajax
1.
Client
Side
2.
Server Side
Advantages
& Disadvantages of Using Ajax………………………
Advantages
1. Reduce the traffic travels
between the client and the server.
2. Response time is faster so
increases performance and speed.
3. You can use JSON (JavaScript
Object Notation) which is alternative to XML. JSON is
key value pair and works like an array.
4. You can use Firefox browser with
an add-on called as Firebug to debug all Ajax calls.
5. Ready Open source JavaScript
libraries available for use – JQuery, Prototype, Scriptaculous, etc.
6. AJAX communicates over HTTP Protocol.
Disadvantages
1.
Using Ajax to asynchronously load bits of data into the existing
page conflicts the way the users are used to viewing, navigating and creating
bookmarks in a modern browser.
2.
Ajax application development may lead to increase in development
time and cost.
3.
The biggest concern is accessibility because all browsers do not
completely support Javascript and xmlHttpRequest object.
-- Sql
Query................
use test
create table Employee
(
EmpId int primary key,
Name varchar(50),
Salary int
)
sp_help Employee
Step
1 : we will take
MvcApplication which name MvcAjaxConcept and select basic option because when
you take basic option by default
all important file of jquery is available
in your application
Step
2: add Controller which name Home Controller in our Application then we add View with
particular Index
Source Code for Index.cshtml
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<div>
@using
(Html.BeginForm())
{
<table width="50%">
<tr><td colspan="2"><p style="color:red;font-family:Verdana;font-size:14px">using Ajax in Mvc</p></td></tr>
<tr><td>EmpId</td><td>@Html.TextBox("EmpId")</td></tr>
<tr><td>Name</td><td>@Html.TextBox("Name")</td></tr>
<tr><td>Salary</td><td>@Html.TextBox("Salary")</td></tr>
<tr><td><input type="submit" value="Save" /></td><td>@ViewBag.msg</td></tr>
<tr><td colspan="2" ><p>@DateTime.Now</p> </td></tr>
</table>
}
</div>
</body>
</html>
Code
for HomeController…………………………………………..
using System;
using System.Web.Mvc;
// using namespace
using
MvcAjaxConcept.Models;
namespace
MvcAjaxConcept.Controllers
{
public class HomeController : Controller
{
// create instance of
Entities
testEntities tt=new testEntities();
public ActionResult Index()
{
return View();
}
[HttpPost]
public ActionResult Index(Employee entity)
{
try
{
tt.Employees.Add(entity);
tt.SaveChanges();
ViewBag.msg = "Data Save
successfully";
}
catch(Exception ex)
{
ViewBag.msg = ex.Message;
}
return View();
}
}
}
Result
Note:
In above code when we are using @using (Html.BeginForm()) and after click and save
button my whole page is post
back but
it is not
good for my application
so now
we will implement Ajax concept in our Application,
When you have to use in ajax then please attention
these two files is very important implement in your application. And both those files are available in script
folder when you using MVC application with visual studio 2012 or 2013
Source Code for Index.cshtml
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<script src="~/Scripts/jquery-1.7.1.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
<script type="text/javascript">
function result(data)
{
alert(data);
}
</script>
<title>Index</title>
</head>
<body>
<div>
@* @using (Ajax.BeginForm(new
AjaxOptions())) { *@
@* @using (Ajax.BeginForm(new
AjaxOptions{OnSuccess="result",OnFailure="result"})){*@
@* @using (Ajax.BeginForm(new
AjaxOptions{UpdateTargetId="msg"})){ *@
@* @using(Ajax.BeginForm(new
AjaxOptions{UpdateTargetId="msg",
LoadingElementId="loader"}))
{
*@
@using(Ajax.BeginForm(new AjaxOptions{UpdateTargetId="msg", LoadingElementId="loader",InsertionMode=InsertionMode.InsertAfter }))
{<table width="50%">
<tr><td colspan="2"><p style="color:red;font-family:Verdana;font-size:14px">using Ajax in Mvc</p></td></tr>
<tr><td colspan="2">
@* <img id="imgloader"
src="~/Image/download.png" width="100px"
height="50px" style="display:none" />*@
@* <div id="loader"
style="display:none;height:50px;width:300px;position:fixed;top:0px;left:0px;z-index:1000;background-color:red;opacity:0.5">loading
......</div>*@
<div id="loader" style="display:none">loading ......</div>
</td></tr>
<tr><td>EmpId</td><td>@Html.TextBox("EmpId")</td></tr>
<tr><td>Name</td><td>@Html.TextBox("Name")</td></tr>
<tr><td>Salary</td><td>@Html.TextBox("Salary")</td></tr>
<tr><td><input type="submit" value="Save" /></td><td><p>@DateTime.Now</p></td></tr>
<tr><td colspan="2" > <p id="msg"></p></td></tr>
</table>
}
</div>
</body>
</html>
Code
for HomeController………………………………
using System;
using System.Web.Mvc;
// using namespace
using
MvcAjaxConcept.Models;
namespace
MvcAjaxConcept.Controllers
{
public class HomeController : Controller
{
//
// GET: /Home/
testEntities tt=new testEntities();
public ActionResult Index()
{
return View();
}
[HttpPost]
public string Index(Employee entity)
{
System.Threading.Thread.Sleep(2000);
try
{
tt.Employees.Add(entity);
tt.SaveChanges();
return "Data Save
successfully";
}
catch(Exception ex)
{
return
ex.Message.ToString();
}
}
}
}
Result
0 comments:
Post a Comment