Steps to start with Ajax in Asp.Net MVC

What is Ajax?
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.
Some of the Benefits of Ajax are:
  • Callbacks
  • Making Asynchronous Calls
  • User-Friendly
  • Improve the speed, performance and usability of a web application
Implementation of Ajax can be done in two way in ASP.Net Application:
  • using Update Panel and,
  • using jQuery
 What Advances have Been Made to Ajax?
JavaScript is the client-side scripting language and XML is a mark-up language to define data. And we have, JSON(JavaScript Object Notation) is as another mark-up language to define data as well. JSON is much easier to use with JavaScript than XML. After the combination of JavaScript and Ajax, the XML Web Services are being replaced by JSON Web Services.
Another major advance to JavaScript and Ajax is the JavaScript object library called jQuery, which is the free, open-source software. It is a wrapper for JavaScript. jQuery is used to write the JavaScript to navigate and manipulate a page and make asynchronous Ajax callbacks.
Hence, Ajax callbacks have become standard programming practices by using jQuery and JSON Web Services for designing and developing web applications.

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:
Add “using System.ComponentModel.DataAnnotations;” Attributes to Validate Model Data and then build the project once.
Step 3: Lets 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:
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 required.
Step 5: Now 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:
Similarly, I am also creating JSON method “getStudent” to retrieve data from database and return raw JSON data to be consumed by JavaScript in view as shown below:
Step 6: Now add a view to display the data and data inserting field. Here, I am adding a view named as “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:



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 retrieve and display it to the view. Just after the HTML code finished add the script shown below:
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 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 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!