In this post i will show you how to use Jquery Ajax method in Asp.net MVC. This topic is very vast but I will create very simple example to test this method in asp.net MVC.
Step 1: Create one blank asp.net MVC application. I hope you are knowing the basic concept of asp.net MVC.
Step 2: Create Emp Class in Model folder and write the code like this
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace AjaxDemoInMVC.Models
{
public class Emp
{
public int Id { get; set; }
public string EmpName { get; set; }
public string EmpAddress { get; set; }
}
}
Step 3: Create the HomeController and the DisplayEmpDetail Method like this
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using AjaxDemoInMVC.Models;
namespace AjaxDemoInMVC.Controllers
{
public class HomeController : Controller
{
//
// GET: /Home/
public ActionResult Index()
{
return View();
}
[HttpPost]
public JsonResult DisplayEmpDetail(int id)
{
Emp obj = new Emp
{
Id=id,
EmpName="Chandradev",
EmpAddress="Bangalore"
};
return Json(obj);
}
}
}
Note: Here we are returning the values as Json format.
Step 4: Create the Index view and Write the code for calling the method using Jquery Ajax method as given below
@model AjaxDemoInMVC.Models.Emp
@{
ViewBag.Title = "Index";
}
<fieldset>
<legend>
Sample code for Calling Jquery Ajax in asp.net MVC
</legend>
<br />
EmpId: <input type="text" id="txtId" />
<input type="button" id="btnAjax" value="Click Here to Call Jquery Ajax" />
</fieldset>
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script>
$(function () {
$("#btnAjax").click(function () {
$.ajax({
type: "POST",
url: "Home/DisplayEmpDetail",
data: '{Id: "' + $("#txtId").val() + '" }',
contentType: "application/json; charset=utf-8",
success: function (response) {
alert("EmpName: "+ response.EmpName + " EmpAddress: " + response.EmpAddress);
},
failure: function (response) {
alert(response.responseText);
},
error: function (response) {
alert(response.responseText);
}
});
});
});
</script>
Note : In the above code we show that we are using jquery Ajax method on button Click event and Ajax method expect the type, URL,Data,ContentType,Success,Failure and error parameter.
Type: means Type of Request in Ajax method
URL: Means Method name which are using for Ajax functionality.
data: what are the input data being used in method
ContentType: What are the content type consuming in Ajax method. We are giving data in Json format in DisplayEmpDetail Method.
success: What will return the method on successfully execution.
failure: It will define what message should be display on failure of Ajax method
error: It will display the error message.
Summary: We show that how to use Jquery Ajax method in asp.net MVC application.
Chandradev's Blog 