Từ 1 tới 1 trên tổng số 1 kết quả

Đề tài: Hướng dẫn sử dụng jQuery để tạo chức năng tìm kiếm trong MVC2

  1. #1
    Ngày gia nhập
    11 2007
    Nơi ở
    Biết để làm gì?
    Bài viết
    827

    Mặc định Hướng dẫn sử dụng jQuery để tạo chức năng tìm kiếm trong MVC2

    Nếu các bạn muốn tạo chức năng tìm kiếm tương tự như google, nhập keyword đến đâu thì tự động search kết quả đến đó mà ko cần phải refresh lại trang thì có thể sử dụng jQuery.
    Tôi sử dụng luôn database demo là cái MusicStore nổi tiếng trong các hướng dẫn về MVC. Tôi chỉ demo tìm kiếm album bằng title nên db của tôi cũng chỉ có 1 table Album là đủ.
    Tạo 1 project MVC2.
    Tạo folder Model, tạo 1 ADO.NET entity data model,đặt tên là MusicStore và kéo cái table trong db vào :

    Trong homecontroller tôi tạo thêm 2 action :
    Visual C# Code:
    1.         MusicStoreEntities storeDB = new MusicStoreEntities();
    2.         public ActionResult Search()
    3.         {
    4.             return View();
    5.         }
    6.  
    7.        
    8.         public ActionResult SearchResult(string s)
    9.         {
    10.             var albums = storeDB.Albums.Where(a => a.Title.Contains(s));
    11.             return PartialView(albums);
    12.         }
    Tạo các 2 view tương ứng với 2 Action trên là Search.aspx và SearchResult.ascx, lưu ý với view SearchResult.aspx thì nhớ chọn cả mục Create a partial view(.ascx).
    Ở view Search thì chỉ có 1 html input và 1 button submit, kết quả nhận được sẽ display ở partialview SearchResult.
    Source của Search.aspx như sau :
    [CODE =HTML]
    <%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>

    <asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    Search
    </asp:Content>

    <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <script type="text/javascript">
    function onSuggestion() {
    $('#keyword').keyup(function () {
    $('#key').val($('#keyword').val());
    $.get('/home/SearchResult',{s:$('#keyword').val()},
    function (data) {
    $('#result').html(data);
    });
    }
    );
    }
    </script>


    <h2>Search</h2>

    <% using(Ajax.BeginForm("SearchResult","Home",new AjaxOptions
    {
    InsertionMode=InsertionMode.Replace,
    HttpMethod="GET",
    UpdateTargetId="result"
    })){%>
    <input type="text" name="s" id="keyword" onkeyup="onSuggestion();" />
    <br />
    <input type="text" id="key" />
    <input type="submit" name="Search" />
    <%}%>

    <div id="result">
    </div>
    </asp:Content>

    [/CODE]

    Lưu ý ở hàm JS mà tôi sử dụng jQuery, Mỗi khi bắt sự kiện keyup của cái textbox thì tôi gửi 1 HTTP get request về server :
    JavaScript Code:
    1. <script type="text/javascript">
    2.     function onSuggestion() {
    3.         $('#keyword').keyup(function () {
    4.             $('#key').val($('#keyword').val());
    5.             $.get('/home/SearchResult',{s:$('#keyword').val()},
    6.                  function (data) {
    7.                 $('#result').html(data);
    8.             });
    9.         }
    10.         );
    11.     }
    12. </script>

    Cái SearchResult chỉ đơn giản là show ra kết quả, và đc render mỗi khi submit ở view Search :
    [CODE =HTML]
    <%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<IEnumerab le<SearchingDemo.Models.Album>>" %>

    <table>
    <tr>
    <th></th>
    <th>
    AlbumId
    </th>
    <th>
    GenreId
    </th>
    <th>
    ArtistId
    </th>
    <th>
    Title
    </th>
    <th>
    Price
    </th>
    <th>
    AlbumArtUrl
    </th>
    </tr>

    <% foreach (var item in Model) { %>

    <tr>
    <td>
    <%: Html.ActionLink("Edit", "Edit", new { id=item.AlbumId }) %> |
    <%: Html.ActionLink("Details", "Details", new { id=item.AlbumId })%> |
    <%: Html.ActionLink("Delete", "Delete", new { id=item.AlbumId })%>
    </td>
    <td>
    <%: item.AlbumId %>
    </td>
    <td>
    <%: item.GenreId %>
    </td>
    <td>
    <%: item.ArtistId %>
    </td>
    <td>
    <%: item.Title %>
    </td>
    <td>
    <%: String.Format("{0:F}", item.Price) %>
    </td>
    <td>
    <%: item.AlbumArtUrl %>
    </td>
    </tr>

    <% } %>

    </table>

    <p>
    <%: Html.ActionLink("Create New", "Create") %>
    </p>

    [/CODE]

    Lưu ý là ở Site.Master các bạn phải báo mấy cái script cần thiết :
    ASP.NET Code:
    1. <script src="../../Scripts/MicrosoftAjax.js" type="text/javascript"></script>
    2.     <script src="../../Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>
    3.     <script src="../../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    kết quả các bạn sẽ đc như sau :


    Cái này chỉ là demo nên rất nhiều khuyết điểm,nếu mà nhiều bản ghi thì phải tạo rất nhiều request mỗi khi keyup, các bạn có thể nghiên cứu thêm để đưa ra các hướng giải quyết,mục đích của tôi chỉ là demo cho việc sử dụng jQuery, AJAX trong việc tạo 1 chức năng tìm kiếm đơn giản. DB và code demo đính kèm ở cuối bài
    Attached Files Attached Files
    Cánh Chym ứ mỏi

Các đề tài tương tự

  1. Cần thuê coder am hiểu lập trình khung kiến trúc MVC, jquery, lập trình web java
    Gửi bởi quainhanxanh trong diễn đàn Việc làm IT(tự do)
    Trả lời: 0
    Bài viết cuối: 14-12-2012, 09:10 PM
  2. Xây dựng chức năng tìm kiếm ưu tiên kết quả như google trong C#?
    Gửi bởi trungak0902 trong diễn đàn Thắc mắc lập trình C#
    Trả lời: 2
    Bài viết cuối: 13-04-2012, 10:10 PM
  3. Lỗi khi tạo cơ sở dữ liệu trong ASP MVC2
    Gửi bởi bimtocsieuquay trong diễn đàn Thắc mắc lập trình ASP.NET
    Trả lời: 8
    Bài viết cuối: 28-06-2011, 10:49 AM
  4. Lập trình C++ mất tích } trong chức năng tìm kiếm (SinhVien *)
    Gửi bởi bigghost_1610 trong diễn đàn Thắc mắc lập trình C/C++/C++0x
    Trả lời: 8
    Bài viết cuối: 10-06-2011, 11:05 AM
  5. from tìm kiếm với autocomplte jquery ! Xin giúp dùm
    Gửi bởi langtuvotinh773 trong diễn đàn Thắc mắc lập trình ASP.NET
    Trả lời: 1
    Bài viết cuối: 25-05-2011, 09:52 AM

Quyền hạn của bạn

  • Bạn không thể gửi đề tài mới
  • Bạn không thể gửi bài trả lời
  • Bạn không thể gửi các đính kèm
  • Bạn không thể chỉnh sửa bài viết của bạn