I'm using Webmatrix and the Starter site. Back in September 2012 I posted a question about setting up for pick lists. I took that advice and now have 3 or 4 very small pick list tables with just a PK and a value. The STATUS table has five or six entries. It's
time to hook this pick list to a form object. I plan to add this to the form in the starter site.
(1) Can I point the html <SELECT><options> command directly at the status table or do I need to be doing something else?
(2) Since the data comes from the pick list does it still need to be validated.
Also, you can troubleshoot this yourself using the developer tools that come with Chrome or IE. Hit F12 and choose Network to examine the request and response. There should be a request to GetEvents. See what the response is.
I saw the reference in your article \GetProducts\ but only that word was contained is the closing paragraph. I couldn't find any follow on code. I figured it was all contained in the script.
This is my guess: The function is calling a page \GetEvents\ where there will be no markup, (layout=null) just a variable to hold the SELECT query (collection) from the second table, filtered by the index Id of the first table.
eventsSelect db.Query("SELECT EventId, EventDesc FROM Event WHERE EventID = @0, NpId")
and the top entry of the second list startes with -- Select Event --
I have no problem being very wrong as I have yet to study jQuery scripts.
@{
Layout = null;
var categoryId = UrlData[0].IsEmpty() ? 1 : UrlData[0].AsInt();
var db = Database.Open("Northwind");
var sql = "SELECT ProductId, ProductName FROM Products WHERE CategoryId = @0 ORDER BY ProductName";
var products = db.Query(sql, categoryId);
Json.Write(products, Response.Output);
}
Its uses Json.Write to send data to the AJAX call and doesn't include any default selection text.
This code does work within Webmatrix. Thank you, Mr. Brind.
For testing I created two files: Work.cshtml and GetEvents.cshtml. I set both to Layout=null to shut off any automatic markup getting started from any _page.start folders. Work.cshtml populates the primary picklist and the script takes the item selected
and calls the other page that populates the secondary picklist. It all works as advertised.
What I'm yet to understand is how the script gets called unless it just automatic in the test file, because it is part of the head tag?
Now that is works, and it is very very fiddly, I want to move this into the Starter Site Registration page. To continue to keep it DRY I will save the script to a file (CascadingDropDown.js) and list that file with the other scripts in the Script Section
of the head tag.
I can put the primary db.query code above the markup to populate the primary list, but how/where do you call the script to fire the function.
which basically says "execute all of the code in the function block when the document (web page) is fully ready (loaded in the browser)". One of the bits of code that gets executed is an event handler that is registered for the onchange event of the first
select list. Whenever the selected value is changed, the AJAX request (getJSON) is called and the resulting data is parsed and used to populate the second select list.
If you copy that chunk of code and put it in a separate file, you just need to reference the file and it will continue to work.
"If you copy that chunk of code and put it in a separate file, you just need to reference the file and it will continue to work."
I did copy that chunk of code to the file CascadingDropDown.js .... and stripped off the script tags. So that file is listed in the script section of the head tag.
So, how do you do the reference. it seems to have no name. So, do I name the chunk of code (I'm guessing)
DMT20601
Member
86 Points
197 Posts
Populating a pick list.
Jan 15, 2013 05:16 PM|LINK
I'm using Webmatrix and the Starter site. Back in September 2012 I posted a question about setting up for pick lists. I took that advice and now have 3 or 4 very small pick list tables with just a PK and a value. The STATUS table has five or six entries. It's time to hook this pick list to a form object. I plan to add this to the form in the starter site.
(1) Can I point the html <SELECT><options> command directly at the status table or do I need to be doing something else?
(2) Since the data comes from the pick list does it still need to be validated.
Thanks
Dallas in Maryland
saeed_saedva...
Member
408 Points
74 Posts
Re: Populating a pick list.
Jan 15, 2013 06:04 PM|LINK
you can use <select><option> as pick list. and if you can use this link for relational lists:
http://www.mikesdotnetting.com/Article/196/WebMatrix-jQuery-Cascading-Dropdown-Lists
for validationg <select><option>, it's too easy
here i send you and example:
@{ Validation.RequireField("city","select your city"); } <body> <form method="post"> <select name="city"> <option value="">select</option> <option value="1">city 1</option> <option value="2">city 2</option> <option value="3">city 3</option> <option value="4">city 4</option> </select><input type="submit" value="submit"> </form> </body>and for client side validation add these scripts on page:
Saeed Saedvand
DMT20601
Member
86 Points
197 Posts
Re: Populating a pick list.
Jan 16, 2013 02:33 PM|LINK
Thanks for your direction ... the link to Cascading Dropdown got me started in the right direction for a dynamic picklist.
Your example of the static picklist (hand coded) would work perfectly in the starter page.
Dallas in Maryland
DMT20601
Member
86 Points
197 Posts
Re: Populating a pick list.
Jan 16, 2013 08:42 PM|LINK
I pulled a copy of the Cascading Drop Down sample from GetHub.
I have been at this all day but the second table remains silent.
It runs, and populated the first list, No syntax errors, the second table just doesn't respond.
I have mulitple entries in the second table that should populate from the selection of the first table.
What did I miss?
Thanks
Mikesdotnett...
All-Star
154951 Points
19870 Posts
Moderator
MVP
Re: Populating a pick list.
Jan 17, 2013 05:10 AM|LINK
Where's the code for your GetEvents page?
Also, you can troubleshoot this yourself using the developer tools that come with Chrome or IE. Hit F12 and choose Network to examine the request and response. There should be a request to GetEvents. See what the response is.
Beginning ASP.NET Web Pages with WebMatrix | My Site | Twitter
DMT20601
Member
86 Points
197 Posts
Re: Populating a pick list.
Jan 17, 2013 08:21 PM|LINK
I saw the reference in your article \GetProducts\ but only that word was contained is the closing paragraph. I couldn't find any follow on code. I figured it was all contained in the script.
This is my guess: The function is calling a page \GetEvents\ where there will be no markup, (layout=null) just a variable to hold the SELECT query (collection) from the second table, filtered by the index Id of the first table.
eventsSelect db.Query("SELECT EventId, EventDesc FROM Event WHERE EventID = @0, NpId")and the top entry of the second list startes with -- Select Event --
I have no problem being very wrong as I have yet to study jQuery scripts.
Dallas in Maryland
Mikesdotnett...
All-Star
154951 Points
19870 Posts
Moderator
MVP
Re: Populating a pick list.
Jan 18, 2013 05:03 AM|LINK
It's the third block of code in the article:
@{ Layout = null; var categoryId = UrlData[0].IsEmpty() ? 1 : UrlData[0].AsInt(); var db = Database.Open("Northwind"); var sql = "SELECT ProductId, ProductName FROM Products WHERE CategoryId = @0 ORDER BY ProductName"; var products = db.Query(sql, categoryId); Json.Write(products, Response.Output); }Its uses Json.Write to send data to the AJAX call and doesn't include any default selection text.
Beginning ASP.NET Web Pages with WebMatrix | My Site | Twitter
DMT20601
Member
86 Points
197 Posts
Re: Populating a pick list.
Jan 18, 2013 08:33 PM|LINK
This code does work within Webmatrix. Thank you, Mr. Brind.
For testing I created two files: Work.cshtml and GetEvents.cshtml. I set both to Layout=null to shut off any automatic markup getting started from any _page.start folders. Work.cshtml populates the primary picklist and the script takes the item selected and calls the other page that populates the secondary picklist. It all works as advertised.
What I'm yet to understand is how the script gets called unless it just automatic in the test file, because it is part of the head tag?
Now that is works, and it is very very fiddly, I want to move this into the Starter Site Registration page. To continue to keep it DRY I will save the script to a file (CascadingDropDown.js) and list that file with the other scripts in the Script Section of the head tag.
I can put the primary db.query code above the markup to populate the primary list, but how/where do you call the script to fire the function.
Is @Html.DropDownList() firing the function?
Mikesdotnett...
All-Star
154951 Points
19870 Posts
Moderator
MVP
Re: Populating a pick list.
Jan 18, 2013 09:07 PM|LINK
The first bit of the script:
$(function(){...is shorthand for
$(document).ready(function(){...[ref: http://api.jquery.com/ready/]
which basically says "execute all of the code in the function block when the document (web page) is fully ready (loaded in the browser)". One of the bits of code that gets executed is an event handler that is registered for the onchange event of the first select list. Whenever the selected value is changed, the AJAX request (getJSON) is called and the resulting data is parsed and used to populate the second select list.
If you copy that chunk of code and put it in a separate file, you just need to reference the file and it will continue to work.
Beginning ASP.NET Web Pages with WebMatrix | My Site | Twitter
DMT20601
Member
86 Points
197 Posts
Re: Populating a pick list.
Jan 18, 2013 09:24 PM|LINK
"If you copy that chunk of code and put it in a separate file, you just need to reference the file and it will continue to work."
I did copy that chunk of code to the file CascadingDropDown.js .... and stripped off the script tags. So that file is listed in the script section of the head tag.
So, how do you do the reference. it seems to have no name. So, do I name the chunk of code (I'm guessing)
Then when needed in the markup CascadingDropDown();