Click here to Skip to main content
13,250,182 members (58,506 online)
Click here to Skip to main content
Add your own
alternative version

Stats

5.1K views
8 bookmarked
Posted 21 Jul 2016

MasterPage, WebUserControl, ModalPopup and UpdatePanel - Passing Values to Parent Page

Rate this:
Please Sign up or sign in to vote.
A quick demo on how to pass values from a modal-grid WebUserControl to main page based on the selected row in GridView.

Introduction

A developer in the forums is asking how to pass data that is coming from a WebUserControl control to the main page. Basically, the scenario is that, he has a WebUserControl which contains a GridView that is wrapped around inside an ASPNET Ajax UpdatePanel control. The WebUserControl will then be used in the page (ContentPage) that is hosted within a MasterPage. The page contains some TextBox in which it will be populated once the user selects a row from the GridView, also the ModalPopup is defined within that page.

The question is quite interesting, and so I’ve give it a shot and created a simple demo. Here’s the solution that I came up with and provide it to the developer.

The Page Markup

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" 

CodeBehind="Modal.aspx.cs" Inherits="WebAppDemo.Modal" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<%@ Register src="UserControl/WebUserControl1.ascx" tagname="WebUserControl1" tagprefix="uc1" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
    <style type="text/css">
        .modal-bg{
            background-color:Gray;
            filter:alpha(opacity=50);
            opacity:0.6;
            z-index:999;
        }
        .modal{
            position:absolute;
        }
    </style>

</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
    </asp:ToolkitScriptManager>

    <asp:TextBox ID="txtProductName" runat="server" />
    <asp:TextBox ID="txtPrice" runat="server" />


    <asp:LinkButton ID="LinkButton1" runat="server" Text="Show" />
    <asp:Panel ID="pnlPopUp" runat="server" 

    style="display:none" CssClass="modal" >
                    <uc1:WebUserControl1 ID="WebUserControl11" runat="server" />
    </asp:Panel>
    <asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" 

                            TargetControlID="LinkButton1" 

                            PopupControlID="pnlPopUp" 

                            BackgroundCssClass="modal-bg">
    </asp:ModalPopupExtender>

</asp:Content>

There’s nothing really fancy about the markup above. It just contains two TextBox, a ModalPopup, a LinkButton as the target control for the Modal, and a Panel control that contains the WebUserControl.

You may also have noticed that I’ve created a simple CSS for the modal.

The WebUserControl Markup

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="WebUserControl1.ascx.cs" 

        Inherits="WebAppDemo.UserControl.WebUserControl1" %>
<%@ Register Assembly="AjaxControlToolkit" 

Namespace="AjaxControlToolkit" TagPrefix="asp" %>

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False">
            <Columns>
                <asp:BoundField DataField="ID" />
                <asp:BoundField DataField="ProductName" HeaderText="Product Name"/>
                <asp:TemplateField>
                    <ItemTemplate>
                        <asp:TextBox ID="txtPrice" runat="server" 

                        Text='<%# Eval("Price") %>' />
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField>
                    <ItemTemplate>
                        <asp:TextBox ID="txtAmount" runat="server" 

                        Text="<%# Eval("Amount") %>" />
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField>
                    <ItemTemplate>
                        <asp:Button ID="Button1" runat="server" 

                        Text="Select" onclick="Button1_Click" />
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>
    </ContentTemplate>
    <Triggers>
        <asp:PostBackTrigger ControlID="GridView1" />
    </Triggers>
</asp:UpdatePanel>

The WebUserControl is where we defined the GridView. Noticed that the GridView is wrapped within an UpdatePanel control. We then set the ID of GridView as the PostbackTrgigger for the UpdatePanel to trigger the control events within GridView – in this case, the Click event of the Button control.

Code Behind

Now, here's the code behind for the WebUserControl:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using AjaxControlToolkit;

namespace WebAppDemo.UserControl
{
    public partial class WebUserControl1 : System.Web.UI.UserControl
    {

