I am educating myself to use WebMatrix, pretty much studying sample code and modifying to suit my needs.
My next task is to understand searching and filtering data in a webgrid. I have found an example that could work for me.
Don't know why I cannot enter a hyperlink, so here it is straight: http://www.mikesdotnetting.com/Article/180/Displaying-Search-Results-In-A-WebGrid
I could really use some guidance as to where to put this section of code. It appears this should not go in the page that displays the webgrid, no clue where it should go.
jquery seems to be a piece of code magic that appears out of the blue sky. Is that something that I need to install as a helper? Where does it come from?
I think I got a good handle on the code block below, except for the bold section :
@{
Page.Title = "Filter WebGrid";
var db = Database.Open("Northwind");
var query = "SELECT DISTINCT Country FROM Customers ORDER BY Country";
var countries = db.Query(query);
query = "SELECT * FROM Customers WHERE CompanyName LIKE @0 AND Country LIKE @1";
var company = "%" + Request["company"] + "%";
var country = "%" + Request["country"] + "%";
var data = db.Query(query, company, country);
var columns = new[]{"CustomerID", "CompanyName", "ContactName", "Address", "City", "Country", "Phone"};
var grid = new WebGrid(data, columnNames: columns, rowsPerPage: 6);
}
You need to learn the basics behind Web Pages. I suggest you go through the tutorials found here:
http://www.asp.net/web-pages/tutorials or get yourself a book, perhaps.
In the meantime, jQuery is a javascript library. You get it from here:
http://jquery.com/ . It is the most popular way to add client-side code to web sites these days.
The tutorial in you last link from your reply is quite educational, however I think there is something wrong with the code for UpdateProducts.cshtml
To educate myself I have created the table in my development environment, and also created the various pages. I have list product, delete product working, however edit product and update product don't work.
EditProducts.cshtml correctly passes the productid to updateproducts.cshtml. I know it passes through the IsPost && Validation judging by a successful response redirect.
I used ultracompare to check for differences between the sample code and what I have. The only difference is the database name. I did verify that my database does have the product table and that the column names are identifical.
Anyway here is the code for editproducts
@{
var db = Database.Open("try1");
var selectQueryString = "SELECT * FROM Product ORDER BY Name";
}
<!DOCTYPE html>
<html>
<head>
<title>Edit Products</title>
<style type="text/css">
table, th, td {
border: solid 1px #bbbbbb;
border-collapse: collapse;
padding: 2px;
}
</style>
</head>
<body>
<h1>Edit Small Bakery Products</h1>
<table>
<thead>
<tr>
<th> </th>
<th>Name</th>
<th>Description</th>
<th>Price</th>
</tr>
</thead>
<tbody>
@foreach (var row in db.Query(selectQueryString)) {
<tr>
<td><a href="@Href("~/UpdateProducts", row.Id)">Edit</a></td>
<td>@row.Name</td>
<td>@row.Description</td>
<td>@row.Price</td>
</tr>
}
</tbody>
</table>
</body>
</html>
And here is the code updateproducts:
@{
Validation.RequireField("Name", "Product name is required.");
Validation.RequireField("Description", "Product description is required.");
Validation.RequireField("Price", "Product price is required.");
var db = Database.Open("try1");
var selectQueryString = "SELECT * FROM Product WHERE Id=@0";
var ProductId = UrlData[0];
if (ProductId.IsEmpty()) {
Response.Redirect("~/EditProducts");
}
var row = db.QuerySingle(selectQueryString, ProductId);
var Name = row.Name;
var Description = row.Description;
var Price = row.Price;
if (IsPost && Validation.IsValid()) {
var updateQueryString =
"UPDATE Product SET Name=@0, Description=@1, Price=@2 WHERE Id=@3" ;
db.Execute(updateQueryString, Name, Description, Price, ProductId);
Response.Redirect(@Href("~/EditProducts"));
}
}
<!DOCTYPE html>
<html>
<head>
<title>Add Products</title>
<style type="text/css">
label { float: left; width: 8em; text-align: right;
margin-right: 0.5em;}
fieldset { padding: 1em; border: 1px solid; width: 35em;}
legend { padding: 2px 4px; border: 1px solid; font-weight: bold;}
.validation-summary-errors {font-weight:bold; color:red; font-size:11pt;}
</style>
</head>
<body>
<h1>Update Product</h1>
@Html.ValidationSummary("Errors with your submission:")
<form method="post" action="">
<fieldset>
<legend>Update Product</legend>
<div>
<label>Name:</label>
<input name="Name" type="text" size="50" value="@Name" />
</div>
<div>
<label>Description:</label>
<input name="Description" type="text" size="50"
value="@Description" />
</div>
<div>
<label>Price:</label>
<input name="Price" type="text" size="50" value="@Price" />
</div>
<div>
<label> </label>
<input type="submit" value="Update" class="submit" />
</div>
</fieldset>
</form>
</body>
</html>
Oops - they updated the code to version 2 and now it contains a logical flaw.
wavemaster
var row = db.QuerySingle(selectQueryString, ProductId);
var Name = row.Name;
var Description = row.Description;
var Price = row.Price;
On every page load, it sets the values of the parameters to the result of the existing record, and then passes those back to the query, so the database is being updated, but the values are the same.
Amend this section of code as follows:
if (IsPost && Validation.IsValid()) {
var updateQueryString = "UPDATE Product SET Name=@0, Description=@1, Price=@2 WHERE Id=@3" ;
//Add the following 3 lines to take the posted values
Name = Request["Name"];
Description = Request["Description"];
Price = Request["Price"];
db.Execute(updateQueryString, Name, Description, Price, ProductId);
Response.Redirect("~/EditProducts");
}
wavemaster
Participant
1295 Points
1131 Posts
displaying search results in gridview
May 30, 2012 02:23 AM|LINK
I am educating myself to use WebMatrix, pretty much studying sample code and modifying to suit my needs.
My next task is to understand searching and filtering data in a webgrid. I have found an example that could work for me.
Don't know why I cannot enter a hyperlink, so here it is straight: http://www.mikesdotnetting.com/Article/180/Displaying-Search-Results-In-A-WebGrid
I could really use some guidance as to where to put this section of code. It appears this should not go in the page that displays the webgrid, no clue where it should go.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>@Page.Title</title> <script src="@Href("~/scripts/jquery-1.6.2.min.js")" type="text/javascript"></script> <link href="@Href("~/styles/site.css")" rel="stylesheet" /> @RenderSection("script", required: false) </head> <body> @RenderBody() </body> </html>jquery seems to be a piece of code magic that appears out of the blue sky. Is that something that I need to install as a helper? Where does it come from?
I think I got a good handle on the code block below, except for the bold section :
@{ Page.Title = "Filter WebGrid"; var db = Database.Open("Northwind"); var query = "SELECT DISTINCT Country FROM Customers ORDER BY Country"; var countries = db.Query(query); query = "SELECT * FROM Customers WHERE CompanyName LIKE @0 AND Country LIKE @1"; var company = "%" + Request["company"] + "%"; var country = "%" + Request["country"] + "%"; var data = db.Query(query, company, country); var columns = new[]{"CustomerID", "CompanyName", "ContactName", "Address", "City", "Country", "Phone"}; var grid = new WebGrid(data, columnNames: columns, rowsPerPage: 6); }Where do @0 and @1 come from?
TIA Robert
Mikesdotnett...
All-Star
154957 Points
19873 Posts
Moderator
MVP
Re: displaying search results in gridview
May 30, 2012 04:36 AM|LINK
You need to learn the basics behind Web Pages. I suggest you go through the tutorials found here: http://www.asp.net/web-pages/tutorials or get yourself a book, perhaps.
In the meantime, jQuery is a javascript library. You get it from here: http://jquery.com/ . It is the most popular way to add client-side code to web sites these days.
The @0 and @1 symbols are parameter markers. They are explained in the series of tutorials I linked to. See the one on working with data. http://www.asp.net/web-pages/tutorials/data/5-working-with-data
Beginning ASP.NET Web Pages with WebMatrix | My Site | Twitter
wavemaster
Participant
1295 Points
1131 Posts
Re: displaying search results in gridview
Jun 09, 2012 11:31 PM|LINK
MIke, your site is currently down as such no more of your fine examples. Will you be putting it back online soon?
TIA
Robert
Mikesdotnett...
All-Star
154957 Points
19873 Posts
Moderator
MVP
Re: displaying search results in gridview
Jun 10, 2012 06:59 AM|LINK
Must have been a temporary thing while I was asleep. Seems ok to me.
Beginning ASP.NET Web Pages with WebMatrix | My Site | Twitter
wavemaster
Participant
1295 Points
1131 Posts
Re: displaying search results in gridview
Jun 17, 2012 07:48 PM|LINK
I think I understand the parameter markers now.
The tutorial in you last link from your reply is quite educational, however I think there is something wrong with the code for UpdateProducts.cshtml
To educate myself I have created the table in my development environment, and also created the various pages. I have list product, delete product working, however edit product and update product don't work.
EditProducts.cshtml correctly passes the productid to updateproducts.cshtml. I know it passes through the IsPost && Validation judging by a successful response redirect.
It is not updating anything.
Mikesdotnett...
All-Star
154957 Points
19873 Posts
Moderator
MVP
Re: displaying search results in gridview
Jun 17, 2012 08:38 PM|LINK
Difficult to diagnose without seeing your code.
Beginning ASP.NET Web Pages with WebMatrix | My Site | Twitter
wavemaster
Participant
1295 Points
1131 Posts
Re: displaying search results in gridview
Jun 17, 2012 10:07 PM|LINK
The code from tutorial is the same as mine, updateproducts.cshtml
http://www.asp.net/web-pages/tutorials/data/5-working-with-data
Mikesdotnett...
All-Star
154957 Points
19873 Posts
Moderator
MVP
Re: displaying search results in gridview
Jun 18, 2012 04:44 AM|LINK
That code works, so I suspect that your code is not actually the same.
Beginning ASP.NET Web Pages with WebMatrix | My Site | Twitter
wavemaster
Participant
1295 Points
1131 Posts
Re: displaying search results in gridview
Jun 18, 2012 12:51 PM|LINK
I used ultracompare to check for differences between the sample code and what I have. The only difference is the database name. I did verify that my database does have the product table and that the column names are identifical.
Anyway here is the code for editproducts
@{ var db = Database.Open("try1"); var selectQueryString = "SELECT * FROM Product ORDER BY Name"; } <!DOCTYPE html> <html> <head> <title>Edit Products</title> <style type="text/css"> table, th, td { border: solid 1px #bbbbbb; border-collapse: collapse; padding: 2px; } </style> </head> <body> <h1>Edit Small Bakery Products</h1> <table> <thead> <tr> <th> </th> <th>Name</th> <th>Description</th> <th>Price</th> </tr> </thead> <tbody> @foreach (var row in db.Query(selectQueryString)) { <tr> <td><a href="@Href("~/UpdateProducts", row.Id)">Edit</a></td> <td>@row.Name</td> <td>@row.Description</td> <td>@row.Price</td> </tr> } </tbody> </table> </body> </html>And here is the code updateproducts:
@{ Validation.RequireField("Name", "Product name is required."); Validation.RequireField("Description", "Product description is required."); Validation.RequireField("Price", "Product price is required."); var db = Database.Open("try1"); var selectQueryString = "SELECT * FROM Product WHERE Id=@0"; var ProductId = UrlData[0]; if (ProductId.IsEmpty()) { Response.Redirect("~/EditProducts"); } var row = db.QuerySingle(selectQueryString, ProductId); var Name = row.Name; var Description = row.Description; var Price = row.Price; if (IsPost && Validation.IsValid()) { var updateQueryString = "UPDATE Product SET Name=@0, Description=@1, Price=@2 WHERE Id=@3" ; db.Execute(updateQueryString, Name, Description, Price, ProductId); Response.Redirect(@Href("~/EditProducts")); } } <!DOCTYPE html> <html> <head> <title>Add Products</title> <style type="text/css"> label { float: left; width: 8em; text-align: right; margin-right: 0.5em;} fieldset { padding: 1em; border: 1px solid; width: 35em;} legend { padding: 2px 4px; border: 1px solid; font-weight: bold;} .validation-summary-errors {font-weight:bold; color:red; font-size:11pt;} </style> </head> <body> <h1>Update Product</h1> @Html.ValidationSummary("Errors with your submission:") <form method="post" action=""> <fieldset> <legend>Update Product</legend> <div> <label>Name:</label> <input name="Name" type="text" size="50" value="@Name" /> </div> <div> <label>Description:</label> <input name="Description" type="text" size="50" value="@Description" /> </div> <div> <label>Price:</label> <input name="Price" type="text" size="50" value="@Price" /> </div> <div> <label> </label> <input type="submit" value="Update" class="submit" /> </div> </fieldset> </form> </body> </html>Mikesdotnett...
All-Star
154957 Points
19873 Posts
Moderator
MVP
Re: displaying search results in gridview
Jun 18, 2012 01:15 PM|LINK
Oops - they updated the code to version 2 and now it contains a logical flaw.
On every page load, it sets the values of the parameters to the result of the existing record, and then passes those back to the query, so the database is being updated, but the values are the same.
Amend this section of code as follows:
if (IsPost && Validation.IsValid()) { var updateQueryString = "UPDATE Product SET Name=@0, Description=@1, Price=@2 WHERE Id=@3" ; //Add the following 3 lines to take the posted values Name = Request["Name"]; Description = Request["Description"]; Price = Request["Price"]; db.Execute(updateQueryString, Name, Description, Price, ProductId); Response.Redirect("~/EditProducts"); }Beginning ASP.NET Web Pages with WebMatrix | My Site | Twitter