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.
Benefits of Ajax
- 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) 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,
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<Student> 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<Student>students = new List<Student>();
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:
Join the conversation! Your thoughts help the community grow.