Thêm phương thức Search (tìm kiếm) và view

Một phần của tài liệu Tạo ứng dụng ASP mvc (Trang 44 - 52)

có thể truy xuất action này thông qua địa chỉ /Movies/Search. Khi triệu gọi, ứng dụng sẽ trả về một form cho phép bạn nhập nội dung cần tìm kiếm tác vụ.

Đầu tiên bạn cần thêm action Search vào lớp TaskController, phương thức Search sẽ trả về một view

có ô tìm kiếm:

public ActionResult Search(string criteria) {

var tasks = from t in db.Tasks select t; if(!string.IsNullOrEmpty(criteria)) {

tasks = tasks.Where(x => x.Content.Contains(criteria)); }

return View(tasks); }

Câu lệnh đầu tiên sẽ tạo ra một câu truy vấn LINQ trả về tất cả các tác vụ, sau đó câu lệnh tiếp theo sẽ kiểm tra xem thử nội dung tìm kiếm có tồn tại không, nếu có thì sẽ cập nhật câu truy vấn để tìm các tác vụ nội dung chứa nội dung tìm kiếm. Điều bạn cần lưu ý đó là tại thời điểm này, chưa có bất kỳ nội dung nào được lấy lên từ database, khi chỉ khi bạn duyệt qua các phần từ của đối tượng tasks (ở View sẽ là Model) hoặc gọi tasks.ToList() thì lúc đó câu truy vấn (query) sẽ được chuyển thành câu lệnh SQL và đối tượng DbContext sẽ thực thi câu lệnh để lấy các task lên.

Bây giờ bạn có thể tạo view Search.cshtml cho action vừa mới tạo. Nhấp chuột phải lên phương thức Search và click chọn AddView, và sau đó sẽ xuất hiện hộp thoại AddView, bạn hãy chọn như hình bên dưới:

Bạn cần phải tạo ra một strongly-typed view và dạng được tạo ra là list để hiển thị danh sách các tác

vụ. View được tạo ra có mã như sau:

@model IEnumerable<ToDoApp.Models.Task> @{ ViewBag.Title = "Search"; } <h2>Search</h2> <p>

@Html.ActionLink("Create New", "Create")

</p> <table> <tr> <th> Content </th>

<th> CreateDate </th> <th> DueDate </th> <th></th> </tr>

@foreach (var item in Model) { <tr> <td> @Html.DisplayFor(modelItem => item.Content) </td> <td> @Html.DisplayFor(modelItem => item.CreateDate) </td> <td> @Html.DisplayFor(modelItem => item.DueDate) </td> <td>

@Html.ActionLink("Edit", "Edit", new { id=item.Id }) |

@Html.ActionLink("Details", "Details", new { id=item.Id }) | @Html.ActionLink("Delete", "Delete", new { id=item.Id }) </td>

</tr>

}

</table>

Kết quả là tất cả các task đều được hiển thị. Nếu bạn điều hướng đến /Task/Search?criteria=ASP, bạn

Nhưng nếu bạn muốn URL phải là /Task/Search/ASP thay vì là /Task/Search?criteria=ASP để URL trở nên thân thiện hơn. Nếu bạn đã đọc các bài trước, bạn sẽ biết rằng chúng ta có một tuyến mặc định là /{Controller}/{Action}/{id}, nghĩa là, nếu bạn thay tham số criteria bạn có thể áp dụng theo tuyến này, nhưng ngoài ra, bạn vẫn còn một cách khác để áp dụng tuyến nói trên, đó là sử dụng thuộc tính

[Bind()] như sau:

Với thuộc tính [Bind(Prefix = “id”)], tham số criteria được hiểu thành tham số có tên là id khi ánh xạ URL của request với bảng định tuyến (routing table). Và hệ quả là bạn có thể sử dụng URL thân thiện

hơn:

Có một phần còn thiếu trên view đó là hộp văn bản để có thể nhập vào nội dung cần tìm kiếm, và vì vậy bạn sẽ thêm một HTML Form vào view ngay bên dưới dòng @Html.ActionLink("Create New",

"Create") như sau:

@using (Html.BeginForm()) {

<p>

Title: @Html.TextBox("criteria")

<input type="submit" value="Filter" />

</p>

}

Câu lệnh using(Html.BeginForm()){…} giúp tạo ra mã HTML của một HTML Form. Câu lệnh @Html.TextBox(“criteria”) giúp tạo ra một phần tử HTML là <input type=”text” id=”criteria” name=”criteria” />, bạn nên nhớ rằng, thuộc tính name của các thẻ <input..> sẽ được dùng để ánh

xạ với các tham số của phương thức action, nên nếu các bạn không sử dụng các phương thức của đối tượng Html thì bạn đừng quên thuộc tính name.

Tới lúc này bạn hãy bỏ thuộc tính [Bind(Prefix = “id”)] ở tham số của phương thức Search của TaskController, nếu bạn vẫn để thuộc tính đó thì name của text box mà bạn tạo ra phải là “id”, và chúng ta không muốn nhầm hiểu đó là một khóa hay là thuộc tính duy nhất. Sau khi đã loại bỏ thuộc tính nói trên, hãy biên dịch và chạy ứng dụng, hãy đến địa chỉ /Task/Search và điền vào text box giá trị là “ASP” và sau đó hãy nhấn chuột vào nút Filter. Khi nhấn chuộc vào nút nhấn này, một request dạng POST sẽ được gởi lên server với tham số criteria có giá trị là “ASP”, và sau đó sẽ trả về

Đến đây bạn đã phần nào hoàn thành action Search và bạn sẽ cùng tôi học cách cập nhật Model và

database trong bài học tiếp theo.

Happy coding!

Một phần của tài liệu Tạo ứng dụng ASP mvc (Trang 44 - 52)