Sử dụng jQuery Ajax trong ASP.NET MVC

Cập nhật ngày: 24/10/2021 - Đã có 13116 lượt xem bài viết này!
Sử dụng jQuery Ajax trong ASP.NET MVC
Trong bài viết này hướng dẫn sử dụng jQuery ajax với các phương thức Action sử dụng http verbs tương ứng.

Sử dụng jQuery Ajax trong ASP.NET MVC

Sử dụng jQuery Ajax trong ASP.NET MVC

Trong bài viết này hướng dẫn sử dụng jQuery ajax với các phương thức Action sử dụng http verbs tương ứng.

Địa chỉ URL trong jQuery Ajax
  • Được sử dụng truy cập thông qua trình duyệt url
  • Được sử dụng để gọi trong JQuery ajax

public JsonResult UrlResponse()     //truy cập sử dụng Url
{
    return Json(new { Name = "UrlResponse", Response = "Response from Get", Date = DateTime.Now.ToString("dd/MM/yyyy hh:mm:ss tt") }, JsonRequestBehavior.AllowGet);
}

 

Loại giao thức trong jQuery Ajax
  • Có thể chỉ sử dụng cho gọi thông qua Ajax.
  • Nếu sử dụng trình duyệt truy cập sẽ tạo ra lỗi.

[HttpGet]
public JsonResult TypedResponse()    //Lỗi nếu truy cập sử dụng Url
{
    return Json(new { Name = "TypedResponse", Response = "Response from Get", Date = DateTime.Now.ToString("dd/MM/yyyy hh:mm:ss tt") }, JsonRequestBehavior.AllowGet);
}

 

Bây giờ chúng ta sẽ bắt đầu sử dụng phương thức action trong MVC, và sử dụng JQuery Ajax gọi $.ajax.
Một số thành phần trong cách gọi ajax

1. Xác định phương thức action trong MVC được gọi trong Ajax.
Thuộc tính url trong $.ajax xác định controller và action trong MVC, theo định dạng /{controller}/{action}

Ví dụ:
 

url: ‘/User/Create’

url: ‘/User/Get/20’

Hoặc có thể sử dụng phương thức Url.Action để xác định controller và action.

url: ‘@Url.Action(“User”,”Create”)’

2. Xác định http verb sử dụng trong Ajax.
Thuộc tính type với các giá trị ‘GET/ POST/ PUT/ DELETE’ sử dụng trong Ajax tương ứng với HttpVerbs trong phương thức action MVC.

Ví dụ:

Type : “POST”

3. Xác định tham số nếu phương thức action trong MVC có sử dụng tham số.

Thuộc tính data xác định dữ liệu được truyền cho tham số trong phương thức action.

Ví dụ:
 

data: JSON.stringify({ user: { name: ‘Rintu’, email: ‘Rintu@gmial.com’ } }),

data: { name: ‘Rintu’, email: ‘Rintu@gmial.com’ },

4. Nhận dữ liệu trả về sau khi thực hiện thành công.

Thuộc tính success xác định hàm nhận dữ liệu trả về.

Ví dụ:
 

success: function (data) {

alert(data);

},

5. Nếu xảy ra lỗi, thuộc tính error xác định hàm nhận lỗi trả về.

Ví dụ:

error: function (xhr) {

alert(‘error’);

}

 

Truyền tham số cơ bản từ jQuery ajax đến phương thức action MVC

Trong UserController MVC chứa phương thức action:


[HttpGet]
public JsonResult Get(int id)
{
    return Json("Response from Get", JsonRequestBehavior.AllowGet);
}

Cách gọi phương thức action Get trong ajax:


$.ajax({
    url: '@Url.Action(“User”,”Get”),
    dataType: "json",
    type: "GET",
    contentType: 'application/json; charset=utf-8',
    data: {id:1},
    async: true,
    processData: false,
    cache: false,
    success: function (data) {
        alert(data);
    },
    error: function (xhr) {
        alert('error');
    }
});

 

Truyền tham số là đối tượng json từ jQuery ajax đến phương thức action MVC

Phương thức action Create trong UserController nhận đối tượng user làm tham số.


// POST: /User/Create
[HttpPost]
public JsonResult Create(User user)
{
    return Json("Response from Create");
}

 

Cách gọi trong jQuery ajax.

Tạo dữ liệu kiểu json trong ajax để truyền cho phương thức Create trong MVC.


/*POST*/
$.ajax({
    url: '@Url("User","Create"),
    dataType: "json",
    type: "POST",
    contentType: 'application/json; charset=utf-8',
    data: JSON.stringify({ user: { name: 'Rintu', email: 'Rintu@gmial.com' } }),
    async: true,
    processData: false,
    cache: false,
    success: function (data) {
        alert(data);
    },
    error: function (xhr) {
        alert('error');
    }
})

 

Truyền tham số phức hợp từ jQuery ajax đến phương thức action MVC

Phương thức action Edit trong UserController nhận 2 tham sô: id và đối tượng user.


[HttpPost]
public JsonResult Edit(int id, User user)
{
    return Json("Response from Edit");
}

 

Cách gọi phương thức action Edit trong jQuery ajax.


$.ajax({
    url: '/User/Edit',
    dataType: "json",
    type: "POST",
    contentType: 'application/json; charset=utf-8',
    data: JSON.stringify({ id: 100, user: {name: 'Rintu', email: 'Rintu@gmial.com'} }),
    async: true,
    processData: false,
    cache: false,
    success: function (data) {
        alert(data);
    },
    error: function (xhr) {
        alert('error');
    }
});

Xem khóa đào tạo nhân sự theo danh mục!

Xem các khóa đào tạo nhân sự