Mvc4 how to Call Controller Action method using ajax and Jquery

Introduction :  In this tutorial  explain how to call controller method using the ajax and jquery  and display the data in view or how to communication between controller and view using ajax post and get request. also here we are binding the data in the html table without the using the model or viewbag.

Tools : Visual Studio 2012-13 and Sql Database

Step 1:   first create Sql database  & Create table

Step 2: then after create ado.net entity model as below image

Step 3:  after creating controller you can add action method  gettable()   and  anothe json request method   GetUser()

public ActionResult gettable()
        {
            return View();
        }
       
        public JsonResult GetUser()
        {
            List<tbl_user> D = new List<tbl_user>();
            using (Database1Entities2 dc = new Database1Entities2())
            {
                D = dc.tbl_user.ToList();
            }
            return new JsonResult { Data = D, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
        }

---

Step 4 : Now add view as following

Give view name gettable

@model MvcApplication1.Database1Entities2

@{
    ViewBag.Title = "gettable";
}
<h2>gettable</h2>
 
@section Scripts{

    <script>
        $(document).ready(function () {
            $("#btnUser").click(function () {
                $.ajax({
                    url: '@Url.Action("GetUser","ABC")',
                    data: "",
                    type: "GET",
                    dataType: "json",
                    success: function (data) {
                        loadData(data);
                    },
                    error: function () {
                        alert("error Please try again.");
                    }
                });
            });
            function loadData(data) {
                var tab = $('<table style=Background-color:yellow></table>');
                var thead = $('<thead></thead>');
                thead.append('<th> ID</th>');
                thead.append('<th>Name</th>');
                thead.append('<th>City</th>');
                thead.append('<th>Education </th>');
                tab.append(thead);
                $.each(data, function (i, val) {
                    var trow = $('<tr></tr>');
                    trow.append('<td>' + val.Id + '</td>');
                    trow.append('<td>' + val.Name + '</td>');
                    trow.append('<td>' + val.City + '</td>');
                    trow.append('<td>' + val.Education + '</td>');
                    tab.append(trow);     
                });

                $("#DivId").html(tab);
            };
        });
    </script>
}
    <table>
        <tr>
            <td>
                <input type="button" value="Get User" id="btnUser" />
            </td>
        </tr>
        <tr>
            <td>
                <div id="DivId">
                </div>
            </td>
        </tr>
    </table>

---

Here we can call controller method using the ajax url and get response from the controller via the json respons and bind or append data in html table without the server loading. when you can click on the button the table data can be display as below o/p.

Snapshot :

If you  have any Query or problem  or need to complete code than give comment below.

• Tweet
• Share
• Share
• Share
• Share

Sign up here with your email