آموزش جستجو در لیست آبشاری با Ajax بر اساس نام در Asp.Net

در این پست میخواهیم چگونگی جستجو بر اساس مطالب از داخل لیست آبشاری با استفاده از Ajax در Asp.Net را آموزش دهیم.

گاهی براس سهولت جستجو مطالب از میان انبوه اطلاعات میتوانیم از لیست آبشاری استفاده کنیم که سهولت و سرعت جستجو را بالا می برد حالا اگر یک امکانی فراهم آوریم تا در کنار این لیست یک قسمت هم برای نوشتن نام مطلب مورد نظر هم باشد خیلی سریع تر جستجو انجام میشود. امروز میخواهیم چگونگی ایجاد جستجو بر اساس وارد کردن نام مورد نظر در یک لیست آبشاری را باهم یاد بگیریم.

ابتدا یک پروژه از نوع Asp.Net ایجاد می کنیم و سپس یک فرم به آن اضافه می نماییم.

برای اینکه بتوانیم از Ajax استفاده کنیم نیاز به کتابخانه  داریم پس آن را به رفرنس پروژه اضافه میکنیم.

سپس کد زیر را به فرم اضافه میکنیم.

<asp:toolkitscriptmanager ID="ToolkitScriptManager1" runat="server"></asp:toolkitscriptmanager>

در ادامه فرم مورد نظر را به صورت زیر کدنویسی میکنیم.

<asp:DropDownList ID="DropDownList1" runat="server" AppendDataBoundItems="True" 
     DataTextField="country" DataValueField="country" Height="33px"  Width="50%"
     style="margin-left: 267px">
     <asp:ListItem>--انتخاب کنید--</asp:ListItem>
</asp:DropDownList>


<asp:ListSearchExtender ID="DropDownList1_ListSearchExtender" runat="server" 
   Enabled="True" PromptPosition="Top" PromptText=" حرف اول شهر مورد نظر را وارد کنید" TargetControlID="DropDownList1">
</asp:ListSearchExtender>

نکته : از طرق ListSearchExtender میتوانیم این امکان تایپ را فراهم آوریم تا بر اساس متن دلخواه کاربر مطلب پیمایش شود.

به قسمت کلاینت فرم می رویم و کد زیر را برای اتصال به دیتابیس می نویسیم.

   public void refreshdata()
    {

     SqlConnection con = new SqlConnection("Data Source=.;Initial Catalog=Search;Integrated Security=True");

     SqlCommand cmd = new SqlCommand("select * from tbl_data", con);
     SqlDataAdapter sda = new SqlDataAdapter(cmd);
     DataTable dt = new DataTable();
     sda.Fill(dt);

     DropDownList1.DataSource = dt;
     DropDownList1.DataBind();

  }

در انتها پایگاه داده ای به صورت زیر ایجاد می کنیم.

CREATE TABLE [dbo].[tbl_data]
(
    [id] INT NOT NULL PRIMARY KEY IDENTITY  ,
    [country] NVARCHAR (50) NOT NULL
 
)

نتیجه کار: