مقدمه و معرفی کنترل HyperLink :
از کنترل HyperLink برای ایجاد لینک به یک صفحه ، فایل و یا وبسایت دیگر استفاده می شود .
این کنترل کار تگ < a > در HTML را انجام داده و در هنگام اجرای صفحات ASP.Net توسط سرور ، خروجی آن در سورس کد صفحه به صورت تگ < a > خواهد بود .
این کنترل می تواند لینک را به صورت متن یا یک تصویر نمایش دهد . برای نمایش لینک به صورت متن ، باید متن مورد نظر خود برای عنوان لینک را در خاصیت Text کنترل تعیین نمایید . همچنین اگر می خواهید لینک به صورت تصویر باشد ، بایستی آدرس عکس مورد نظر را در خاصیت ImageUrl کنترل تعریف نمایید .
شکل کلی تعریف و نمایش دکمه فرمان HyperLink در صفحه های ASP.Net به صورت زیر است :
Syntax |
< asp:HyperLink ID="عنصر id" runat="server" Text="عنوان لینک" NavigateUrl="آدرس صفحه یا فایل مقصد" />
مثال : < asp:HyperLink ID="HyperLink1" runat="server" Text="صفحه نخست" NavigateUrl="http://www.Developer1.ir/default.aspx" />
خروجی : صفحه نخست |
کنترل HyperLink را به صورت زیر هم می توان تعریف کرد :
Syntax |
< asp:HyperLink ID="عنصر id" runat="server" Text="عنوان لینک" NavigateUrl="آدرس صفحه یا فایل مقصد" > < / asp:HyperLink >
مثال : < asp:HyperLink ID="HyperLink2" runat="server" Text="صفحه نخست" NavigateUrl="http://www.Developer1.ir/default.aspx" > < / asp:HyperLink > |
مزایا و دلایل استفاده از کنترل HyperLink به جای تگ < a > در صفحات ASP.Net :
گفتیم که تگ < a > در HTML و کنترل HyperLink در ASP.Net دقیقا یک کار را انجام می دهند و شما می توانید از تگ < a > برای ایجاد لینک در صفحات ASP.Net خود استفاده نمایید . اما در چه جاهایی لازم است تا از کنترل HyperLink برای ایجاد لینک استفاده نماییم :
- در زمانی که می خواهید برای لینک خودتان کد طراحی نمایید .
تگ < a > ، قابل برنامه ریزی و کدنویسی نبوده و حالت ایستایی دارد . اما می توانید برای کنترل HyperLink یک کد طراحی کرده و متن یا Url آن را به صورت دینامیک و یا بر اساس انتخاب کاربر تعیین نمایید .
- زمانی که می خواهید کنترل HyperLink را به یک پایگاه داده متصل نمایید .
کنترل HyperLink را می توانید به انواع کنترل های سرور داده و پایگاه های داده متصل کنید ، تا متن و آدرس مقصد خود را به صورت دینامیک از یک منبع اطلاعاتی دریافت نماید .
مثال های عملی :
در مثال های عملی زیر قصد داریم تا روش استفاده از کنترل HyperLink را در عمل به شما نمایش دهیم . در مثال دوم نیز روش برنامه نویسی و طراحی یک کد ساده برای دینامیک کردن کنترل را بررسی نموده ایم :
مثال 1 : در این مثال ، یک کنترل ساده HyperLink را طراحی کرده ایم ، که به یک صفحه لینک داده است :
< asp:HyperLink ID="HyperLink2" runat="server" Text = " صفحه نخست " NavigateUrl = "http://www.Developer1.ir/default.aspx" /> |
صفحه نخست |
مثال 2 : استفاده از عکس به عنوان لینک در کنترل HyperLink : در این مثال یک عکس را به عنوان لینک در کنترل HyperLink قرار داده ایم . برای این منظور ، آدرس عکس مورد نظر را در خاصیت ImageUrl کنترل تعریف کرده ایم :
< asp:HyperLink ID="HyperLinkHome" runat="server" ImageUrl = " ~/Pic/web.png " NavigateUrl = "http://www.Developer1.ir/default.aspx" /> |
|
مثال 3 : در مثال زیر یک کد اکتیو برای لینک خود طراحی کرده ایم . عملکرد این کد به این صورت است که در یک کادر کرکره ایی چند عنوان آموزشی قرار دارد . شما اگر هر یک از این عنوان را انتخاب نمایید ،کنترل HyperLink به صورت خودکار یک لینک تولید می کند ، که عنوان آن متناسب با گزینه انتخابی بوده و در صورت کلیک بر روی لینک شما را به صفحه مرتبط با آن ارسال می کند . برای مشاهده عملکرد کد مثال ، گزینه مورد نظرتان را از کادر کرکرده ایی ، انتخاب نمایید ::
< p class="matn" >
چه مطلبی را می خواهید مطالعه نمایید :
< /p >
< asp:DropDownList runat="server" ID="Drp1" OnTextChanged="Drp1_SelectedIndexChanged" AutoPostBack="true" >
< asp:ListItem Text="ASP.Net" Value="../AccessDataSource/OverView.aspx" > < /asp:ListItem >
< asp:ListItem Text="HTML" Value="../../HTML/Main.aspx" > < /asp:ListItem >
< asp:ListItem Text="CSS" Value="../../CSS/Introduce.aspx" > < /asp:ListItem >
< asp:ListItem Text="SQL" Value="../../SQL/Introduce.aspx" > < /asp:ListItem >
< /asp:DropDownList >
< asp:HyperLink ID="HyperLink3" runat="server" Text="" Enabled="false" ID="H1" >
< /asp:HyperLink > |
چه مطلبی را می خواهید مطالعه نمایید :
|
کد برنامه در فایل کد صفحه ASP.Net :
کد زیر نیز در درون فایل کد صفحه ASP.Net مورد نظر برای تابع Drp1_SelectedIndexChanged قرار داده شده است . در هر بار تغییر آیتم در منوی کرکره ایی ، این تابع فراخوانی و اجرا می شود :
کد برنامه |
protected void Drp1_SelectedIndexChanged(object sender, EventArgs e)
{
H1.Text = "مطالعه بخش : " + Drp1.SelectedItem.Text;
H1.NavigateUrl = Drp1.SelectedItem.Value;
H1.Enabled = true;
} |