What is Ajax?
Ajax stands for Asynchronous JavaScript and XML, the data transmitted can be JSON, XML, HTML, JavaScript, plain text, etc. Regardless of the type of data, Ajax can send and receive it. Ajax uses a built-in object of all modern browsers called XMLHttpRequest. This object is used to exchange data back and forth between your Web page and a Web server, as shown below.
Types of AJAX Call
| Ajax Methods | Description |
| get() | Sends HTTP GET request to load the data from the server. |
| Post() | Sends HTTP POST request to submit or load the data to the server. |
| Put() | Sends HTTP PUT request to update data on the server. |
| Delete() | Sends HTTP DELETE request to delete data on the server. |
Tools You Need
- .NET v6.x or higher
- Visual Studio 2022
Please watch the video and perform the below mentioned steps
STEP 1
Open VS 2022 click on create project as shown below,
Step 2
Choose the below mentioned template
Step 3
Now open the Model folder and add the 2 classes
- JsonResponseViewModel
- Student Model
This model will be used to communicate during ajax request. Below is the source code defination for both the models
[Serializable]
public class JsonResponseViewModel
{
public int ResponseCode { get; set; }
public string ResponseMessage { get; set; } = string.Empty;
}
public class StudentModel
{
public int Id { get; set; }
public string Name { get; set; } = string.Empty;
public string Email { get; set; } = string.Empty;
}
Step 4
Now add the GET|POST|PUT|DELETE function for the server so that we can perform operations
public class HomeController: Controller {
private readonly ILogger < HomeController > _logger;
public static List < StudentModel > students = new List < StudentModel > ();
public HomeController(ILogger < HomeController > logger) {
_logger = logger;
students = new List < StudentModel > ();
students.Add(new StudentModel() {
Id = 1, Email = "[email protected]", Name = "Ankush"
});
students.Add(new StudentModel() {
Id = 2, Email = "[email protected]", Name = "Rohit"
});
students.Add(new StudentModel() {
Id = 3, Email = "[email protected]", Name = "Sunny"
});
students.Add(new StudentModel() {
Id = 4, Email = "[email protected]", Name = "Amit"
});
}
public IActionResult Index() {
return View(students);
}
[HttpGet]
public JsonResult GetDetailsById(int id) {
var student = students.Where(d => d.Id.Equals(id)).FirstOrDefault();
JsonResponseViewModel model = new JsonResponseViewModel();
if (student != null) {
model.ResponseCode = 0;
model.ResponseMessage = JsonConvert.SerializeObject(student);
} else {
model.ResponseCode = 1;
model.ResponseMessage = "No record available";
}
return Json(model);
}
[HttpPost]
public JsonResult InsertStudent(IFormCollection formcollection) {
StudentModel student = new StudentModel();
student.Email = formcollection["email"];
student.Name = formcollection["name"];
JsonResponseViewModel model = new JsonResponseViewModel();
//MAKE DB CALL and handle the response
if (student != null) {
model.ResponseCode = 0;
model.ResponseMessage = JsonConvert.SerializeObject(student);
} else {
model.ResponseCode = 1;
model.ResponseMessage = "No record available";
}
return Json(model);
}
[HttpPut]
public JsonResult UpdateStudent(IFormCollection formcollection) {
StudentModel student = new StudentModel();
student.Id = int.Parse(formcollection["id"]);
student.Email = formcollection["email"];
student.Name = formcollection["name"];
JsonResponseViewModel model = new JsonResponseViewModel();
//MAKE DB CALL and handle the response
if (student != null) {
model.ResponseCode = 0;
model.ResponseMessage = JsonConvert.SerializeObject(student);
} else {
model.ResponseCode = 1;
model.ResponseMessage = "No record available";
}
return Json(model);
}
[HttpDelete]
public JsonResult DeleteStudent(IFormCollection formcollection) {
StudentModel student = new StudentModel();
student.Id = int.Parse(formcollection["id"]);
JsonResponseViewModel model = new JsonResponseViewModel();
//MAKE DB CALL and handle the response
if (student != null) {
model.ResponseCode = 0;
model.ResponseMessage = JsonConvert.SerializeObject(student);
} else {
model.ResponseCode = 1;
model.ResponseMessage = "No record available";
}
return Json(model);
}
}
Join the conversation! Your thoughts help the community grow.