Passing data from master page to content page

Suggested Videos
Part 146 - Why use master pages in asp.net
Part 147 - Master pages in asp.net
Part 148 - Passing data from content page to master page



This is continuation to Part 148, please watch Part 148 before proceeding.

Let us understand how to pass data from a master page to a content page, with an example. 

In the example below,
1. We have a search textbox and a search button in the master page. 
2. On the Content page, we have a GridView control that displays students from a database table.
3. When we type some text in the search textbox on the master page and when we hit "Search" button, we want to display all the students whose name contains the search term entered in the search textbox.



Here are the steps
Step 1: Include a panel, textbox and a button control on the master page. 
<asp:Panel ID="panelSearch" runat="server">
    <b>Search : </b>
    <asp:TextBox ID="txtSerach" runat="server"></asp:TextBox>
    <asp:Button ID="btnSearch" runat="server" Text="Search"/>
</asp:Panel>

Step 2: Include the following 3 properties in the code-behind file of the master page. We will use these properties in the content page.
public Panel SearchPanel
{
    get
    {
        return panelSearch;
    }
}

public string SearchTerm
{
    get
    {
        return txtSerach.Text;
    }
}

public Button SearchButton
{
    get
    {
        return btnSearch;
    }
}

Step 3: We will be using table tblStudents. Here is the SQL Script to create and populate this table with sample data.
Create Table tblStudents
(
ID int Identity Primary Key,
Name nvarchar(50),
Gender nvarchar(20),
TotalMarks int,
)

Insert into tblStudents values ('Mark Hastings','Male',900)
Insert into tblStudents values ('Pam Nicholas','Female',760)
Insert into tblStudents values ('John Stenson','Male',980)
Insert into tblStudents values ('Ram Gerald','Male',990)
Insert into tblStudents values ('Ron Simpson','Male',440)
Insert into tblStudents values ('Able Wicht','Male',320)
Insert into tblStudents values ('Steve Thompson','Male',983)
Insert into tblStudents values ('James Bynes','Male',720)
Insert into tblStudents values ('Mary Ward','Female',870)
Insert into tblStudents values ('Nick Niron','Male',680)

Step 4: Search stored procedure below, returns all students whose name contains @SearchTerm parameter.
Create Proc spSearch
@SearchTerm nvarchar(50)
as
Begin
Select * from tblStudents where Name like '%' + @SearchTerm + '%'
End

Step 5: Add a content page, and include a GridView control to display the students.
<asp:GridView ID="GridView1" runat="server">
</asp:GridView>

Include the following MasterType directive on the content page
<%@ MasterType VirtualPath="~/Site.Master" %>

Step 6: Copy and paste the following code in the code-behind file of the content page. 
protected void Page_Init(object sender, EventArgs e)
{
    Master.SearchButton.Click += new EventHandler(SearchButton_Click);
}

protected void Page_Load(object sender, EventArgs e)
{
    GetData(null);
}

protected void SearchButton_Click(object sender, EventArgs e)
{
    GetData(Master.SearchTerm);   
}

private void GetData(string searchTerm)
{
    string cs = ConfigurationManager.ConnectionStrings["DBCS"].ConnectionString;
    using (SqlConnection con = new SqlConnection(cs))
    {
        SqlCommand cmd = new SqlCommand("spSearch", con);
        cmd.CommandType = CommandType.StoredProcedure;

        SqlParameter searchParameter = new SqlParameter("@SearchTerm", searchTerm ?? string.Empty);
        cmd.Parameters.Add(searchParameter);
        con.Open();
        GridView1.DataSource = cmd.ExecuteReader();
        GridView1.DataBind();
    }
}

Note: Please include the following USING declarations
using System.Data;
using System.Data.SqlClient;
using System.Configuration;

At this point, run the application and enter a search term in the search textbox on the master page, and click Search button. Notice that the matching students are displayed in the gridview control on the content page.

Let us look at another example of implementing search functionality on another content page. This time we will use table tblEmployee. Here is the sql script to create and populate this table.
Create Table tblEmployee
(
Id int Identity Primary Key,
Name nvarchar(50),
Email nvarchar(50),
Age int,
Gender nvarchar(50),
HireDate date,
)

Insert into tblEmployee values
('Sara Nan','Sara.Nan@test.com',35,'Female','04/04/1999')
Insert into tblEmployee values
('James Histo','James.Histo@test.com',33,'Male','12/07/2008')
Insert into tblEmployee values
('Mary Jane','Mary.Jane@test.com',28,'Female','11/11/2005')
Insert into tblEmployee values
('Paul Sensit','Paul.Sensit@test.com',29,'Male','10/10/2007')
Insert into tblEmployee values
('Todd Grove','todd.grove@test.com',31,'Male','11/11/2008')

Search stored procedure below, returns all employees whose name contains @SearchTerm parameter.
Create Proc spSearchEmployees
@SearchTerm nvarchar(50)
as
Begin
Select * from tblEmployee where Name like '%' + @SearchTerm + '%'
End

Add a content page, and include a GridView control to display the employees.
<asp:GridView ID="GridView1" runat="server">
</asp:GridView>

Include the following MasterType directive on the content page
<%@ MasterType VirtualPath="~/Site.Master" %>

Copy and paste the following code in the code-behind file of the content page. 
protected void Page_Init(object sender, EventArgs e)
{
    Master.SearchButton.Click += new EventHandler(SearchButton_Click);
}

protected void Page_Load(object sender, EventArgs e)
{
    GetData(null);
}

protected void SearchButton_Click(object sender, EventArgs e)
{
    GetData(Master.SearchTerm);   
}

private void GetData(string searchTerm)
{
    string cs = ConfigurationManager.ConnectionStrings["DBCS"].ConnectionString;
    using (SqlConnection con = new SqlConnection(cs))
    {
        SqlCommand cmd = new SqlCommand("spSearchEmployees", con);
        cmd.CommandType = CommandType.StoredProcedure;

        SqlParameter searchParameter = new SqlParameter("@SearchTerm", searchTerm ?? string.Empty);
        cmd.Parameters.Add(searchParameter);
        con.Open();
        GridView1.DataSource = cmd.ExecuteReader();
        GridView1.DataBind();
    }
}

Note: Please include the following USING declarations
using System.Data;
using System.Data.SqlClient;
using System.Configuration;

At this point, run the application and enter a search term in the search textbox on the master page, and click Search button. Notice that the matching employees are displayed in the gridview control on the content page.

Let's say on a specific content page, we don't want this search functionality. If that's the case, we can very easily hide the search interface on the master page. Here are the steps.
Step 1: Add a new content page

Step 2: Include the following MasterType directive on the content page
<%@ MasterType VirtualPath="~/Site.Master" %>

Step 3: Copy and paste the following code in the code-behind file of the content page
protected void Page_Load(object sender, EventArgs e)
{
    Master.SearchPanel.Visible = false;
}

No comments