User Control در ASP.Net

در این مقاله قصد داریم شما را user control در ASPNET آشنا کنیم که برای این کار از یک مثال استفاده کرده ایم و کدهای مربوط به آن را توضیح داد ه ایم و در انتها فایل اجرایی آن قرار داده شده است که با مراجعه به آن میتوانید درک بهتری از این کنترل در ASPNET داشته باشید.

User Control در ASP.Net

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

یک user control در یک فایل جداگانه به نام ASCX  ذخیره میشود.

User Control یک collection  است که برای ترکیب چند کنترل در ASP.NET مورد استفاده قرار میگیرد. اگر شما نیاز دارید که در پروژه تان از یک قابلیت در چندین صفحه استفاده کنید میتوانید از User Control استفاده کنید.

User Control تگ <html> , <body>  و  <form> ندارد. User Control بوسیله ی یک در صفحه تعبیه شده است.معنای لغوی  User Control ، "استفاده مجدد" است و به طور خلاصه میتوان گفت یک المان برای توسعه میباشد که شما میتوانید از آن در چند قسمت از برنامه یا وب سایت خود استفاده کنید.

User Control رویدادهای مخصوص به خود را دارد که شبیه رویدادهای web page میباشد.

User Control  یکبار ایجاد میشود و n بار میتوان از آن در برنامه  استفاده میشود.

ایجاد مرحله به مرحله ی User Control :

1.یک پروژه WebSite   ایجاد کنید.

File-> New->WebSite

به عنوان مثال در موارد زیر میتوان از user control استفاده کرد :

  _در وب سایت های خدماتی برای نمایش نوع و تعداد خدمات مورد استفاده قرار میگیرد.

  _در سایتهای تجاری یا فروشگاهی یک user control تعریف میکنند تا در آن جزئیات اطلاعات در حساب کاربری را نمایش دهد.

  _در سایتهایی که به صورت کلوب می باشد از user control برای نمایش اعضا استفاده میکنند.

2.یک WebForm جدید ایجاد کنید.

روی پروژه راست کلیک کنید ADD و سپس New Item را انتخاب کنید.

3.یک User Control جدید ایجاد کنید.

روی پروژه راست کلیک کنید و روی ADD -> Add New Item کلیک کنید.

4.ما در اینجا دو فایل با نام های  Default.aspx WEBFORM و  FriendWebUserControl.ascx USER CONTROL تعریف کرده ایم.

 

5.روی فایل DEFAULT.ASPX دابل کلیک کنید.

کنترل GridView را از ToolBox بر روی صفحه Drag N Drop کنید.

 

1.	<asp:GridView ID="gvFriend" runat="server" AutoGenerateColumns="False">  
2.	    <Columns>  
3.	        <asp:BoundField DataField="FriendID" HeaderText="Friend ID" />  
4.	        <asp:BoundField DataField="FriendName" HeaderText="Friend Name" />  
5.	        <asp:ButtonField Text="View Detail" /> 
6.	    </Columns>  
7.	</asp:GridView>  

 

به این GridView سه فیلد اضافه میکنیم :

  1.یک فیلد برای را نمایش برای نمایش ID اعضا .

  2. یک فیلد برای را نمایش برای نام اعضا .

  3.یک Button برای نمایش جزئیات اطلاعات اعضا.

  در صفحه design view ، GRIDVIEW به صورت زیر نمایش داده میشود :

برای استفاده از auto format style  در  GRIDVIEW روی دکمه ی سیاه رنگی به آن SMART TAG میگویند ،کلیک کنید.

ما در اینجا گزینه BROWSUGAR  به عنوان category انتخاب کرده ایم.بعد از انتخاب این گزینه GRIDVIEW  مانند شکل زیر خواهد شد.

اکنون کد زیر را در قسمت code behind و در فایل DEFAULT.ASPX مینویسیم.

1.	using System;  
2.	using System.Collections.Generic;  
3.	using System.Configuration;  
4.	using System.Data;  
5.	using System.Data.SqlClient;  
6.	using System.Linq;  
7.	using System.Web;  
8.	using System.Web.UI;  
9.	using System.Web.UI.WebControls;  
10.	public partial class _Default: System.Web.UI.Page  
11.	{  
12.	    string ConStr = ConfigurationManager.ConnectionStrings["MemberCDACConnectionString"].ConnectionString;  
13.	    protected void Page_Load(object sender, EventArgs e)  
14.	        {  
15.	            if (!IsPostBack)  
16.	            {  
17.	                BindRepeater();  
18.	            }  
19.	        }  
20.	        /// <summary>   
21.	        /// To load data into Repeater control   
22.	        /// </summary>   
23.	    public void BindRepeater()  
24.	    {  
25.	        SqlConnection con = new SqlConnection(ConStr);  
26.	        SqlDataAdapter da = new SqlDataAdapter("Select * From tblFriends", ConStr);  
27.	        DataSet ds = new DataSet();  
28.	        da.Fill(ds, "FriendsTable");  
29.	        gvFriend.DataSource = ds;  
30.	        gvFriend.DataBind();  
31.	    }  
32.	}  

6.حال ، برای کار روی کنترل FriendWebUserControl.ascxدابل کلیک کنید.

7.فایل FriendWebUserControl.ascx میتواند به هر فایل ASPX  دیگری ضمیمه شود و همه ی قابلیتهای آن استفاده کرد.

در user control یک  public propertyایجاد میکنیم تا بتواند جزئیات اطلاعات یک کاربر مشخص را نمایش دهد.

در قسمت کد ASCX  مربوط به  User Controlاز یک Repeater Control استفاده کرده ایم ، در داخل repeater control جزئیات اطلاعات اجزا نمایش داده میشود.

کد مربوط به  FriendWebUserControl.ascx:

1.	<%@ Control Language="C#" AutoEventWireup="true" CodeFile="FriendWebUserControl.ascx.cs" Inherits="FriendWebUserControl" EnableViewState="True" %>  
2.	    <h3><u>Friend Detail From User Control</u></h3>  
3.	    <asp:Repeater ID="rptFriend" runat="server">  
4.	        <HeaderTemplate> </HeaderTemplate>  
5.	        <ItemTemplate>  
6.	            <table border="1" style="border-color:darkorange;background-color:lightgray">  
7.	                <tr>  
8.	                    <td><b>Friend ID :</b>  
9.	                        <asp:Label ID="lblFriendID" runat="server" Text='<%# Eval("FriendID") %>'></asp:Label>  
10.	                    </td>  
11.	                </tr>  
12.	                <tr>  
13.	                    <td><b>Friend Name :</b>  
14.	                        <asp:Label ID="lblFriendName" runat="server" Text='<%# Eval("FriendName") %>'></asp:Label>  
15.	                    </td>  
16.	                </tr>  
17.	                <tr>  
18.	                    <td><b>Place :</b>  
19.	                        <asp:Label ID="lblPlace" runat="server" Text='<%# Eval("Place") %>'></asp:Label>  
20.	                    </td>  
21.	                </tr>  
22.	                <tr>  
23.	                    <td><b>Mobile :</b>  
24.	                        <asp:Label ID="lblMobile" runat="server" Text='<%# Eval("Mobile") %>'></asp:Label>  
25.	                    </td>  
26.	                </tr>  
27.	                <tr>  
28.	                    <td><b>Email ID :</b>  
29.	                        <asp:Label ID="lblEmailID" runat="server" Text='<%# Eval("EmailAddress") %>'></asp:Label>  
30.	                    </td>  
31.	                </tr>  
32.	            </table>  
33.	        </ItemTemplate>  
34.	        <FooterTemplate> </FooterTemplate>  
35.	    </asp:Repeater> <br /> <br /> <a href="Default.aspx">Back To Main Page</a>  

کد ASCX.CS در user control را میتوان با دو روش ایجاد کرد.

1.ایجاد FriendID property : که مقدار FriendID  انتخاب شده را از GridView میگیرد.

2.ایجاد تابع BindRepeater : که اطلاعات را از پایگاه داده واکشی میکند و در کنترل Repeater  قرار میدهد.

کد مربوط به FriendWebUserControl.ascx.cs

1.	using System;  
2.	using System.Collections.Generic;  
3.	using System.Configuration;  
4.	using System.Data;  
5.	using System.Data.SqlClient;  
6.	using System.Linq;  
7.	using System.Web;  
8.	using System.Web.UI;  
9.	using System.Web.UI.WebControls;  
10.	public partial class FriendWebUserControl: System.Web.UI.UserControl  
11.	{  
12.	    string ConStr = ConfigurationManager.ConnectionStrings["MemberCDACConnectionString"].ConnectionString;  
13.	    public int FriendID  
14.	    {  
15.	        get;  
16.	        set;  
17.	    }  
18.	    protected void Page_Load(object sender, EventArgs e)  
19.	        {  
20.	            BindRepeater(FriendID);  
21.	        }  
22.	        /// <summary>   
23.	        /// To load data into Repeater control   
24.	        /// </summary>   
25.	    public void BindRepeater(int SelectedFriendID)  
26.	    {  
27.	        SqlConnection con = new SqlConnection(ConStr);  
28.	        SqlDataAdapter da = new SqlDataAdapter("Select * From tblFriends where FriendID = " + SelectedFriendID, ConStr);  
29.	        DataSet ds = new DataSet();  
30.	        da.Fill(ds, "FriendsTable");  
31.	        rptFriend.DataSource = ds;  
32.	        rptFriend.DataBind();  
33.	    }  
34.	}  

8.ما قصد داریم که از usercontrol  در یک صفحه ASPX  استفاده کنیم.

9. روی پروژه راست کلیک میکنیم و یک WebForm جدید اضافه میکنیم.

نام آن را DisplayFriendDetail.aspx میگذاریم.

10. روی صفحه DisplayFriendDetail.aspx دابل کلیک میکنیم.

11. نحوه ی استفاده از User Control به صورت زیر است :

الف. UserControl  را قسمت بالای ASPX تعریف میکنیم.

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

روشی دیگر :

کنترل User control  در صفحه  ی ASPX ، Drag n Drop  میکنیم.

12.برنامه را اجرا میکنیم.

خروجی :

 

فایل های ضمیمه
دانلود نسخه ی PDF این مطلب