Home > DeveloperSection > Beginner > Jquery Ajax in Asp.Net Mvc 4

Jquery Ajax in Asp.Net Mvc 4


ASP.NET MVC ASP.NET MVC 
Ratings:
0 Comment(s)
 4769  View(s)
Rate this:

Jquery Ajax in Asp.Net Mvc 4

In this article, I’m explaining jquery ajax in asp.net mvc 4 and how to implement it in our project and how to call a controller action method using ajax.

AJAX is an acronym standing for Asynchronous JavaScript and XML and this technology help us to load data from the server without a browser page refresh.

JQuery is a great tool which provides a rich set of AJAX methods to develop next generation web application. It is very easy to load any static or dynamic data using JQuery AJAX.

Example

Step 1

First create a table named “Customer” in the database like this:

Jquery Ajax in Asp.Net Mvc 4

Ste p 2

Now create a basic asp.net mvc 4 application add a class named “Customer” like this:

using System;

using System.Collections.Generic;

using System.ComponentModel.DataAnnotations;

using System.ComponentModel.DataAnnotations.Schema;

using System.Linq;

using System.Web;

 

namespace JQueryAjaxMvcApp.Models

{

    [Table("Customer")]

    public class Customer

    {

        [Key]

        public int CustID { getset; }

        public string Name { get;set;}

        public string Address { getset; }

        public string ContactNo { getset; }

    }

}

Step 3

Now add another class named “CustomerContext” to the project like this:

using System;

using System.Collections.Generic;

using System.Data.Entity;

using System.Linq;

using System.Web;

 

namespace JQueryAjaxMvcApp.Models

{

    public class CustomerContext : DbContext

    {

        public DbSet<Customer> Customers { getset; }

    }

}

Now add connection string in the web.config file like this:

  <connectionStrings>

        <add name="CustomerContext" connectionString="Data Source=UTTAM-PC4;Initial Catalog=SumitTesting;user id=userid;password=password;" providerName="System.Data.SqlClient"/>

  </connectionStrings>

Step 4

Now add a controller named “HomeController” to the project like this:

using JQueryAjaxMvcApp.Models;

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

 

namespace JQueryAjaxMvcApp.Controllers

{

    public class HomeController : Controller

    {

        CustomerContext db = new CustomerContext();

 

        public ActionResult Index()

        {

            return View();

        }

 

        [HttpPost]

        public ActionResult Index(Customer customer)

        {

            if (ModelState.IsValid)

            {

                db.Customers.Add(customer);

                db.SaveChanges();

                return RedirectToAction("Index");

            }

            return View();

        }

 

        public JsonResult getRecords()

        {

            return Json(db.Customers.ToList(),JsonRequestBehavior.AllowGet);

        }

 

    }

}

 

Step 5

Now add a view named “Index” and write the below code in it:

@model JQueryAjaxMvcApp.Models.Customer

 

@{

    ViewBag.Title = "Index";

}

 

<script src="~/Scripts/jquery-1.8.2.min.js"></script>

<script>

    $(function () {

        $.ajax({

            type: "POST",

            url: "/Home/getRecords",

            success: function (data) {

                $.each(data, function (index, value) {

                    $('#divRecordList').append("<li>" +

                        value.Name + " " + value.Address + " " + value.ContactNo

                        + "</li>");

 

                });

            }

        });

    });

</script>

 

 

<div>

    <div>

        @using (Html.BeginForm("Index""Home"FormMethod.Post))

        {

            <div style="width:100%;float:left;">

                <div style="width:100px;float:left;">

                    @Html.LabelFor(m=>m.Name)

                </div>

                <div style="width:200px;float:left;">

                    @Html.TextBoxFor(m=>m.Name)

                </div>

            </div>

            <div style="width:100%;float:left;">

                <div style="width:100px;float:left;">

                    @Html.LabelFor(m=>m.Address)

                </div>

                <div style="width:200px;float:left;">

                    @Html.TextBoxFor(m=>m.Address)

                </div>

            </div>

            <div style="width:100%;float:left;">

                <div style="width:100px;float:left;">

                    @Html.LabelFor(m=>m.ContactNo)

                </div>

                <div style="width:200px;float:left;">

                    @Html.TextBoxFor(m=>m.ContactNo)

                </div>

            </div>

            <div style="width:100%;float:left;">

                <input type="submit" value="Submit"/>

            </div>

        }

    </div>

   

 

    <div style="margin-top:20px;">

        <h2>Customer Lists</h2>

       <ul id="divRecordList">

 

       </ul>

    </div>

 

</div>

 

Now your solution explorer will look like this:

Jquery Ajax in Asp.Net Mvc 4

Output

Now run the application

Jquery Ajax in Asp.Net Mvc 4

 

Fill the form with desired values like this:

Jquery Ajax in Asp.Net Mvc 4

 

And click on Submit button:

Jquery Ajax in Asp.Net Mvc 4



Don't want to miss updates? Please click the below button!

Follow MindStick