by oclockvn at 05:35 PM 09/28/2016

Sử dụng ajax trong ASP.NET MVC - P2

Trong phần này, mình sẽ demo 2 trường hợp thường xuyên sử dụng ajax: xóa và search.

1. xóa trên table sử dụng ajax

Mình có 1 table và muốn xóa 1 sản phẩm trên đó. Nếu xóa thành công thì gỡ sản phẩm ra khỏi danh sách.

view ui

Trong Controller

ajax action result

Hiển thị lên View

view

Trong View mình sử dụng 1 button dùng để xóa sản phẩm, kết hợp với html5 data-* attribute và Url helper để sinh ra đường dẫn sử dụng cho việc gọi ajax đơn giản hơn.

Javascript xử lý xóa

js handle

Giải thích script:

43. $btn là jquery object tham chiếu tới button được bấm. 45. hiện dialog xác nhận xóa

confirm dialog

49. gọi ajax với các tham số (như trong comment) 53. nếu kết quả trả về thỏa điều kiện, tìm <tr> và gỡ ra khỏi giao diện. 65. nếu có lỗi phát sinh (500, 404..) -> thông báo.

Và Action Delete trong Controller

controller action

Trong Action Delete, mình sử dụng kiểu anonymous của C# để trả về và quy định nếu thành công thì code = 1. Thông qua hàm Json (return JsonResult), anonymous type sẽ được serialize thành json khi trả về thông qua response

json

Thử kết quả

result

Đúng như mong đợi, product được gỡ ra khỏi giao diện mà trang web vẫn không load lại.

Trên đây là 1 ví dụ điển hình cho việc xóa sản phẩm mà không load lại trang, 1 vài chú ý khi bạn sử dụng như sau:

  1. nếu là button, có thể sử dụng data-* attribute để thêm thuộc tính mà mình muốn cho thẻ.
  2. sử dụng UrlHelper để tận dụng sức mạnh của MVC.
  3. nếu là post request, trong Action được thêm attribute [HttpPost] và option là AjaxRequestBehavior.DenyGet
  4. đa số các trường hợp chỉ cần sử dụng kiểu anonymous (nặc danh) của C# để trả về mà không cần tạo thêm class.
  5. Cần xử lý cả success callback và error callback để bắt những trường hợp không mong muốn xảy ra.

2. search sử dụng ajax

Có rất nhiều cách để làm việc này (không sử dụng các js framework), 2 cách đơn giản nhất đó là trả về 1 PartialView thông qua return PartialView() hoặc trả về 1 json array thông qua return Json(). Mình sẽ giới thiệu cách sử dụng JsonResult.

Thêm 1 input để search trong View

input search

Trong Search Action

search action

Trong script

search script

Ở đây thay vì sử dụng sự kiện keyup để search, mình sử dụng thư viện type watch, type watch sẽ gọi hành động callback sau 1 khoảng thời gian (500ms) người dùng không gõ để tránh request liên lục (không cần thiết). Do vậy hành động search sẽ được đặt trong hàm callback của TypeWatch.

Phần ajax xử lý

ajax handle

Trong Search Action, mình trả về 1 json object và nhận bằng resp ở success callback, do đó resp.products chính là mảng các sản phẩm được trả về sau khi search.

Với mỗi object duyệt lần lượt từ mảng products trả về, build 1 chuỗi html tương ứng với 1 thẻ <tr>

Cuối cùng, xóa html hiện tại ở <tbody> và append template mới vào.

Kết quả

result

Nếu sử dụng PartialView, đơn giản hơn là bạn append nguyên partial view result đó vào tbody là xong.

kết

Hy vọng với 2 ví dụ trên, bạn có thể hiểu rõ hơn cách sử dụng ajax trong asp.net mvc và áp dụng linh hoạt vào các dự án của mình.

relate posts
by {{relate.UpdatedBy}} at 02/21/2018

{{relate.Title}}

  • {{relate.TotalComment}}
  • {{relate.View}}
  • {{relate.AveragePoint}}
[{{postCtrl.comments.length}}] comments
all comments {{ postCtrl.isHiddenComment ? 'show comments' : 'hide comments' }}
what do you want to say?

(*) markdown supported with html disabled