How to use $.post , $.getJSON , $.ajax in Asp.Net MVC
---Sql query
create table Student
(
RollNo int primary key,
Name varchar(50) not null,
Gender varchar(50) not null,
Course varchar(50)
)
create table Course
(
CourseId int primary key,
CourseName varchar(50) not null
)
--**************************----
Note : Here
we will discuss $.post method and
$.getJson method in Mvc
We will create Controller which name
Home in MVC Application ……………………..
Code for
HomeController.cs……………………………………
using System;
using
System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using
AjaxMethodInMvc.Models;
namespace
AjaxMethodInMvc.Controllers
{
public class HomeController : Controller
{
//
// GET: /Home/
testEntities database = new testEntities();
[HttpGet]
public ActionResult Index()
{
//ViewBag.Course = (from m in
database.Courses select new SelectListItem { Text = m.CourseName, Value = m.CourseId.ToString()
}).ToList();
ViewBag.Course = new SelectList(database.Courses, "CourseId", "CourseName", "Select");
return View();
}
[HttpPost]
public JsonResult Save(string _RollNo,string _Name,string _Gender,string _Course)
{
try
{
if (string.IsNullOrEmpty(_RollNo))
{
throw new Exception("Please enter
RollNo");
}
Student ss = new Student
{
RollNo=Convert.ToInt32(_RollNo),
Name=_Name,
Gender=_Gender,
Course=_Course
};
database.Students.Add(ss);
database.SaveChanges();
return this.Json(new { result = true, msg = "data
save"
});
}
catch (Exception ex)
{
return this.Json(new { result = false, msg = ex.Message
});
}
}
[HttpGet]
public JsonResult GetList(string name)
{
System.Threading.Thread.Sleep(2000);
return this.Json(this.database.Students.Where(obj
=> obj.Name.StartsWith(name)).ToList(), JsonRequestBehavior.AllowGet);
}
}
}
Code
for Index.cshtml……………………………………
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script src="~/Scripts/jquery-1.7.1.min.js"></script>
<script src="~/Scripts/jquery-1.7.1.intellisense.js"></script>
<script type="text/javascript">
$(function ()
{
/**************************
start code**************/
$(':button').click(function ()
{
//alert($("input[name=Gender]:checked").val());
// var v = $("#Course
option:selected").text();
var v = { _RollNo: $('#RollNo').val(), _Name: $('#Name').val(), _Gender: $("input[name=Gender]:checked").val(), _Course: $("#Course
option:selected").text()
};
$.post("home/save", v, function (data) {
$('#msg').html(data.msg);
$('#msg').slideDown(1000).delay(2000).fadeOut(1000,
function () {
if (data.result) {
$('#RollNo').val("").focus();
$('#Name').val("");
}
});
});
});
/************** end code
*******************/
/**************************
start code**************/
$('#name').keyup(function ()
{
var v = $(this).val();
var data = null;
if (v.length >= 2)
{
$('#loader').show();
$.getJSON("home/GetList/?name=" + v, null, function (data) {
$('#loader').hide();
$('#table1').html("");
$.each(data, function (i, d)
{
data += "<tr><td>" + d.RollNo + "</td><td>" + d.Name + "</td><td>" + d.Gender + "</td><td>" + d.Course + "</td></tr>";
});
$('#table1').append(data);
});
}
});
/************** end code *******************/
});
</script>
</head>
<body>
<table style="margin-top:54px">
<tr><td>RollNo</td><td>@Html.TextBox("RollNo")</td></tr>
<tr><td>Name</td><td>@Html.TextBox("Name")</td></tr>
<tr><td>Gender</td><td>Male:@Html.RadioButton("Gender","Male",true) Female: @Html.RadioButton("Gender","Female") </td></tr>
<tr><td>Course</td><td>@Html.DropDownList("Course")</td></tr>
<tr><td><input type="button" id="btn1" value="Save" /></td></tr>
<tr><td> <div id="msg" style="height:30px;width:100%;z-index:100;background-color:#00ff21;top:0;left:0;position:fixed;display:none;text-align:center;"></div></td></tr>
</table>
<div>
<p>Enter Name @Html.TextBox("name") </p>
<p id="loader" style="display:none;"><img src="~/Images/kush.gif" style="width:90px;height:100px"/></p>
<div>
<table id="table1" border="1" width="300px">
</table>
</div>
</div>
</body>
</html>
Result:
Note : Again
we will discuss same concept with $.ajax method for save and
retrive data but here we have to create another controller which name
Cetpa………………
Code for CetpaController.cs……………………………………
using System;
using
System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using
AjaxMethodInMvc.Models;
namespace
AjaxMethodInMvc.Controllers
{
public class CetpaController : Controller
{
//
// GET: /Cetpa/
testEntities database = new testEntities();
public ActionResult Index()
{
return View();
}
//[HttpPost]
//public JsonResult
Save(string RollNo, string Name, string Gender, string Course)
//{
// try{
// if (string.IsNullOrEmpty(RollNo))
// {
// throw new Exception("Please
enter RollNo");
// }
// Student ss = new Student
// {
// RollNo = Convert.ToInt32(RollNo),
// Name = Name,
// Gender = Gender,
// Course = Course
// };
// database.Students.Add(ss);
// database.SaveChanges();
// return this.Json(new { result = true, msg =
"data save" });
// }
// catch (Exception ex)
// {
// return this.Json(new { result = false,
msg = ex.Message });
// }
//}
[HttpPost]
public JsonResult Save(Student entity)
{
try
{
if (string.IsNullOrEmpty(entity.RollNo.ToString()))
{
throw new Exception("Please enter
RollNo");
}
database.Students.Add(entity);
database.SaveChanges();
return this.Json(new { result = true, msg = "data
save"
});
}
catch (Exception ex)
{
return this.Json(new { result = false, msg = ex.Message
});
}
}
[HttpGet]
public JsonResult GetList(string name)
{
System.Threading.Thread.Sleep(2000);
return this.Json(this.database.Students.Where(obj
=> obj.Name.StartsWith(name)).ToList(), JsonRequestBehavior.AllowGet);
}
}
}
Code for Index.cshtml
@{
ViewBag.Title = "Index";
}
<h2>Index</h2>
<script src="~/Scripts/jquery-1.7.1.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$(':button').click(function ()
{
var v = $('#myfrm').serialize();
//var v = { RollNo:
$('#RollNo').val(), Name: $('#Name').val(), Gender:
$("#Gender").val(), Course: $("#Course").val() };
$.ajax({
type: "POST",
url: "Cetpa/Save",
content: "application/json;
charset=utf-8",
dataType: "json",
data: v,
//data: JSON.stringify( v),
success: function (data) {
$('#msg').html(data.msg);
$('#msg').slideDown(1000).delay(2000).fadeOut(1000,
function ()
{
if (data.result)
{
$('#RollNo').val("").focus();
$('#Name').val("");
}
});
},
error: function (data) {
}
});
});
$('#name').keyup(function ()
{
debugger;
var v = $(this).val();
var list = null;
if (v.length >= 2)
{
$('#loader').show();
$.ajax({
type: "GET",
url: "Cetpa/GetList",
data: { name: v },
contentType: "application/json;charset=utf-8",
dataType: "json",
success: function (data)
{
$.each(data, function (i, d)
{
data += "<tr><td>" + d.RollNo + "</td><td>" + d.Name + "</td><td>" + d.Gender + "</td><td>" + d.Course + "</td></tr>";
});
$('#table1').append(data);
},
error: function (response)
{
debugger;
alert('eror');
}
});
}
});
});
</script>
<body>
@using (Html.BeginForm("", "", FormMethod.Post, new { id = "myfrm" }))
{
<table style="margin-top:54px">
<tr><td>RollNo</td><td>@Html.TextBox("RollNo")</td></tr>
<tr><td>Name</td><td>@Html.TextBox("Name")</td></tr>
<tr><td>Gender</td><td>@Html.TextBox("Gender")</td></tr>
<tr><td>Course</td><td>@Html.TextBox("Course")</td></tr>
<tr><td><input type="button" id="btn1" value="Save" /></td></tr>
<tr><td> <div id="msg" style="height:30px;width:100%;z-index:100;background-color:#00ff21;top:0;left:0;position:fixed;display:none;text-align:center;"></div></td></tr>
</table>
<div>
<p>Enter Name @Html.TextBox("name") </p>
<p id="loader" style="display:none;"><img src="~/Images/kush.gif" style="width:90px;height:100px"/></p>
<div>
<table id="table1" border="1" width="300px">
</table>
</div>
</div>
}
</body>
0 comments:
Post a Comment