Chandradev's Blog

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.