Populating a pick list. : The Official Microsoft ASP.NET Forums

Reply

DMT20601

Member

86 Points

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

Reply

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:

@section Scripts{
    <script type="text/javascript" src="~/Scripts/jquery.validate.min.js"></script>
    <script type="text/javascript" src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
}

The greatest pleasure in life is doing what people say you can not do.
Saeed Saedvand

Marked as answer by DMT20601 on Jan 16, 2013 02:33 PM

Reply

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

Reply

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

// Cascading Drop Down list
    
    Layout = null;    @* skip website layout for this page *@ 
 
    // Gethub repo html technique
    // Two tables Nonprofit (NpId) linked to Event (EventId) (FK NpId )
 
    var db = Database.Open("AnySDF"); 
    var data = db.Query("SELECT NpId, NPName FROM Nonprofit ORDER BY NPName");
    var nonprofit = data.Select(item => new SelectListItem { 
        Value = item.NpId.ToString(),
        Text = item.NPName
    });
 }
 
<!DOCTYPE html>
 
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Cascading Dropdown Lists</title>
   <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.1.min.js" type="text/Javascript">
   </script>
        <script>
            $(function () { 
            var eventsSelect = $('#EventId');
                eventsSelect.attr('disabled', true);
                $('#NpId').change(function () {
                    var npId = $(this).val();
                    $.getJSON('/GetEvents/' + npId, function (events) { 
                        eventsSelect.attr('disabled', false);
                        eventsSelect.empty();  
                        eventsSelect.append(
                                $('<option/>')
                                    .attr('value', '') 
                                    .text('-- Select Event --'));
                        $.each(events, function (index, event){
                            eventsSelect.append(
                                $('<option/>')
                                     .attr('value', event.EventId)
                                     .text(event.EventDesc)
                            );
                        });
                      });
                 });
            });
         </script>
     </head>
  <body>
     <div>
         @Html.DropDownList("NpId", "-- Select Nonprofit --", nonprofit)
     </div>
  <div>@Html.DropDownList("EventId", "-- Select Event --", Enumerable.Empty<SelectListItem>())
  </div>
  </body>
</html>

Edited by DMT20601 on Jan 16, 2013 08:44 PM
Edited by DMT20601 on Jan 16, 2013 08:44 PM

Reply

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.

Regards, Mike
Beginning ASP.NET Web Pages with WebMatrix | My Site | Twitter

Reply

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

Edited by DMT20601 on Jan 17, 2013 08:22 PM
Edited by DMT20601 on Jan 17, 2013 08:25 PM

Reply

Mikesdotnett...

All-Star

154951 Points

19870 Posts

Moderator

MVP

Re: Populating a pick list.

Jan 18, 2013 05:03 AM|LINK

DMT20601
I couldn't find any follow on code

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.

Regards, Mike
Beginning ASP.NET Web Pages with WebMatrix | My Site | Twitter

Reply

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?

Reply

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.

Regards, Mike
Beginning ASP.NET Web Pages with WebMatrix | My Site | Twitter

Reply

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)

 $(function (CascadingDropDown) { 
   var eventsSelect = $('#EventId');
       eventsSelect.attr('disabled', true);
       $('#NpId').change(function () { ...

Then when needed in the markup CascadingDropDown();

Populating a pick list. RSS

15 replies

DMT20601

Populating a pick list.

saeed_saedva...

Re: Populating a pick list.

DMT20601

Re: Populating a pick list.

DMT20601

Re: Populating a pick list.

Mikesdotnett...

Re: Populating a pick list.

DMT20601

Re: Populating a pick list.

Mikesdotnett...

Re: Populating a pick list.

DMT20601

DMT20601

Re: Populating a pick list.

Mikesdotnett...

Re: Populating a pick list.

DMT20601

Re: Populating a pick list.

This site is managed for Microsoft by Neudesic, LLC. | © 2013 Microsoft. All rights reserved.

Follow Us On:

Microsoft