(How to create search box in Asp.net using Bootstrap) – Với mỗi danh sách quản lý thông tin, người lập trình thường cho phép người sử dụng tìm kiếm nhanh bằng cách bổ xung thêm Textbox và Button trên danh sách đó. Chỉ cần gõ từ khóa vào Textbox và kích Button là danh sách các kết quả sẽ hiển thị phù hợp với từ khóa đưa vào. Chức năng này giúp người sử dụng dễ dàng và nhanh chóng hơn khi cần tìm kiếm thông tin để xem hoặc sửa. Nếu như chỉ sử dụng nguyên Control Textbox và Button vẫn có thể xử lý được yêu cầu tuy nhiên xét về mặt thẩm mỹ thì chưa đạt yêu cầu. Bài viết dưới đây sẽ hướng dẫn các bạn các tạo Search Box sử dụng bootstrap. Và sau khi sử dụng các thuộc tính có sẵn trong bootstrap và bổ xung thêm thuộc tính mới Search Box trông sẽ đẹp hơn, thân thiện hợn với người sử dụng.
- B1: Tạo Project trong Microsoft Visual Studio 2010
- B2: Download toàn bộ thư viện Bootstrap tại đây
Sau khi tải về, bạn sẽ có một file Zip. Tiến hành giải nén ta có một thư mục có tên bootstrap.
- B3: Copy file bootstrap.css vào thư mục styles
- B5: Download file search.gif và Copy vào thư mục Images trong thư mục Styles
- B6: Mở file Site.Master dạng HTML và bổ xung đoạn mã phía dưới trong thẻ Head
- B1: Tạo Project trong Microsoft Visual Studio 2010
- B2: Download toàn bộ thư viện Bootstrap tại đây
Sau khi tải về, bạn sẽ có một file Zip. Tiến hành giải nén ta có một thư mục có tên bootstrap.
- B3: Copy file bootstrap.css vào thư mục styles
- B4: Tạo file Button.css có nội dung phía dưới và Copy vào thư mục Styles trong Project vừa tạo.
.icon-searchbox {
background-image: url(Images/Icon/search.gif);
background-position: centercenter;
height: 16px;
width: 16px;
}
- B5: Download file search.gif và Copy vào thư mục Images trong thư mục Styles
- B6: Mở file Site.Master dạng HTML và bổ xung đoạn mã phía dưới trong thẻ Head
<head id="Head1" runat="server">
<title>Creating a search box in Asp.net using Bootstrap</title>
<link href="Styles/Site.css"rel="stylesheet"type="text/css"/>
<link href="Styles/bootstrap.css"rel="stylesheet"type="text/css"/>
<link href="Styles/Button.css"rel="stylesheet"type="text/css"/>
<asp:ContentPlaceHolderID="HeadContent"runat="server">
</asp:ContentPlaceHolder>
</head>
- B7: Mở file Default.aspx dưới dạng HTML và nhập mã HTML
C# Code
<%@ PageTitle="Creating a search box in Asp.net using Bootstrap" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="CreatingSearchBox._Default" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<div class="row_search">
<div class="input-group">
<asp:textbox id="txtKeyword"Width="180px"CssClass="form-control"runat="server"></asp:textbox>
<span class="input-group-btn">
<asp:LinkButton ID="cmdQuickSearch"CssClass="btn btn-default" CausesValidation="false" runat="server">
<spanclass="icon-searchbox"></span>
</asp:LinkButton>
</span>
</div>
</div>
</asp:Content>VB.NET Code
<%@ PageTitle="Creating a search box in Asp.net using Bootstrap" Language="vb" MasterPageFile="~/Site.Master" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="CreatingSearchBox._Default" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<div class="row_search">
<div class="input-group">
<asp:textbox id="txtKeyword"Width="180px"CssClass="form-control"runat="server"></asp:textbox>
<span class="input-group-btn">
<asp:LinkButton ID="cmdQuickSearch"CssClass="btn btn-default" CausesValidation="false" runat="server">
<spanclass="icon-searchbox"></span>
</asp:LinkButton>
</span>
</div>
</div>
</asp:Content>
Như vậy là chúng ta xây dựng xong Search Box có sử dụng các thư viện của bootstrap rồi đó.
Chúc các bạn thành công!
Quang Bình
0 comments Blogger 0 Facebook
Post a Comment