Friday, June 10, 2011

Access UserControl from Page


Hi..
To perform some reparative operation in application, its preferred to use UserControls.
Not necessary to have same display and bindings at everyplace. In that case we need to set values or call methods or pass values accordingly.
Here I have tried to figure out three cases, Hope it is helpful.
  1. Pass Table to Usercontrol and Set dynamically value to Controls
  2. Set Properties of control
  3. Call Usercontrol's Methods


Pass Table to Usercontrol and Set dynamically value to Controls
Here in my case, I am passing Table to a Predefined Usercontrol, Which contains a GridView And on top a Label which is passed as Property of UserControl
It will look like this
1
to code it try like this
Create a new Usercontrol page e.g. (DisplayControl.ascx)
The HTML will look like this
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="DisplayControl.ascx.cs"
    Inherits="UserControlSample.Controls.DisplayControl" %>
<center>
    <%= strTitle %></center>
<br />
<br />
<center>
    <asp:GridView ID="grdDisplay" runat="server" CellPadding="4" ForeColor="#333333"
        GridLines="None">
        <AlternatingRowStyle BackColor="White" ForeColor="#284775" />
        <EditRowStyle BackColor="#999999" />
        <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
        <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
        <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
        <RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
        <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
        <SortedAscendingCellStyle BackColor="#E9E7E2" />
        <SortedAscendingHeaderStyle BackColor="#506C8C" />
        <SortedDescendingCellStyle BackColor="#FFFDF8" />
        <SortedDescendingHeaderStyle BackColor="#6F8DAE" />
    </asp:GridView>
</center>

in DisplayControl.ascx.cs file code will be like this

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

        private void BindGrid()
        {
            grdDisplay.DataSource = DtTable;
            grdDisplay.DataBind();
        }
        public string strTitle { get; set; }
        public DataTable DtTable { get; set; }


Now on Page where the Usercontrol is going to be displayed.

Here strTitle="Display Page" sets Title for UserControl 

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeBehind="Default.aspx.cs" Inherits="UserControlSample._Default" %>

<%@ Register Src="Controls/DisplayControl.ascx" TagName="DisplayControl" TagPrefix="uc1" %>
<%@ Register Src="Controls/SetProperties.ascx" TagName="SetProperties" TagPrefix="uc2" %>
<%@ Register Src="Controls/AccessMethods.ascx" TagName="AccessMethods" TagPrefix="uc3" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <h1>
        Pass Table to Usercontrol and Set dynamically value to Controls</h1>
    <hr />
    <uc1:DisplayControl ID="DisplayControl1" runat="server" strTitle="Display Page" />
  
</asp:Content>

on Code behind

  protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                DisplayControl1.DtTable = GetTable();            
            }
        }

        private DataTable GetTable()
        {
            DataTable dt = new DataTable();
            dt.Columns.Add("ID");
            dt.Columns.Add("Name");

            DataRow dr = dt.NewRow();
            dr["ID"] = dt.Rows.Count + 1;
            dr["Name"] = "Sandeep";
            dt.Rows.Add(dr);
            dr = dt.NewRow();
            dr["ID"] = dt.Rows.Count + 1;
            dr["Name"] = "Nilesh";
            dt.Rows.Add(dr);
            dr = dt.NewRow();
            dr["ID"] = dt.Rows.Count + 1;
            dr["Name"] = "Kamal";
            dt.Rows.Add(dr);
            dr = dt.NewRow();
            dr["ID"] = dt.Rows.Count + 1;
            dr["Name"] = "Esha";
            dt.Rows.Add(dr);

            return dt;
        }

Set Properties of control

Now Lets change property of any control of Usercontrol

Here we will change the orientation of Login Control as “Vertical” / “Horizontal”

2

The code on page where the control is called is

<uc2:SetProperties ID="SetProperties1" runat="server" CtrlOrientation="Horizontal" />

Here CtrlOrientation is Property which will expect value of Orientation Class that is “Vertical” / “Horizontal”

and on Usercontrol Drop “Login” Control

and in code

protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
                Login1.Orientation = CtrlOrientation;
        }

        public Orientation CtrlOrientation { get; set; }

Call Usercontrol's Methods

Call method of Usercontrol from Page.

Here I am binding same grid from Page.

to achive this in Usercontrol cs page

 public void BindGrid()
        {
            grdDisplay.DataSource = GetTable();
            grdDisplay.DataBind();
        }

here BindGrid() Method is public so we can access it from Page with Control.

like

AccessMethods1.BindGrid();


Download The Source

Hope this help you..

Enjoy CodingSmile

No comments: