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');
}
});
Bạn đang muốn tìm kiếm 1 công việc với mức thu nhập cao.
✅ Hoặc là bạn đang muốn chuyển đổi công việc mà chưa biết theo học ngành nghề gì cho tốt.
✅ Giới thiệu với bạn Chương trình đào tạo nhân sự dài hạn trong 12 tháng với những điều đặc biệt mà chỉ có tại IMIC và đây cũng chính là sự lựa chọn phù hợp nhất dành cho bạn:
👉 Thứ nhất: Học viên được đào tạo bài bản kỹ năng, kiến thức chuyên môn lý thuyết, thực hành, thực chiến nhiều dự án và chia sẻ những kinh nghiệm thực tế từ Chuyên gia có nhiều năm kinh nghiệm dự án cũng như tâm huyết truyền nghề.
👉 Thứ hai: Được ký hợp đồng cam kết chất lượng đào tạo cũng như mức lương sau tốt nghiệp và đi làm tại các đối tác tuyển dụng của IMIC. Trả lại học phí nếu không đúng những gì đã ký kết.
👉 Thứ ba: Cam kết hỗ trợ giới thiệu công việc sang đối tác tuyển dụng trong vòng 10 năm liên tục.
👉 Thứ tư: Được hỗ trợ tài chính với mức lãi suất 0 đồng qua ngân hàng VIB Bank.
👉 Có 4 Chương trình đào tạo nhân sự dài hạn dành cho bạn lựa chọn theo học. Gồm có:
1) Data Scientist full-stack
2) Embedded System & IoT development full-stack
3) Game development full-stack
4) Web development full-stack
✅ Cảm ơn bạn đã dành thời gian lắng nghe những chia sẻ của mình. Và tuyệt vời hơn nữa nếu IMIC được góp phần vào sự thành công của bạn.
✅ Hãy liên hệ ngay với Phòng tư vấn tuyển sinh để được hỗ trợ về thủ tục nhập học.
✅ Chúc bạn luôn có nhiều sức khỏe và thành công!