در این مقاله به بررسی نحوه افزودن امکان کمینه و بیشینه نمودن محصولات براساس قیمت آن ها در ASP.NET می پردازیم. این امکان توسط کاربر امکان پذیر است.

در اینجا با ایجاد یک برنامه کاربردی در محیط وب برای شما شرح خواهیم که چگونه با استفاده از کنترل ASP.Net AJAX MultiHandleSliderExtender که از امکانات کتابخانه ASP.Net AjaxControlToolkit در #C است، می توانیم محصولات موجود در پایگاه داده را براساس قیمت آن ها کمینه و بیشینه نماییم.

پایگاه داده:

در ابتدای کار جدولی با جزئیات زیر با نام Products در پایگاه داده ایجاد کنید. این جدول جزئیات مربوط به هر محصول را در خود ذخیره می نماید.

یک برنامه کاربردی تحت وب ایجاد کنید و یک وب فرم به آن بیافزایید،

کدهای HTML:

دستورات HTML شامل یک ASP.Net AJAX UpdatePanel به همراه یک کنترل ASP.Net AJAX UpdateProgress مرتبط به آن است. ASP.Net AJAX UpdatePanel متشکل شده از یک Label، یک ASP.Net AJAX MultiHandleSliderExtender و یک TextBox، دو عدد HiddenField، یک LinkButton پنهان و یک کنترل DataList است.

ID در TextBox به عنوان TargetControlID تنظیم می شود. و همچنین ID مربوط به HiddenField ها نیز به عنوان MultiHandleSliderTarget برای ASP.Net AJAX MultiHandleSliderExtender تنظیم شده است.

ASP.Net AJAX MultiHandleSliderExtender با مدیریت رویداد OnClientDragEnd مشخص شده است. و زمانی که Slider تغییر کند، موجب رویداد Click در LinkButton می شود.

<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
    <ProgressTemplate>
        <div class="modal">
            <div class="center">
                <img alt="" src="loader.gif" />
            </div>
        </div>
    </ProgressTemplate>
</asp:UpdateProgress>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <div style="margin: 10px">
            <asp:Label ID="lblSliderValue" runat="server" />
            <asp:MultiHandleSliderExtender ID="MultiHandleSliderExtender1" runat="server" TargetControlID="txtSlider"
                Minimum="100" Maximum="600" Increment="1" RaiseChangeOnlyOnMouseUp="true" EnableRailClick="false"
                Length="600" OnClientDragEnd="OnClientDragEnd">
                <MultiHandleSliderTargets>
                    <asp:MultiHandleSliderTarget ControlID="hfStart" />
                    <asp:MultiHandleSliderTarget ControlID="hfEnd" />
                </MultiHandleSliderTargets>
            </asp:MultiHandleSliderExtender>
            <asp:HiddenField ID="hfStart" runat="server" />
            <asp:HiddenField ID="hfEnd" runat="server" />
            <asp:TextBox ID="txtSlider" runat="server"></asp:TextBox>
            <asp:LinkButton ID="lnkSliderChanged" OnClick="SliderChanged" runat="server" />
            <script type="text/javascript">
                function OnClientDragEnd(sender, args) {
                    document.getElementById("<%=lnkSliderChanged.ClientID %>").click();
                }
            </script>
        </div>
        <br />
        <hr />
        <asp:DataList ID="dlProducts" runat="server" RepeatLayout="Table" RepeatColumns="3"
            CellPadding="2" CellSpacing="20">
            <ItemTemplate>
                <table class="item" cellpadding="0" cellspacing="0" border="0">
                    <tr>
                        <td align="center" class="header">
                            <span class="name">
                                <%# Eval("Name") %></span>
                        </td>
                    </tr>
                    <tr>
                        <td align="center" class="body">
                            <asp:Image ID="Image1" ImageUrl='<%# Eval("ProductId", "~/images/{0}.png")%>' runat="server"
                                CssClass="image" />
                        </td>
                    </tr>
                    <tr>
                        <td class="footer" align="center">
                            <span class="button">
                                <%# Eval("Price") %></span>
                        </td>
                    </tr>
                </table>
            </ItemTemplate>
        </asp:DataList>
    </ContentTemplate>
</asp:UpdatePanel>

فضاهای نام:

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

using System.Data;
using System.Data.SqlClient;
using System.Configuration;

نمایش ASP.Net AJAX MultiHandleSliderExtender و مقداردهی DataList:

در کنار رویداد Page Load، تابع BindDataList اجرا می شود. در کنار تابع BindDataList، در ابتدا مقادیر HiddenField ها گرفته می شوند و به عنوان مقادیر متغیرهای شروع و پایان تنظیم می شوند. در ابتدا مقادیر HiddenField ها خالی هستند و در نتیجه مقادیر شروع و پایان متغیرها صفر در نظر گرفته شده اند.

