Ajax Call In Jquery Mvc | Benefits Of Ajax

public class PersonModel

///

/// Gets or sets Name.

///

public string Name { get; set; }

///

/// Gets or sets DateTime.

///

public string DateTime { get; set; }

Note: The following Action method handles AJAX calls and hence the return type is set to JsonResult.

public class HomeController : Controller

// GET: Home

public ActionResult Index()

return View();

[HttpPost]

public JsonResult AjaxMethod(string name)

PersonModel person = new PersonModel

Name = name,

DateTime = DateTime.Now.ToString()

};

return Json(person);

@model jQuery_AJAX_MVC.Models.PersonModel

@{

Layout = null;

1. 

   What is Ajax?
   

   As we all know, AJAX means Asynchronous JavaScript and XML. It is a client-side script that communicates to and from a server/database without the need for a postback or a complete page refresh. The Ajax speeds up response time.

   In other words, Ajax is the method of exchanging data with a server, and updating parts of a web page, without reloading the entire page.

   Using Ajax in Asp.Net MVC
   

   Ajax
   

   So starting of from the beginning Ajax is used for Asynchronous Javascript and XML. We can use it for many purposes. Few basic uses of Ajax are:-

   • Update page without reloading the page providing better performance.
   • Request data from a server – after the page has loaded which can be used in loading Partial Views.
   • Send data to a server without reload – in the background making it easier to performance Save, Delete operations smoothly.

   Ajax in Asp.Net MVC
   

   Ajax can be used anywhere where we can use jquery. But we will be watching few examples of different ways of using Ajax in Asp.Net MVC. We will be posting data on MVC Controller without refreshing the page. So let’s start from beginning:-

   Step-1

   So , first of all we will be creating a new view and adding few field on it . Now we will be trying to send the values of these fields on controller without reload and especially using Ajax.

   So We will add a new view and few fields on it.

   @{ ViewBag.Title = “Home Page”; }

   

   Demonstration: Implementation of Ajax using jQuery
   

   Step 1

   Create a new Project and choose ASP.NET MVC web application.

   Step 2

   Just Ignore the built-in Models and Controllers and make your own model.

   Here I am creating a model called “Students” having properties studentID, studentName and studentAddress as shown below,

   
public class Student
{
[Key]
public int studentID { get; set; }
[Required]
public string studentName { get; set; }
[Required]
public string studentAddress { get; set; }
}


   Add “using System.ComponentModel.DataAnnotations;” Attributes to Validate Model Data and then build the project once.

   Step 3

   Let’s create another model by inheriting the DbContext. It is a class that manages all the database operations, like database connection, and manages various entities of the Entity Model.

   We can also say DbContext is a wrapper of ObjectContext. So, DbContext is a lightweight version of the ObjectContext and is exposes only the common features that are really required in programming.

   Here I am creating a model called “StudentContext” as shown below,

   
public class StudentContext : DbContext
{
public DbSet

Students { get; set; }
}



   Add “using System.Data.Entity;” that provides access to the core functionality of the entity framework.

   Step 4

   Now create a controller to written the code for inserting data into database, displaying data into view.

   Here I am creating “Student” controller. Inside the Controller, I am creating an object of StudentContext for inserting and retrieving data from database. Also add the necessary namespace.

   
StudentContext context = new StudentContext();


   Step 5

   Now I’m creating the action methods for Inserting and retrieving the data to/from the database.

   Here I am creating an [HttpPost] action method “createStudent” for inserting the JSON-Formatted data to database. I am Using [HttpPost] attribute to Save/Post the data as below:

   
[HttpPost]
public ActionResult createStudent(Student std)
{
context.Students.Add(std);
context.SaveChanges();
string message = "SUCCESS";
return Json(new { Message = message, JsonRequestBehavior.AllowGet });
}


   Similarly, I am also creating JSON method “getStudent” to retrieve data from database and returning raw JSON data to be consumed by JavaScript in view as shown below,

   
public JsonResult getStudent(string id)
{
List

students = new List

();
students = context.Students.ToList();
return Json(students, JsonRequestBehavior.AllowGet);
}




   Step 6

   Now add a view to display the data and data inserting field. Here, I am adding a view named “Index.cshtml”. Then, write the HTML codes for making the data input field, submit button and also for displaying the data in same page. You can use bootstrap classes for designing. Here I am using bootstrap. My designing code is as below:

   Please enter the details below.
   

   
   Student Name
   

   
   Student Address
   

   ID	Student Name	Student Address

   We can simply use the bootstrap class and call jQuery functions in ASP.NET MVC because during the project creation it will by default added to project and also linked to the template.

   Step 7

   Now I will write the script for inserting the data as well as retrieving and displaying it to the view. Just after the HTML code finished add the script shown below,

   
@section Scripts
{

}


   We are using Ajax to refresh “tblStudent” so it refreshes only the particular table, rather than refreshing entire page. After clicking the “submitButton” the data from the input fields are taken in variable and redirected to action “createStudent” of “StudentController” to insert into the database. And, I have written a function “LoadData” to display the data from database to view continuously after inserting data. Inside “LoadData” function I am calling “getStudent” method which returns result in JSON and the JSON-Formatted data are presented in html by the underlying statements.

   Step 8

   Now, configure the Database connectionStrings in “web.config” file of the particular project as shown below,

   In the above connectingString “StudentContext” is the name of class inherited from abstract Class “DbContext” in “StudentContext.cs” file. “RAVI-KANDEL” is the name of the Database Server and “Student” is the name of the Database. Change “RAVI-KANDEL” with your Database Server name. Finally, run your application and navigate to Student controller. Also you can configure “RouteConfig.cs” and set the controller to “Student” for direct navigation to the Student controller when loading the application.

   You can add the records and can see added data in the table after the form-control as shown below,

   Also, you can open the database server and see the data stored in database over there.

   Please feel free to comment/feedback.

   Happy Coding!

   jQuery Ajax() method is used to send Ajax requests or asynchronous HTTP requests to the servers for fetching and posting data according to the requirement by specifying the request type.

   Syntax:
   

   $.ajax({name:value, name:value, … })

   Parameters: The list of possible parameter that can be passed to an Ajax request are listed below:

   • type: It is used to specify the type of the request as POST or GET.
   • url: It is used to specify the URL to send the request to.
   • username: It is used to specify a username to be used in an HTTP access authentication request.
   • xhr: It is used for creating the XMLHttpRequest object.
   • async: Its default value is true. It indicates whether the request should be handled asynchronously or not.
   • beforeSend(xhr): It is a function that is to be run before the request is sent.
   • dataType: The data type expected of the server response.
   • error(xhr, status, error): It is used to run if the request fails.
   • global: Its default value is true. It is used to specify whether or not to trigger global AJAX event handles for the request.
   • ifModified: It’s default value is false. It is used to specify whether a request is only successful if the response has changed since the last request.
   • jsonp: A string overriding the callback function in a jsonp request.
   • jsonpCallback: It is used to specify a name for the callback function in a jsonp request.
   • cache: It’s default value is true. It indicates whether the browser should cache the requested pages.
   • complete(xhr, status): It is a function which is to be run when the request is being finished.
   • contentType: It’s default value is: “application/x-www-form-urlencoded” and it is used when data send to the server.
   • context: It is used to specify the “this” value for all AJAX related callback functions.
   • data: It is used to specify data to be sent to the server.
   • dataFilter(data, type): It is used to handle the raw response data of the XMLHttpRequest.
   • password: It is used to specify a password to be used in an HTTP access authentication request.
   • processData: It’s default value is true. It is used to specify whether or not data sent with the request should be transformed into a query string.
   • scriptCharset: It is used to specify the charset for the request.
   • success(result, status, xhr): It is to be run when the request succeeds.
   • timeout: It is the local timeout for the request. It measured in terms of milliseconds.
   • traditional: It is used to specify whether or not to use the traditional style of param serialization.

   Example 1: This example use ajax() method to add the text content from outer text file by sending ajax request.

   Ajax Call Getting started
   

   
   Employee Id:
   

   
   Employee Name:
   

   
   Employee Salary:
   

   @{ ViewBag.Title = “Home Page”; }

   

   Demonstration: Implementation of Ajax using jQuery
   

   Step 1

   Create a new Project and choose ASP.NET MVC web application.

   Step 2

   Just Ignore the built-in Models and Controllers and make your own model.

   Here I am creating a model called “Students” having properties studentID, studentName and studentAddress as shown below,

   
public class Student
{
[Key]
public int studentID { get; set; }
[Required]
public string studentName { get; set; }
[Required]
public string studentAddress { get; set; }
}


   Add “using System.ComponentModel.DataAnnotations;” Attributes to Validate Model Data and then build the project once.

   Step 3

   Let’s create another model by inheriting the DbContext. It is a class that manages all the database operations, like database connection, and manages various entities of the Entity Model.

   We can also say DbContext is a wrapper of ObjectContext. So, DbContext is a lightweight version of the ObjectContext and is exposes only the common features that are really required in programming.

   Here I am creating a model called “StudentContext” as shown below,

   
public class StudentContext : DbContext
{
public DbSet

Students { get; set; }
}



   Add “using System.Data.Entity;” that provides access to the core functionality of the entity framework.

   Step 4

   Now create a controller to written the code for inserting data into database, displaying data into view.

   Here I am creating “Student” controller. Inside the Controller, I am creating an object of StudentContext for inserting and retrieving data from database. Also add the necessary namespace.

   
StudentContext context = new StudentContext();


   Step 5

   Now I’m creating the action methods for Inserting and retrieving the data to/from the database.

   Here I am creating an [HttpPost] action method “createStudent” for inserting the JSON-Formatted data to database. I am Using [HttpPost] attribute to Save/Post the data as below:

   
[HttpPost]
public ActionResult createStudent(Student std)
{
context.Students.Add(std);
context.SaveChanges();
string message = "SUCCESS";
return Json(new { Message = message, JsonRequestBehavior.AllowGet });
}


   Similarly, I am also creating JSON method “getStudent” to retrieve data from database and returning raw JSON data to be consumed by JavaScript in view as shown below,

   
public JsonResult getStudent(string id)
{
List

students = new List

();
students = context.Students.ToList();
return Json(students, JsonRequestBehavior.AllowGet);
}




   Step 6

   Now add a view to display the data and data inserting field. Here, I am adding a view named “Index.cshtml”. Then, write the HTML codes for making the data input field, submit button and also for displaying the data in same page. You can use bootstrap classes for designing. Here I am using bootstrap. My designing code is as below:

   Please enter the details below.
   

   
   Student Name
   

   
   Student Address
   

   ID	Student Name	Student Address

   We can simply use the bootstrap class and call jQuery functions in ASP.NET MVC because during the project creation it will by default added to project and also linked to the template.

   Step 7

   Now I will write the script for inserting the data as well as retrieving and displaying it to the view. Just after the HTML code finished add the script shown below,

   
@section Scripts
{

}


   We are using Ajax to refresh “tblStudent” so it refreshes only the particular table, rather than refreshing entire page. After clicking the “submitButton” the data from the input fields are taken in variable and redirected to action “createStudent” of “StudentController” to insert into the database. And, I have written a function “LoadData” to display the data from database to view continuously after inserting data. Inside “LoadData” function I am calling “getStudent” method which returns result in JSON and the JSON-Formatted data are presented in html by the underlying statements.

   Step 8

   Now, configure the Database connectionStrings in “web.config” file of the particular project as shown below,

   In the above connectingString “StudentContext” is the name of class inherited from abstract Class “DbContext” in “StudentContext.cs” file. “RAVI-KANDEL” is the name of the Database Server and “Student” is the name of the Database. Change “RAVI-KANDEL” with your Database Server name. Finally, run your application and navigate to Student controller. Also you can configure “RouteConfig.cs” and set the controller to “Student” for direct navigation to the Student controller when loading the application.

   You can add the records and can see added data in the table after the form-control as shown below,

   Also, you can open the database server and see the data stored in database over there.

   Please feel free to comment/feedback.

   Happy Coding!

   Before diving into the core topic let’s have an overview about JQuery and Ajax. What is it? What is JQuery? Well, JQuery is a framework (tools) for writing JavaScript, Written as “write less, do more”, jQuery is to make easier to use JavaScript. What is JavaScript? JavaScript is an object-oriented computer programming (Scripting) language commonly used to create interactive effects within web browsers. Let’s have a sample example: We have a submit button in our JQuery AJAX MVC application. Let’s try to show a message when it is clicked. Here is our button with defined id=”btnSubmit”:

   Now we need to write some script to do that, here is some JavaScript code:

   1. var myBtn = document.getElementById(‘btnSubmit’);
   2. myBtn.addEventListener(‘click’, function(e) {
   3. e.preventDefault();
   4. alert(‘Hello’);
   5. });

   By this code the result will show “Hello”: Now if we can get the same result by using jQuery instead of it. Let’s have a look:

   1. $(‘#btnSubmit’).click(function(event) {
   2. event.preventDefault();
   3. alert(“Hello”);
   4. });

   Note: Here use of ‘e’ is just a short for event which raised the event. We can pass any variable name. Notice that the ‘e’ is changed to name ‘event’ in JQuery part. This piece of code is also producing the same result “Hello”. This is why jQuery is known as “write less, do more”. Finally the script:

   Let’s focus on Ajax: AJAX stands for “Asynchronous JavaScript and XML”. AJAX is about exchanging data with a server, without reloading the whole page. It is a technique for creating fast and dynamic web pages. In .NET, we can call server side code using two ways:

   1. ASP .NET AJAX
   2. jQuery AJAX

   In this article we will focus on JQuery Ajax. $.ajax () Method: JQuery’s core method for creating Ajax requests. Here are some jQuery AJAX methods:

   • $.ajax() Performs an async AJAX request.
   • $.get() Loads data from a server using an AJAX HTTP GET request.
   • $.post() Loads data from a server using an AJAX HTTP POST request.

   To know more click. $.ajax () Method Configuration option: Options that we use:

   • async:
   • type:
   • url:
   • data:
   • datatype:
   • success:
   • error:

   Let’s have details overview: async Set to false if the request should be sent synchronously. Defaults to true. Note that if you set this option to false, your request will block execution of other code until the response is received. Example:

   type This is type of HTTP Request and accepts a valid HTTP verb. The type of the request, “POST” or “GET” defaults to “GET”. Other request types, such as “PUT” and “DELETE” can be used, but they may not be supported by all the web browsers. Example:

   url The URL for the request. Example:

   data The data to be sent to the server. This can either be an object or a query string. Example:

   1. data: JSON.stringify(model_data),

   dataType The type of data you expect back from the server. By default, jQuery will look at the MIME type of the response if no dataType is specified. Accepted values are text, xml, json, script, html jsonp. Example:

   contentType This is the content type of the request you are making. The default is ‘application/x-www-form-urlencoded’. Example:

   1. contentType: ‘application/json; charset=utf-8’,

   success A callback function to run if the request succeeds. The function receives the response data (converted to a JavaScript object if the DataType was JSON), as well as the text status of the request and the raw request object.

   1. Success: function (result) {
   2. $(‘#result’).html(result);

   error A callback function to run if the request results in an error. The function receives the raw request object and the text status of the request.

   1. error: function (result) {
   2. alert(‘Error occured!!’);
   3. },

   Let’s Post Values using JQuey,Ajax: We often use the jQuery Ajax method in ASP.NET Razor Web Pages. Here is a sample code:

   Controller Action:

   1. [HttpPost]
   2. public ActionResult JqAJAX(Student st) {
   3. try {
   4. return Json(new {
   5. msg = “Successfully added ” + st.Name
   6. });
   7. } catch (Exception ex) {
   8. throw ex;

   Posting JSON JSON is a data interchange format where values are converted to a string. The recommended way to create JSON is include the JSON.stringify method. In this case we have defined:

   And the data type set to:

   And the content type set to application/json

   1. contentType: ‘application/json; charset=utf-8’

   Syntax: JSON.stringify(value[, replacer[, space]]) Post Script:

   1. var Student = {
   2. ID: ‘10001’,
   3. Name: ‘Shashangka’,
   4. Age: 31
   5. };
   6. $.ajax({
   7. type: “POST”,
   8. url: “/Home/JqAJAX”,
   9. data: JSON.stringify(Student),
   10. contentType: ‘application/json; charset=utf-8’,
   11. success: function(data) {
   12. alert(data.msg);
   13. },
   14. error: function() {
   15. alert(“Error occured!!”)
   16. });

   Controller Action:

   1. [HttpPost]
   2. public ActionResult JqAJAX(Student st) {
   3. try {
   4. return Json(new {
   5. msg = “Successfully added ” + st.Name
   6. });
   7. } catch (Exception ex) {
   8. throw ex;

   JSON Response Result: Sent data format: {“ID”:”10001″,”Name”:”Shashangka”,”Age”:31} Received Data format: {“msg”:”Successfully added Shashangka”} Let’s Post JavaScript Objects: To send JavaScript Objects we need to omit the JSON.stringify(Student) method and we need to pass the plain object to the data option. In this case we have defined:

   And the datatype set to:

   And the content type set to default.

   1. contentType: ‘application/x-www-form-urlencoded’

   Post Script:

   1. var Student = {
   2. ID: ‘10001’,
   3. Name: ‘Shashangka’,
   4. Age: 31
   5. };
   6. $.ajax({
   7. type: “POST”,
   8. url: “/Home/JqAJAX”,
   9. data: Student,
   10. contentType: ‘application/x-www-form-urlencoded’,
   11. datatype: “html”,
   12. success: function(data) {
   13. alert(data.msg);
   14. },
   15. error: function() {
   16. alert(“Error occured!!”)
   17. });

   Controller Action:

   1. [HttpPost]
   2. public ActionResult JqAJAX(Student st) {
   3. try {
   4. return Json(new {
   5. msg = “Successfully added ” + st.Name
   6. });
   7. } catch (Exception ex) {
   8. throw ex;

   JavaScript Objects Response Result: Sent data format: ID=10001&Name=Shashangka&Age=31 Received Data format: {“msg”:”Successfully added Shashangka”} Let’s Post JavaScript Arrays: To send Array we need to omit the JSON.stringify(Student) method and we need to pass the plain object to the data option. In this case we have defined:

   And the datatype set to:

   And the content type set to default

   1. contentType: ‘application/x-www-form-urlencoded’

   Post Script:

   1. var ID = [“Shashangka”, “Shekhar”, “Mandal”];
   2. $.ajax({
   3. type: “POST”,
   4. url: “/Home/JqAJAX”,
   5. data: {
   6. values: ID
   7. },
   8. datatype: “html”,
   9. contentType: ‘application/x-www-form-urlencoded’,
   10. success: function(data) {
   11. alert(data.msg);
   12. },
   13. error: function() {
   14. alert(“Error occured!!”)
   15. });

   Controller Action:

   1. [HttpPost]
   2. public ActionResult JqAJAX(string[] values) {
   3. try {
   4. return Json(new {
   5. msg = String.Format(“Fist Name: {0}”, values[0])
   6. });
   7. } catch (Exception ex) {
   8. throw ex;

   Array Response Result: Sent data format: values[]=Shashangka&values[]=Shekhar&values[]=Mandal Received Data format: {“msg”:”Fist Name: Shashangka”} Hope this will help to understand different datatypes and Ajax posting. Thanks!

   In this article I will explain with an example, how to call Controller with GET call using jQuery AJAX in ASP.Net MVC.

   Model

   Following is a Model class named PersonModel with two properties i.e. Name and DateTime.

   public class PersonModel

   ///

   /// Gets or sets Name.

   ///

   public string Name { get; set; }

   ///

   /// Gets or sets DateTime.

   ///

   public string DateTime { get; set; }

   Controller

   The Controller consists of two Action methods.

   Action method for handling GET operation

   Inside this Action method, simply the View is returned.

   Action method for handling jQuery AJAX operation

   This Action method handles the GET call made from the jQuery AJAX function from the View.

   Note: By default, ASP.Net MVC does not allow JSON GET call and hence it needs to be explicitly allowed using the JsonRequestBehavior.AllowGet behavior.

   The value of the name parameter is assigned to the Name property of the PersonModel object along with the Current DateTime and finally the PersonModel object is returned back as JSON to the jQuery AJAX function.

   public class HomeController : Controller

   // GET: Home

   public ActionResult Index()

   return View();

   [HttpGet]

   public JsonResult AjaxMethod(string name)

   PersonModel person = new PersonModel

   Name = name,

   DateTime = DateTime.Now.ToString()

   };

   return Json(person, JsonRequestBehavior.AllowGet);

   Typical GET call using jQuery AJAX

   The following figure describes a jQuery AJAX call in ASP.Net MVC.

   View

   Next step is to add a View for the Controller and while adding you will need to select the PersonModel class created earlier.

   Inside the View, in the very first line the PersonModel class is declared as Model for the View.

   The View consists of an HTML TextBox element and a Button.

   The Button has been assigned a jQuery click event handler and when the Button is clicked a jQuery AJAX called is made to the Controller’s action method.

   The TYPE is set to GET and the URL for the jQuery AJAX call is set to the Controller’s action method i.e. /Home/AjaxMethod.

   The value of the TextBox is passed as parameter and the returned response is displayed using JavaScript Alert Message Box.

   @model jQuery_AJAX_GET_MVC.Models.PersonModel

   @{

   Layout = null;

   Screenshot

   Downloads

   What is Ajax?
   

   As we all know, AJAX means Asynchronous JavaScript and XML. It is a client-side script that communicates to and from a server/database without the need for a postback or a complete page refresh. The Ajax speeds up response time.

   In other words, Ajax is the method of exchanging data with a server, and updating parts of a web page, without reloading the entire page.

   

   C-Sharpcorner Member List
   

1. protected void Application_BeginRequest()
2. if (Request.Headers.AllKeys.Contains(“Origin”) && Request.HttpMethod == “OPTIONS”)
3. Response.End();
4. Response.Flush();