Tìm hiểu về Ajax Helpers trong Asp.Net MVC

Bên cạnh việc sử dụng Ajax với jQuery thì Asp.Net MVC còn có Ajax Helper method hỗ trợ rất tốt cho lập trình viên .Net xây dựng các chức năng xử lý bất đồng bộ (asynchronously) một cách dễ dàng và nhanh chóng.

Trong bài này mình sẽ làm một số ví dụ nhỏ về cách sử dụng Ajax Helpers trong Asp.Net MVC5

Ajax helpers yêu cầu bạn cần phải có thư viện jquery.unobstrusive.ajax.js  trong project, bạn chạy command nuget dưới đây để cài đặt jquery.unobstrusive.ajax.js  vào project

Install-Package Microsoft.jQuery.Unobtrusive.Ajax

Sau khi cài đặt xong, ta sẽ thấy thư viện javascript jquery.unobstrusive.ajax.js xuất hiện trong project

 

Trong _Layout.cshtm, bạn cần kéo thư viện này nằm dưới thư viện jquery.js

@Scripts.Render("~/bundles/jquery")
<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>

Trong bài này mình sẽ làm ví dụ về việc sử dụng các tính năng Ajax để hiển thị dữ liệu sản phẩm (Product) lên view, do vậy đầu tiên cần tạo một Product class (~/Model/Product.cs)

namespace AjaxInMvc.Models
{
    public class Product
    {
        public string ProdCode
        {
            get;
            set;
        }
        public string ProdName
        {
            get;
            set;
        }
        public int ProdQty
        {
            get;
            set;
        }
    }
}

Trong AjaxController.cs viết hàm khởi tạo dữ liệu (Các bạn có thể load dữ liệu từ database)

public List<Product> InitData()
        {
            List<Product> prodList = new List<Product>();

            Product p1 = new Product { ProdCode = "P001", ProdName = "Mobile", ProdQty = 75 };
            Product p2 = new Product { ProdCode = "P002", ProdName = "Laptop", ProdQty = 125 };
            Product p3 = new Product { ProdCode = "P003", ProdName = "Netbook", ProdQty = 100 };
            prodList.Add(p1);
            prodList.Add(p2);
            prodList.Add(p3);

            return prodList;
        }

 

Ajax Helpers có hai method là @Ajax.BeginForm và @Ajax.LinkAction, mình sẽ làm ví dụ cụ thể về cách sử dụng từng phương thức này.

 

1. @Ajax.ActionLink

Khi người dùng click vào 1 link trên website thông thường ta sẽ điều hướng sang 1 page khác, lúc này ta sẽ sử dụng @HTML.ActionLink.

Tuy nhiên sẽ có lúc bạn không muốn redirect sang trang khác, thay vào đó khi người dùng click vào link, bạn muốn ở lại trang hiện tại và hiện ra 1 số thông tin cần thiết, lúc này @Ajax.ActionLink sẽ hỗ trợ chúng ta xử lý việc này.

Bây giờ ta sẽ sử dụng @Ajax.ActionLink để làm chức năng load toàn bộ dữ liệu Products ra View.

Trong ~/Views/Ajax/Index.cshtml ta thêm @Ajax.ActionLink

<h3>Ajax.ActionLink </h3>
<p>
    @Ajax.ActionLink("Get All Product", "GetAllProducts", "Ajax", new AjaxOptions
{
    UpdateTargetId = "divResultAll",
    OnBegin = "",
    InsertionMode = InsertionMode.Replace,
    HttpMethod = "GET",
    LoadingElementId = "loadingElement2",
    OnSuccess = "",
    Confirm = "Do you want to get all product?"
}, new { @class = "btn btn-warning" })
</p>
@*Product List Display Here*@
<div id="loadingElement2" style="display:none; color:#f60">
    Loading products...
</div>
<div id="divResultAll"></div>

Trong ~/Controllers/AjaxController.cs ta thêm hàm GetAllProducts()  sẽ lấy dữ liệu Products từ hàm khởi tạo đã viết ở trên và trả dữ liệu về một PartialView

public PartialViewResult GetAllProducts()
        {
            System.Threading.Thread.Sleep(3000); //DEMO ONLY
            List<Product> prodList = InitData();
            return PartialView("_GetAllProducts", prodList);
        }

Trong ~/Views/Ajax/_GetAllProducts.cshtml

@model List<AjaxInMvc.Models.Product>
<table class="table">
    <tr>
        <th>Product Code</th>
        <th>Product Name</th>
        <th>Product Quality</th>
    </tr>
    @foreach (var item in Model)
    {
        <tr>
            <td>@item.ProdCode</td>
            <td>@item.ProdName</td>
            <td>@item.ProdQty</td>
        </tr>
    }
</table>

Vậy là đã xong, khi bạn chạy ứng dụng, click vào "Get All Product" dữ liệu sẽ được trả về mà trang không bị load lại

