April 5, 2017
Steps to start with Ajax in Asp.Net MVC
What is Ajax?
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:
- Making Asynchronous Calls
- 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?
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:
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.