Swap Images and Text with ASP.NET
Would you like to make a supermodel page like this one, only in ASP.NET? Translating from PHP to ASP.NET won't be easy, but it won't be nightmarish either. First thing you need to do is creating a page with an *.aspx extension instead of *.php. The first two lines will tell the server that the language we'll be using is C#, and the second line is the start of the C# script, which will run at the server level.
<script language="C#" runat=server>
The public void named seleccion will import two values that it will get from protected void called Page_Load: scotch and xy. Both of them are strings. Two arrays are declared inside this void. The array info_magda will contain information about the three supermodels in the page, and pict_Array will contain the names and directory name of their pictures. Using switch, we will determine what information and what picture will appear when the page loads.
If the value of xy is Magdalena, then Supermtext.InnerText will equal "Magdalena Wrobel". Notice that Supermtext was not declared inside the script. This won't produce an error because we have <h1 id="Supermtext" runat="server"></h1> inside the <body> tag. Using Supermtext.InnerText, we tell the server what to put inside <h1>. Same thing applies to Info_de.Text, which will output information on the supermodel you choose on the page.
public void seleccion(string scotch, string xy)
{
int x = 0;
string[] info_magda = new string[3];
string[,] pict_Array = new string[3,6];
info_magda[0] = "Birth Date: 1975 <br /> Birth Place: Gdansk, Poland. <br />Hair Color: Dark brown. <br />Eye Color: Blue";
info_magda[1] = "Birth Date : August 7, 1980<br />Birth Place : Saint-Mars-d'Autille, France<br />Height : 177 cm 5'10''<br />Measurements : 33-22-33<br />Select Case Daniels";
info_magda[2] = "Birth Date : december 12, 1977<br />Birth Place : Springdale, Arkansas<br />Height : 177 cm 5'10''<br />Eye-color: Hazel";
pict_Array[0,1] = "graficos\\1012378117-Bebe-007.jpg";
pict_Array[0,2] = "graficos\\1012378131-Bebe-008.jpg";
pict_Array[0,3] = "graficos\\26.jpg";
pict_Array[0,4] = "graficos\\bas_magdalena06.jpg";
pict_Array[0,5] = "graficos\\bas_magdalena04.jpg";
pict_Array[1,1] = "graficos\\aurelie.jpg";
pict_Array[1,2] = "graficos\\aurelie2.jpg";
pict_Array[1,3] = "graficos\\aurelie3.jpg";
pict_Array[1,4] = "graficos\\aureli27.jpg";
pict_Array[1,5] = "graficos\\aurelie-home.jpg";
pict_Array[2,1] = "graficos\\hall1.jpg";
pict_Array[2,2] = "graficos\\hall2.jpg";
pict_Array[2,3] = "graficos\\hall3.jpg";
pict_Array[2,4] = "graficos\\hall4.jpg";
pict_Array[2,5] = "graficos\\hall5.jpg";
switch (xy)
{
case "Magdalena":
Supermtext.InnerText = "Magdalena Wrobel";
Info_de.Text = info_magda[0];
x = 0;
break;
case "Aurelie":
Supermtext.InnerText = "Aurelie Claudel";
Info_de.Text = info_magda[1];
x = 1;
break;
case "Hall":
Supermtext.InnerText = "Bridget Hall";
Info_de.Text = info_magda[2];
x = 2;
break;
}
switch (scotch)
{
case "pict1":
img_src.Src = pict_Array[x,1];
break;
case "pict2":
img_src.Src = pict_Array[x,2];
break;
case "pict3":
img_src.Src = pict_Array[x,3];
break;
case "pict4":
img_src.Src = pict_Array[x,4];
break;
case "pict5":
img_src.Src = pict_Array[x,5];
break;
}
}
Every time you load or reload the webpage, PageLoad will be called. This protected void won't return a value, but it is the heart of your script. The string name_1 gets its value from calling name, and the value of name will appear as a parameter on the page's URL, as if a form with Method=”GET” was being used, and the same thing can be said about aurel. We won't be passing the values of aurel and name at the same time every time we click on a link, so one of them will always be a null value. This can be a problem when aurel is not null, and name is. That's because you could end up looking at pictures of a supermodel you didn't choose. To solve this problem, we put the value of name inside the Cache using Cache["namex"] = name_1;. Once we are done, we call seleccion and pass the values of name_1 and aurel.
protected void Page_Load(object sender, EventArgs e)
{
string name_1;
name_1 = Request.QueryString["name"];
string pict = Request.QueryString["aurel"];
img_src.Width = 200;
if (name_1 == null)
{
if ( Cache["namex"] == null)
{
name_1 = "Aurelie";
}
else
{
name_1 = Cache["namex"].ToString();
}
}
if (name_1 != null)
{
Cache["namex"] = name_1;
}
if (pict == null)
{
pict = "pict1";
}
seleccion(pict, name_1);
}
</script>
The HTML is not rocket science. Just examine the areas with the instruction runat=”server”. All of them are modified inside the public void seleccion. Notice that all the links have things like this ?name=Aurelie or this ?aurel=pict1 inside the “”s. That's because we want to pass the values to the script when the page is reloaded without having to put them inside a <form> tag.
<head>
<title>Supermodels Page</title>
<link href="cascading_sheets/modelos.css" rel="stylesheet" type="text/css">
</head>
<body bgcolor="#FFFFFF">
<div>
<center>
<div id="title_bar">
<h1 id="Supermtext" runat="server"></h1></div>
</div>
</center>
<br />
<p>
<b><br /><br /><center>
<div id="super_chooser">
<a href="supermodels.aspx?name=Magdalena">Magdalena Wrobel</a> |
<a href="supermodels.aspx?name=Aurelie">Aurelie Claudel</a> |
<a href="supermodels.aspx?name=Hall">Bridget Hall</a>
</div></b></center>
<br /><br /><br />
<a href="supermodels.aspx?aurel=pict1">Picture1</a> |
<a href="supermodels.aspx?aurel=pict2">Picture 2</a> |
<a href="supermodels.aspx?aurel=pict3">Picture 3</a> |
<a href="supermodels.aspx?aurel=pict4">Picture 4</a> |
<a href="supermodels.aspx?aurel=pict5">Picture 5</a>
</p>
<div style="float: left;">
<img id="img_src" runat="server" />
</div>
<div id="infor_super" >
<asp:Label id="Info_de" runat="server" /> </div>
</div>
<div style="clear:both;">
<p>Here we go again:</p>
<asp:Label id="Info_de_2" runat="server" /> </div>
</body>
</html>
That's it. If you want to download the script, pictures and all, click here. The zip file also contains a version of the script created with VB, and a PHP version.