Trong tham số AjaxOption của @Ajax.ActionLink có một số option ta cần phải biết:

  • AllowCache: Option này chỉ định rằng bạn có muốn sử dụng cache request này bởi trình duyệt không, mặc định giá trị là false
  • Confirm: Option này cho phép hiện dialog confirm trước khi request được submit
  • HttpMethod: Cho phép chỉ định HTTP request là GET hay POST, mặc định là POST
  • InsertionMode: Chỉ định việc dữ liệu trả về View sau khi xử lý thành công (InsertAfter, InsertBefore, Replace, ReplaceWith), giá trị mặc định là Replace
  • LoadingElementDuration: Chỉ định khoảng thời gian hiểu ứng loading hiển thị theo miliseconds
  • LoadingElementId: Chỉ định element nào hiển thị ra trong quá trình chờ xử lý (thường là ảnh gif loading, trong ví dụ này mình làm 1 dòng text đơn giản là "Loading product...")
  • OnBegin: Chỉ định tên hàm javascript nào sẽ được gọi trước khi submit ajax, các bạn có thể dùng sự kiện này để gọi hàm javascript validate nếu cần
  • OnComplete: Chỉ định tên hàm javascript nào sẽ được gọi khi dữ liệu được trả về từ Ajax Response.
  • OnFailure: Chỉ định tên hàm javascript khi Ajax return error
  • OnSuccess: Chỉ định têm hàm javascript khi Ajax xử lý thành công
  • UpdateTargetId: Chỉ định rõ ElementId nào sẽ được update dữ liệu trả về từ Ajax (Trong ví dụ này là thẻ  #divResultAll sẽ nhận dữ liệu trả về tử PartialView _GetAllProduct.cshtml)

 

2. @Ajax.BeginForm

Bây giờ mình sẽ làm một chức năng tìm sản phầm theo mã sản phẩm bằng cách sử dụng Ajax.BeginForm

Trong ~/Views/Ajax/Index.cshtml

<h3>1. Ajax.BeginForm</h3>

@using (Ajax.BeginForm("ShowDetails", "Ajax", new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "divResult", InsertionMode = InsertionMode.Replace, LoadingElementId = "loadingElement" }))
{
    <table>
        <tr>
            <td>
                @Html.Editor("ProductCode", new { htmlAttributes = new { @class = "form-control", @placeholder = "Enter Product Code" } })
            </td>
            <td>
                <button type="submit" class="btn btn-primary">Get</button>
            </td>
        </tr>
    </table>
}

Trong ~/Controller/AjaxController.cs ta thêm hàm ShowDetails() sẽ lấy dữ liệu chi tiết của một Product theo ProductCode

[HttpPost]
        public PartialViewResult ShowDetails()
        {
            System.Threading.Thread.Sleep(3000); //DEMO ONLY
            string code = Request.Form["ProductCode"];
            var products = InitData();
            Product objView = products.Where(x => x.ProdCode == code).FirstOrDefault();
            return PartialView("_ShowDetails", objView);
        }

Hàm ShowDetails() sẽ trả dữ liệu về một PartialView _ShowDetails

@model AjaxInMvc.Models.Product

<div>
    <h4>Product Detail</h4>
    <hr />
    @if (Model == null)
    {
        <p class="text-danger">Invalid product code</p>
    }
    else
    {
        <table>
            <tr>
                <td>Product Code:</td>
                <td>
                    @Model.ProdCode
                </td>
            </tr>
            <tr>
                <td>Product Name:</td>
                <td>
                    @Model.ProdName
                </td>
            </tr>
            <tr>
                <td>Product Quality:</td>
                <td>
                    @Model.ProdQty
                </td>
            </tr>
        </table>
    }
    
</div>

Vậy là xong, khi chúng ta nhập mã sản phẩm vào textbox và click button Get, dữ liệu sẽ được trả về

 

Ajax là một tính năng rất quan trọng trong ứng dụng web, hiểu và nắm được nguyên lý hoạt động sẽ giúp chúng ta xây dựng được những ứng dụng web với trải nghiệm người dùng mượt mà hơn :)

Các bạn có thể download ví dụ của bài viết dưới đây:

Download Source

Related Post


Export Excel cực dễ với ClosedXML
Friday, July 21, 2017
ClosedXML là một thư viện hỗ trợ lập trình viên .Net tạo ra các file Excel 2007+ để làm report báo cáo một cách dễ dàng và nhanh chóng, ClosedXML giúp lập trình viên làm việc với excel theo các tiếp cận hướng đối tượng mà không cần phải quan tâm quá nhiều đến cấu trúc quá phức tạp của XML.
Xây dựng Autocomplete Textbox trong Asp.Net MVC với Jquery TypeHead
Saturday, July 8, 2017
Ở ví dụ này mình sẽ chia sẻ với các bạn về cách xây dựng tính năng Autocomplete Texbox trên Asp.Net MVC5 với JqueryTypeHead. Với sự hỗ trợ của JqueryTypeHead chúng ta có thể xây dựng được một tính năng gọi ý tìm kiếm nâng cao, cho phép với mỗi từ khóa người dùng gõ trên ô tìm kiếm, sẽ đưa ra được một danh sách gợi ý phân loại một cách rất trực quan và rõ ràng...
Search

Đăng ký nhận bài mới


Category

Blog Archive