Scribd
Upload
94 views7 pages

Programe#1: Lab Manual E-Commerce (474 Nal-3)

The document is a 7-page lab manual on e-commerce compiled by Ms. Humera Gull. It contains 6 programs that demonstrate different coding concepts: 1) creating a column chart in Razor, 2) creating a pie chart using data from a database in Razor, 3) displaying data from a database in a HTML table using Razor, 4) creating a basic form to collect and display user input in Razor, 5) using Razor to display different images based on a user's selection, and 6) using the XMLHttpRequest object to asynchronously retrieve and display data.

Uploaded by

Maha Ali
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
94 views7 pages

Programe#1: Lab Manual E-Commerce (474 Nal-3)

The document is a 7-page lab manual on e-commerce compiled by Ms. Humera Gull. It contains 6 programs that demonstrate different coding concepts: 1) creating a column chart in Razor, 2) creating a pie chart using data from a database in Razor, 3) displaying data from a database in a HTML table using Razor, 4) creating a basic form to collect and display user input in Razor, 5) using Razor to display different images based on a user's selection, and 6) using the XMLHttpRequest object to asynchronously retrieve and display data.

Uploaded by

Maha Ali
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 7

Lab Manual E-Commerce (474 Nal-3)

Programe#1
@{
var myChart = new Chart(width: 600, height: 400)
.AddTitle("Employees")
.AddSeries(chartType: "column",
xValue: new[] { "Peter", "Andrew", "Julie", "Mary", "Dave" },
yValues: new[] { "2", "6", "4", "5", "3" })
.Write();
}
Output

_____________________________________________________________________________________
Compiled by: Ms. Humera Gull, dept. of Computer Science, King Khalid University, Abha, KSA
Page 1 of 7
Lab Manual E-Commerce (474 Nal-3)

Programe#2
@{
var db = Database.Open("SmallBakery");
var dbdata = db.Query("SELECT Name, Price FROM Product");
var myChart = new Chart(width: 600, height: 400)
.AddTitle("Product Sales")
.AddSeries(chartType: "Pie",
xValue: dbdata, xField: "Name",
yValues: dbdata, yFields: "Price")
.Write();
}

Output

_____________________________________________________________________________________
Compiled by: Ms. Humera Gull, dept. of Computer Science, King Khalid University, Abha, KSA
Page 2 of 7
Lab Manual E-Commerce (474 Nal-3)

Programe#3
@{
var db = Database.Open("SmallBakery");
var query = "SELECT * FROM Product";
}
<html>
<body>
<h1>Small Bakery Products</h1>
<table border="1" width="100%">
<tr>
<th>Id</th>
<th>Product</th>
<th>Description</th>
<th>Price</th>
</tr>
@foreach(var row in db.Query(query))
{
<tr>
<td>@row.Id</td>
<td>@row.Name</td>
<td>@row.Description</td>
<td style="text-align:right">@row.Price</td>
</tr>
}
</table>
</body>
</html>

Output

_____________________________________________________________________________________
Compiled by: Ms. Humera Gull, dept. of Computer Science, King Khalid University, Abha, KSA
Page 3 of 7
Lab Manual E-Commerce (474 Nal-3)

Programe#4
<!DOCTYPE html>
<html>
<body>
@{
if (IsPost)
{
string companyname = Request["CompanyName"];
string contactname = Request["ContactName"];
<p>You entered: <br>
Company Name: @companyname <br>
Contact Name: @contactname </p>
}
else
{
<form method="post" action="">
Company Name:<br>
<input type="text" name="CompanyName" value=""><br>
Contact Name:<br><br>
<input type="text" name="ContactName" value=""><br><br>
<input type="submit" value="Submit" class="submit">
</form>
}
}
</body>
</html>

Output

_____________________________________________________________________________________
Compiled by: Ms. Humera Gull, dept. of Computer Science, King Khalid University, Abha, KSA
Page 4 of 7
Lab Manual E-Commerce (474 Nal-3)

Programe#5
@{
var imagePath="";
if( Request["Choice"] != null)
{imagePath="images/" + Request["Choice"];}
}
<!DOCTYPE html>
<html>
<body>
<h1>Display Images</h1>
<form method="post" action="">
I want to see:
<select name="Choice">
<option value="Pic1.jpg">Photo 1</option>
<option value="Pic2.jpg">Photo 2</option>
<option value="Pic3.jpg">Photo 3</option>
</select>
<input type="submit" value="Submit">
@if(imagePath != "")
{
<p>
<img src="@imagePath" alt="Sample">
</p>
}
</form>
</body>
</html>

Output

_____________________________________________________________________________________
Compiled by: Ms. Humera Gull, dept. of Computer Science, King Khalid University, Abha, KSA
Page 5 of 7
Lab Manual E-Commerce (474 Nal-3)

Programe#6
<html>
<body>
<h1>The XMLHttpRequest Object</h1>
<h3>Start typing a name in the input field below:</h3>
<form action="">
First name: <input type="text" id="txt1" onkeyup="showHint(this.value)">
</form>
<p>Suggestions: <span id="txtHint"></span></p>

<script>
function showHint(str) {
var xhttp;
if (str.length == 0) {
document.getElementById("txtHint").innerHTML = "";
return;
}
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("txtHint").innerHTML = this.responseText;
}
};
xhttp.open("GET", "gethint.asp?q="+str, true);
xhttp.send();
}
</script>
</body>

_____________________________________________________________________________________
Compiled by: Ms. Humera Gull, dept. of Computer Science, King Khalid University, Abha, KSA
Page 6 of 7
Lab Manual E-Commerce (474 Nal-3)

</html>
Output

_____________________________________________________________________________________
Compiled by: Ms. Humera Gull, dept. of Computer Science, King Khalid University, Abha, KSA
Page 7 of 7

You might also like