Programmatically Working with User Controls
Denise Wynn
January 6, 2005
Download the example code for this article. WorkingWithControls.zip
In this article we are going to demonstrate how you can work with your custom user controls programmatically. This article builds on the code from the previous articles in the series.
To demonstrate this we are going to be setting the SourceXml property of our navbar control based on a querystring parameter. What we want to do is specify a language in our querystring and use that information to determine which xml file to use.
Creating our language specific navigation xml
At the moment we only have one xml file that we're using to populate our navbar control so we need to create a second one. Create a text file called nav2.xml in your test directory and add the following xml to it.
<?xml version="1.0" encoding="utf-8" ?> <items> <item title="Huis" url="/test/default.aspx?lang=nl" /> <item title="Eerste Pagina" url="/test/firstpage.aspx?lang=nl" /> <item title="Tweede Pagina" url="/test/secondpage.aspx?lang=nl" /> <item title="Derde Pagina" url="/test/thirdpage.aspx?lang=nl" /> <item title="Vierde Pagina" url="/test/fourthpage.aspx?lang=nl" /> </items>
You'll notice that this xml file is very similar to nav.xml - the difference is the title values are in Dutch instead of English and a querystring has been added to the url values.
Adding an id to our user control
Open the template.aspx page in your test directory for editing and modify the following bold line.
<%@ Page runat="server" language="c#" %>
<%@ Register TagPrefix="nbs" TagName="banner" Src="banner.ascx" %>
<%@ Register TagPrefix="nbs" TagName="footer" Src="footer.ascx" %>
<%@ Register TagPrefix="nbs" TagName="navbar" Src="navbar.ascx" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>User Control Template</title>
<link rel="stylesheet" type="text/css" href="template.css" />
</head>
<body>
<nbs:banner runat="server" />
<nbs:navbar id="pageNav" runat="server"/>
<p></p>
<nbs:footer runat="server" />
</body>
</html>
Previously we had <nbs:navbar sourcexml="nav.xml" runat="server"/> but we need to give the control an id so we can reference it. We're also removing the sourcexml attribute since we are going to be setting that programmatically. If you were to load the page right now in a browser you would get an error because the control doesn't know which xml file to use.
Template.cs
Now we need a way to tell our page which xml file to use to populate the navbar control. Create a new text file in the test directory called template.cs and add the following text to it.
public void Page_Load(object o, EventArgs e)
{
string lang = Request.QueryString.Get("lang");
switch(lang)
{
case "nl":
pageNav.SourceXml = "nav2.xml";
break;
case "en":
pageNav.SourceXml = "nav.xml";
break;
default:
pageNav.SourceXml = "nav.xml";
break;
}
}
This code is taking the value of the lang querystring parameter and using that to determine what xml file to use for our navbar control. The switch statement determines which file to set as the pageNav.SourceXml based on the lang string and it also sets a default in case the string is not a known value or it's not even set. Right now the known values are nl for Dutch and en for English with the English nav.xml file as our default. In the future we could easily add more languages. I used the ISO 639 language codes to set the value of the lang querystring parameter.
Go back to the template.aspx file add the following bold line.
<%@ Page runat="server" language="c#" %>
<%@ Register TagPrefix="nbs" TagName="banner" Src="banner.ascx" %>
<%@ Register TagPrefix="nbs" TagName="footer" Src="footer.ascx" %>
<%@ Register TagPrefix="nbs" TagName="navbar" Src="navbar.ascx" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<script runat="server" language="c#" src="template.cs"></script>
<html>
<head>
<title>User Control Template</title>
<link rel="stylesheet" type="text/css" href="template.css" />
</head>
<body>
<nbs:banner runat="server" />
<nbs:navbar id="pageNav" runat="server"/>
<p></p>
<nbs:footer runat="server" />
</body>
</html>
By adding this line we tell the page to load the template.cs file and run it on the server side.
Now we are ready to test our template page. In your browser go to http://localhost/test/template.aspx. The page should look the same as it always has even though we didn't specify a sourcexml attribute in our navbar control. Now we need to add the querystring to test our code. Change the url to http://localhost/test/template.aspx?lang=nl. Now when you view the page you should see that the text of the navbar control is in Dutch.
Putting it to work
As we did in the previous articles lets create some pages from our template so we can really see our code in action. In the test directory make a copy of template.aspx and call it firstpage.aspx. Open firstpage.aspx in a text editor and add the following bold line.
<%@ Page runat="server" language="c#" %>
<%@ Register TagPrefix="nbs" TagName="banner" Src="banner.ascx" %>
<%@ Register TagPrefix="nbs" TagName="footer" Src="footer.ascx" %>
<%@ Register TagPrefix="nbs" TagName="navbar" Src="navbar.ascx" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<script runat="server" language="c#" src="template.cs"></script>
<html>
<head>
<title>User Control Template</title>
<link rel="stylesheet" type="text/css" href="template.css" />
</head>
<body>
<nbs:banner runat="server" />
<nbs:navbar id="pageNav" runat="server"/>
<p>This is my first page with my new template.</p>
<nbs:footer runat="server" />
</body>
</html>
Make additional copies of template.aspx called default.aspx, secondpage.aspx, thirdpage.aspx, and fourthpage.aspx. Change the content in each page to make it unique.
If you already have these pages from working through the previous articles you can update them with the new lines from this article or copy them from the example code download.
In Conclusion
This article showed you one way to programmatically work with user controls by dynamically setting their properties based on a querystring parameter.