        private DataTable GetSampleData()
        {
            //NOTE: THIS IS JUST FOR DEMO
            //If you are working with database
            //You can query your actual data and fill it to the DataTable
            DataTable dt = new DataTable();
            DataRow dr = null;

            //Create DataTable columns
            dt.Columns.Add(new DataColumn("ID", typeof(string)));
            dt.Columns.Add(new DataColumn("ProductName", typeof(string)));
            dt.Columns.Add(new DataColumn("Price", typeof(string)));
            dt.Columns.Add(new DataColumn("Amount", typeof(string)));

            //Create Row for each columns
            dr = dt.NewRow();
            dr["ID"] = 1;
            dr["ProductName"] = "Galaxy S";
            dr["Price"] = "100";
            dr["Amount"] = "10";

            dt.Rows.Add(dr);

            dr = dt.NewRow();
            dr["ID"] = 2;
            dr["ProductName"] = "iPhone 4";
            dr["Price"] = "200";
            dr["Amount"] = "2";

            dt.Rows.Add(dr);

            dr = dt.NewRow();
            dr["ID"] = 3;
            dr["ProductName"] = "HTC Mobile";
            dr["Price"] = "50";
            dr["Amount"] = "10";

            dt.Rows.Add(dr);
            return dt;
        }

        private void BindGrid(DataTable source)
        {
            GridView1.DataSource = source;
            GridView1.DataBind();
        }
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
                BindGrid(GetSampleData());
        }

        protected void Button1_Click(object sender, EventArgs e)
        {
            Button b = (Button)sender;
            GridViewRow gvRow = (GridViewRow)b.NamingContainer;

            string productName = gvRow.Cells[1].Text;
            string price = ((TextBox)gvRow.FindControl("txtPrice")).Text;

            Type thePage = Page.GetType();
            System.Reflection.PropertyInfo[] pi = thePage.GetProperties();
            foreach (System.Reflection.PropertyInfo pinfo in pi)
            {
                if (pinfo.Name == "ProductName")
                {
                    pinfo.SetValue(Page, productName, null);
                }
                else if (pinfo.Name == "Price")
                {
                    pinfo.SetValue(Page, price, null);
                }
            }

            ((ModalPopupExtender)this.Parent.Parent.FindControl
            ("ModalPopupExtender1")).Hide();             
        }
    }
}

You may noticed that I just used a fake data as the data source for GridView. At the Button’ s Click event, I have used reflection to access the property metadata. I then used the SetValue to populate the controls in the main page based on the selected row values from the GridView. Keep in mind that you can also use the FindControl() method to reference a control and assign a value, but I opt to use reflection in this particular demo because i just want to pass data, and I don’t want to deal with naming containers to find specific controls in the page. FindControl method is useful when you want to manipulate the control, like for example changing the Width or perhaps toggling the Enabled or Visible property of the control.

You can also use properties if you want to get the value from a UserControl in the main page. For example you expose a public property within your WebUserControl, then in your main page, you simply reference the property defined in your WebUserControl, for example at Button’s click event. Though using properties isn’t applicable for this particular scenario, since we are passing data to the main page right after selecting a row and not getting data.

Output

Running the page will display something like this:

After clicking the “Show” link:

After selecting a row from GridView:

That’s it! I hope someone finds this post useful. :)

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Vincent Maverick Durano
Technical Lead
Philippines Philippines
A code monkey who loves to drink beer, play guitar and listen to music.

My exploration into programming began at the age of 15;Turbo PASCAL, C, C++, JAVA, VB6, Action Scripts and a variety of other equally obscure acronyms, mainly as a hobby. After several detours, I am here today on the VB.NET to C# channel. I now work on ASP.NET+C#+MSSQL+EF+Angular+JavaScripts+AJAX+Xamarin, which go together like coffee crumble ice cream.

9-time Microsoft MVP, 2-time C# Corner MVP, Microsoft Influencer, Dzone MVB and a regular contributor at CodeAsp.Net in which I also moderate, C# Corner, AspSnippets, Xamarin but more often at the official Microsoft ASP.NET community site where I became one of the All-Time Top Answerer with ALL-STAR recognition level (the highest attainable level with 100,000+ points).

My main interests include technologies, travel, beaches, mountains, paintings, arts, supernatural, ghosts, angels, vampires, mythology, mysteries, para-sciences , scifi ,music, guitar, cars and motorbikes. Wow that's a lot of them!

You may also be interested in...

Comments and Discussions

 
GeneralVery Nice Article Pin
M,AqibShehzad22-Jul-16 7:39
memberM,AqibShehzad22-Jul-16 7:39 
GeneralRe: Very Nice Article Pin
Vincent Maverick Durano4-Aug-16 3:19
professionalVincent Maverick Durano4-Aug-16 3:19 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.171114.1 | Last Updated 21 Jul 2016
Article Copyright 2016 by Vincent Maverick Durano
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid