ورود / ثبت نام
0
0

استفاده از کنترل AJAX HoverMenu با GridView در ASP.NET

284 بازدید
AJAX HoverMenu

AJAX HoverMenu

ابزار کنترل های ASP.Net AJAX، کنترل های بسیار مفیدی مانند AJAX HoverMenu را برای ساخت اپلیکیشن های وب قدرتمند و مدرن در اختیار برنامه نویسان ASP.Net قرار داده است. یکی از این کنترل ها کنترل HoverMenu می باشد که ما را قادر می سازد تا به هر یک از کنترل های ASP.Net یک popup menu اضافه کنیم. این کنترل می تواند به عنوان یک tooltip ساده به Textbox اضافه شود و به کاربران نشان دهد که چه اطلاعاتی باید در Textbox وارد نمایند یا مانند بسیاری از اپلیکیشن های تجارت الکترونیکی و فروشگاه ها، می تواند تصویر بزرگتری از محصول را زمانی که کاربر با ماوس روی عکس محصول قرار می گیرد، نمایش دهد. در این مقاله، نشان خواهیم دید که چگونه با استفاده از HoverMenu و GridView این امکان را پیاده سازی نماییم.

برسی بیشتر AJAX HoverMenu:

AJAX HoverMenu

برای شروع، یک صفحه جدید ایجاد کرده ایم که دارای یک ScriptManger در بالای آن است. این کنترل هر زمان که بخواهید از امکانات یا کنترل های Ajax  در وب سایت خود استفاده نمایید، لازم است.

<asp: ScriptManager ID="ScriptManager1" runat="server"></asp: ScriptManager>

سپس، یک GridView به صفحه اضافه می کنیم و ویژگی AutoGenerateColumns آن را false نموده و سه ستون BoundField و یک ستون TemplateField به صورت زیر اضافه می کنیم:

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" 
        CellPadding="4" ForeColor="#333333" GridLines="None" BorderColor="#628BD7" 
        BorderStyle="Solid" BorderWidth="2px">
        
        <Columns>
        
           <asp:BoundField DataField="ProductID" HeaderText="Product ID" />
           <asp:BoundField DataField="ProductName" HeaderText="Product Name" />
           <asp:BoundField DataField="UnitPrice" HeaderText="Unit Price" />
           
           <asp:TemplateField HeaderText="Picture">
            
              <ItemTemplate>
                
              <asp:Image runat="server" ID="thumbnailImage" 
                 ImageUrl='<%# Eval("Picture") %>' Width="70" Height="60" />
                    
              <ajax:HoverMenuExtender ID="HoverMenuExtender1" runat="server" 
                 PopupControlID="popupImage"
                 TargetControlID="thumbnailImage" 
                 OffsetX="10" OffsetY="5" 
                 PopupPosition="Right" 
                 PopDelay="100" HoverDelay="100">
              </ajax:HoverMenuExtender>
                      
              <asp:Panel runat="server" ID="popupImage" BorderColor="#628BD7" 
                 BorderStyle="Solid" BorderWidth="7px">                 
                 <asp:Image runat="server" ID="mainImage" 
                    ImageUrl='<%# Eval("Picture") %>'  />               
              </asp:Panel>
                      
              </ItemTemplate> 
            
            </asp:TemplateField>

        </Columns>

        <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
    </asp:GridView>

در کد بالا، ItemTemplate مربوط به ستون TemplateField ابتدا یک thumbnail کوچک از عکس محصول تعریف می کند. این تصویر زمانی به کاربر نشان داده خواهد شد که GridView در صفحه نمایش داده شود.

<asp:Image runat="server" ID="thumbnailImage" 
   ImageUrl='<%# Eval("Picture") %>' Width="70" Height="60" />

سپس یک کنترل HoverMenu به ItemTemplate اضافه کرده و ویژگی های اولیه آن را تنظیم می نماییم.

<ajax:HoverMenuExtender ID="HoverMenuExtender1" runat="server" 
   PopupControlID="popupImage"
   TargetControlID="thumbnailImage" 
   OffsetX="10" OffsetY="5" 
   PopupPosition="Right" 
   PopDelay="100" HoverDelay="100">
</ajax:HoverMenuExtender> 

در نهایت یک کنترل Panel اضافه می کنیم که می تواند به عنوان popup menu توسط Hover Menu استفاده شود. این پنل می تواند هر نوع محتوایی را نمایش دهد اما برای این مثال خاص، فقط عکس محصول را با استفاده از یک Image control نمایش می دهیم.

<asp:Panel runat="server" ID="popupImage" BorderColor="#628BD7" 
   BorderStyle="Solid" BorderWidth="7px">
   <asp:Image runat="server" ID="mainImage" 
      ImageUrl='<%# Eval("Picture") %>'  /> 
</asp:Panel>

در ادامه توضیح کوتاهی از ویژگی ها (Properties) کنترل HoverMenu آمده است:

TargetControlID: این property به رفرنس کنترل مقصد نیاز دارد. HoverMenu خودش به طور اتوماتیک وقتی با ماوس روی کنترل مورد نظر می روید، نمایش داده می شود. در این مثال، Id مربوط به Image Control کوچک را که درست بالای HoverMenu تعریف شده مشخص کردیم.

PopupControlID: این property به Id کنترلی نیاز دارد که می خواهیم با استفاده از کنترل AJAX HoverMenu به عنوان popup window استفاده کنیم. در این مثال، از کنترل Panel استفاده کردیم.

PopupPosition: این یک property اختیاری است و می تواند روی Left، Right، Top، Bottom یا Center تنظیم شود. این ویژگی موقعیت نسبی کنترل HoverMenu را نسبت به کنترل موردنظر مشخص می کند. OffsetX و OffsetY: این دو ویژگی تعداد پیکسل ها را از آفست کنترل HoverMenu به صورت افقی و عمودی تا موقعیت پیش فرض آن که به عنوان PopupPosition مشخص شده است، تعیین می کند.

PopDelay: این ویژگی زمان ظاهر شدن و باقی ماندن کنترل HoverMenu بعد از حرکت دادن ماوس توسط کاربر و برداشتن آن از روی کنترل موردنظر در صفحه را به میلی ثانیه مشخص می کند.

HoverDelay: این ویژگی زمانی را که می خواهید بین رفتن ماوس روی کنترل و ظاهر شدن popup طول بکشد، مشخص می کند.

HoverCssClass: نام کلاس CSS ای است که می خواهیم با ظاهر شدن HoverMenu روی کنترل موردنظر اعمال شود. برای مختصر بودن آموزش، ما این ویژگی را اعمال نکرده و استایل ها را به طور مستقیم روی کنترل اعمال کردیم.

Animations: این کنترل همچنین ویژگی animation را پشتیبانی می کند که می توانید از افکت های جنریک انیمیشن برای کنترل خود استفاده نمایید.

برای تکمیل این آموزش، فراموش نکنید که GridView خود را با جدول محصولات در دیتابیس متصل (Bind) کنید. جدولی که ما برای این مثال استفاده کردیم، ۴ فیلد با نام های ProductID، ProductName، UnitPrice و Picture می باشد. ستون Picture، آدرس واقعی عکس را به صورت یک رشته مانند “images/canon_digital_camera.jpg” ذخیره می کند. کد زیر برای اتصال به دیتابیس استفاده شده است:

protected void Page_Load(object sender, EventArgs e)
{
   if (!Page.IsPostBack)
   {
      LoadData();
   }
} 

private void LoadData()
{
   string constr = "Server=TestServer; Database=SampleDB; uid=sa; pwd=123;";
   string query = "SELECT ProductID, ProductName, UnitPrice, Picture FROM Products";    

   SqlDataAdapter da = new SqlDataAdapter(query, constr);
   DataTable table = new DataTable();
  
   da.Fill(table);    GridView1.DataSource = table;
   GridView1.DataBind();
}

 

  • پسورد: www.mspsoft.com
آیا این مطلب را می پسندید؟
https://www.mspsoft.com/?p=17378
اشتراک گذاری:
واتساپتوییترفیسبوکپینترستلینکدین
فاطمه زکایی
فاطمه زکایی هستم. فارغ التحصیل کارشناسی مهندسی نرم افزار، مدت سه سال هست که در زمینه توسعه اپلیکیشن های تحت وب و اندروید و همچنین تولید محتوای تخصصی برنامه نویسی تحت وب و اندروید در مجموعه mspsoft در خدمت شما هستم.
مطالب بیشتر
برچسب ها:

نظرات

0 نظر در مورد استفاده از کنترل AJAX HoverMenu با GridView در ASP.NET

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

هیچ دیدگاهی نوشته نشده است.