استفاده از مقادیر شروع و پایان متغیرهای لیست محصولات از سمت پایگاه داده گرفته شده برای پر کردن کنترل DataList مورد استفاده قرار می گیرد.

در امتداد رکوردهای محصولات موجود در پایگاه داده، مقادیر کمینه و بیشینه محصولات به پایگاه داده وصل است و این مقادیر با توجه به HiddenFields تنظیم می شوند.

زمانی که Slider تغییر کرد، رویداد OnClientDragEnd در ASP.Net AJAX MultiHandleSliderExtender موجب ایجاد مدیریت رویداد SliderChanged شده و تابع BindDataList اجرا می شود.

در این دستورات، HiddenField ها دارای مقادیر Slider شروع و پایان هستند و این مقادیر برای دریافت رکوردهای فیلتر شده محصولات براساس تنوع قیمت های انتخاب شده در ASP.Net AJAX MultiHandleSliderExtender مورد استفاده قرار می گیرند.

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        this.BindDataList();
    }
}
 
protected void SliderChanged(object sender, EventArgs e)
{
    this.BindDataList();
}
 
private void BindDataList()
{
    string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    int start = !string.IsNullOrEmpty(Request.Form[hfStart.UniqueID]) ? int.Parse(Request.Form[hfStart.UniqueID]) : 0;
    int end = !string.IsNullOrEmpty(Request.Form[hfEnd.UniqueID]) ? int.Parse(Request.Form[hfEnd.UniqueID]) : 0;
    lblSliderValue.Text = string.Format("Rs. {0} - Rs. {1}", start, end);
    using (SqlConnection con = new SqlConnection(constr))
    {
        string query = "SELECT * FROM Products WHERE (Price BETWEEN @Start AND @End) OR (@Start = 0 AND @End = 0);";
        query += "SELECT MIN(Price) [Min], MAX(Price) [Max] FROM Products";
        using (SqlCommand cmd = new SqlCommand(query))
        {
            cmd.Connection = con;
            cmd.Parameters.AddWithValue("@Start", start);
            cmd.Parameters.AddWithValue("@End", end);
            using (SqlDataAdapter sda = new SqlDataAdapter(cmd))
            {
                DataSet ds = new DataSet();
                sda.Fill(ds);
                dlProducts.DataSource = ds.Tables[0];
                dlProducts.DataBind();
                if (!this.IsPostBack)
                {
                    hfStart.Value = ds.Tables[1].Rows[0]["Min"].ToString();
                    hfEnd.Value = ds.Tables[1].Rows[0]["Max"].ToString();
                    lblSliderValue.Text = string.Format("Rs. {0} - Rs. {1}", hfStart.Value, hfEnd.Value);
                }
            }
        }
    }
}

دستورات CSS:

در ادامه کدهای CSS مربوط به برنامه ای که در دست تهیه داریم را مشاهده می کنید.

<style type="text/css">
    body
    {
        font-family: Arial;
        font-size: 10pt;
        margin: 0;
        padding: 0;
    }
    .loader
    {
        height: 50px;
        width: 100px;
    }
    .item
    {
        width: 202px;
        border: 1px solid #ccc;
        box-shadow: 2px 2px 8px 2px #ccc;
    }
    .item .header
    {
        height: 30px;
        background-color: #9F9F9F;
        color: #fff;
    }
    .item .body
    {
        width: 200px;
        height: 200px;
    }
    .item .image
    {
        height: 200px;
        width: 200px;
    }
    .item .footer
    {
        height: 50px;
    }
    .button, .button:hover
    {
        height: 45px;
        padding: 10px;
        color: White;
        line-height: 23px;
        text-align: center;
        font-weight: bold;
        cursor: pointer;
        border-radius: 4px;
        text-decoration: none;
        background-color: #9F9F9F;
        border: 1px solid #5C5C5C;
    }
    .modal
    {
        position: fixed;
        z-index: 999;
        height: 100%;
        width: 100%;
        top: 0;
        background-color: Black;
        filter: alpha(opacity=60);
        opacity: 0.6;
        -moz-opacity: 0.8;
    }
    .center
    {
        z-index: 1000;
        margin: 300px auto;
        padding: 10px;
        width: 130px;
        background-color: White;
        border-radius: 10px;
        filter: alpha(opacity=100);
        opacity: 1;
        -moz-opacity: 1;
    }
    .center img
    {
        height: 128px;
        width: 128px;
    }
</style>

خروجی حاصل از اجرای برنامه را مشاهده نمایید.