Help: Trying to make connected dropdown lists in Atlas.

Rate It (1)

Last post 12-12-2005 10:34 PM by conga. 33 replies.

Sort Posts:

  • Confused [8-)] Help: Trying to make connected dropdown lists in Atlas.

    09-19-2005, 7:27 PM
    • Member
      355 point Member
    • Dr.NETjes
    • Member since 02-13-2004, 2:39 PM
    • Posts 71
    After attending the PDC, I thought it would be nice to use Atlas for solving a common postback-overhead problem:
    a dropdown list that fills the items of a second dropdown list when the user changes the selection (i.e. master-detail).

    An good example (e.g. used by Michael Schwarz for demonstrating Ajax.NET) is the case where the first dropdown list shows a list of car brands, and the second dropdown shows a list of available models for the selected brand. When selecting another brand, the second list should be filled clientside, so no need for an autopostback of the first dropdown list!

    Using ASP.NET 2.0 Client Script Callback this was easy to implement. Also using the Ajax.NET lib I could implement this within 5 minutes. But when trying to implement this with Atlas, I gave up after trying for 2 hours! I couldn't find any documentation on how to work this out. I think for a framework as complex as Atlas, working without documentation or intellisense is just to difficult for most developers (including me ;).

    Does anyone know if Atlas supports binding webservice-output to a dropdown list (i.e. "select" tag)?
    Maybe someone could post some example code?
  • Re: Help: Trying to make connected dropdown lists in Atlas.

    09-20-2005, 3:36 PM
    • Participant
      1,455 point Participant
    • ShankuN
    • Member since 06-14-2002, 5:26 PM
    • Redmond, WA
    • Posts 287
    • AspNetTeam

    Here's a simple example that uses client-side script (not the Atlas controls). In this case, the example uses two web services - one that implements a GetItems without parameters, and one that implements a GetItems with a single parameter.

    <html>

    <head>
        <atlas:Script runat="server" Path="~/ScriptLibrary/AtlasRuntime.js" />
    </head>

    <body onLoad="OnLoad();" >

        <select id="list1" onchange="OnSelect();"></select><br />
        <select id="list2"></select>

    </body>

    <script src="Service1.asmx/js" type="text/javascript"></script>
    <script src="Service2.asmx/js" type="text/javascript"></script>

    <script type="text/javascript">

    function OnLoad()
    {
        Service1.GetItems(OnGetMasterItems);
    }

    function OnGetMasterItems(results)
    {
        FillDropdown(document.getElementById('list1'), results);
    }

    function OnSelect()
    {
        Service2.GetItems(document.getElementById('list1').value, OnGetChildItems);
    }

    function OnGetChildItems(results)
    {
        FillDropdown(document.getElementById('list2'), results);
    }

    function FillDropdown(dropdown, items)
    {
        dropdown.innerHTML = '';
        for (var i = 0; i < items.length; i++) {
            var option = document.createElement("option");
            option.innerText = items.i;
            option.value = items.i;
            dropdown.appendChild(option);
        }

    }


    </script>

    </html>

    Later this week, I'll post a sample that shows how to do a master-details scenario with Atlas controls.

    Thanks,

    Shanku Niyogi





    This posting is provided "AS IS" with no warranties, and confers no rights.
  • Hmm [^o)] Re: Help: Trying to make connected dropdown lists in Atlas.

    09-20-2005, 4:47 PM
    • Member
      355 point Member
    • Dr.NETjes
    • Member since 02-13-2004, 2:39 PM
    • Posts 71
    Hi Shanku,

    Using Client Script Callbacks in ASP.NET 2.0, I'd already created a similar example. But thanks anyway for the quick response!
    The only problem with hand-writing the JavaScript is that we make compatibility errors (i.e. in your example option.innerText is only valid for IE browsers; FireFox needs option.text).

    So I love to see this scenario using the declarative cross-browser Atlas controls. I'm intending to use this 'master-detail' scenario as an example to show everyone in my company the pros/cons of the existing techniques: "plain ASP.NET", "Client Script Callbacks", "Ajax.NET" and "Atlas".

    I think Atlas has some great potential, but needs to be made easier for developers. But I'm sure you guys realize this :)

    Thanks,
    Dion
  • Re: Help: Trying to make connected dropdown lists in Atlas.

    09-21-2005, 1:45 PM
    • Member
      92 point Member
    • JohnMcMillion
    • Member since 09-01-2005, 5:23 PM
    • San Diego, CA
    • Posts 34
    Hey guys,

    I'm looking for a similar solution.  It was easy to implement the connected lists with Michael's AJAX.net thanks to the plethora of samples he provided, however when you post back, for the second list that was changed you can't get the value for the new selection because it isn't a part of the viewstate.  Has anyone tried this with Jason's MyAJAX.net,
    http://jason.diamond.name/weblog/ since it does post back with the viewstate?  Is it slow on forms with lots of input fields/big viewstate?

    One approach I suggested to Michael was to be able to do an "Ajax post" of the whole form, so we could possibly go through the form collection server side for processing bypassing the need for the viewstate.  Hope that wouldn't break my .net validation controls.

    Anyone have a full (js client script/c# codebehind) sample of connected ajax drop down lists with the .net client callback approach?

    Thanks,

    John
  • Re: Help: Trying to make connected dropdown lists in Atlas.

    09-22-2005, 6:00 PM
    • Star
      14,095 point Star
    • bleroy
    • Member since 04-12-2003, 7:09 AM
    • Redmond
    • Posts 2,296
    For the moment, I'd advise to avoid postbacks when using Atlas (which makes it pretty safe to disable ViewState altogether, by the way). Nikhil showed in his PDC talk how an Atlas control can persist across postbacks, but this is very much work in progress for now.
    If you just want the Atlas callback to be able to use the page's form fields, it is useful to know that Atlas enables you to implement your web method on the page itself. In this case, the method will have access to all objects on the page, including the currently selected item in a drop-down list. That's one way of doing it, but personally I don't like it as you're establishing a dependancy on the UI from your web method.
    I'd say the simplest way to do connected lists would be to use a DataView for the second list. A DataView is a filtered view on a DataSource's data. That should work well if the total data for the second list is small enough. You'd have two data sources, one for each list, and you'd bind the dataview's filter to the first list's selected option. The second list would just take its data from the view's filtered data.
    If you want to requery the data for the second list every time the first list changes vbecause the total data for the second list would be too heavy, you'd do it a little differently. You'd need to attach to the changed event of the first list a select action on the second datasource. You'd also bind a select parameter of the second data source to the selected index of the first list.
    This way, if the first list changes selection, the data source's parameter will change and the datasource will call the server for new data. Once this data returns, the second list will be automatically updated. It is even possible to declaratively disable the second list while you're fetching the data by binding its enabled property to the isReady property of the data source.
    Bertrand
    ----
    This posting is provided "AS IS" with no warranties, and confers no rights.
  • Re: Help: Trying to make connected dropdown lists in Atlas.

    09-25-2005, 4:27 AM
    • Participant
      1,431 point Participant
    • rstrahl
    • Member since 08-20-2003, 1:08 PM
    • Paia, Hawaii
    • Posts 277
    • ASPInsiders
      TrustedFriends-MVPs
    Bertrand,

    Can you elaborate on this inline WebMethod and how it would get at the POST data. Is the POST data in that case current (ie. sent back from the server on the Callback) or from the previous POSTback?

    I tend to agree with you now that it's probably best not to rely on POST values for server side AJAX processing, because Atlas makes the communication so much easier. The Web Service interface to data is very nice, especially the ability to send back complex data easily (although I have problems with it here - the idea is what counts). If we're going to design complex business applications with this framework the middle tier logic needs to be isolated out of the page and put back into a service format. 

    On the other hand it's more difficult to do this if you just want to drop in a little bit of functionality into an existing page and not design your whole UI using AJAX.

    +++ Rick ---

      
    Rick Strahl
    West Wind Technologies
    Making waves on the Web
    www.west-wind.com/weblog
  • Re: Help: Trying to make connected dropdown lists in Atlas.

    09-25-2005, 9:42 PM
    • Star
      14,095 point Star
    • bleroy
    • Member since 04-12-2003, 7:09 AM
    • Redmond
    • Posts 2,296
    Well, just mark any method on your page with the [WebMethod] attribute just like you would in an asmx file. You can then get the proxy for this "page web service" like you would for an asmx: script src="mypage.aspx/js"
    The post values that you will get are the current data from the page, just as if this were a regular postback.
    Bertrand
    ----
    This posting is provided "AS IS" with no warranties, and confers no rights.
  • Re: Help: Trying to make connected dropdown lists in Atlas.

    09-26-2005, 8:26 AM
    • Member
      20 point Member
    • gr8cik
    • Member since 08-30-2005, 9:33 AM
    • Posts 4

    Hi there !

    I would also appreciate to have some code snippet about binding a dropdownlist the Atlas way ! As Dr.NETjes, I tried for quite a long time with no success ...

    Thanks in advance ;-)

    cik

  • Re: Help: Trying to make connected dropdown lists in Atlas.

    09-26-2005, 2:40 PM
    • Star
      14,095 point Star
    • bleroy
    • Member since 04-12-2003, 7:09 AM
    • Redmond
    • Posts 2,296
    Well, the thing is, select won't work in this case in the PDC build. Eventually, you'll be able to bind a DropDownList control directly to a data source, but for the moment you'll have to use a DataList and template it. This will work in the next build (which is expected very soon):

    <div id="suggestResults"></div>

    [...]

    <
    div id="suggestResultsTemplate">
     
    <select id="suggestResultsTemplateParent">
       
    <option id="suggestResultsItemTemplate"></option>
     
    </select>
    </div>

    [...]

    <listView targetElement="suggestResults" itemTemplateParentElementId="suggestResultsTemplateParent">
      <bindings>
        <binding id=
    "searchResultsBinding" dataContext="suggestionSource" dataPath="data" property="data"/>
      </bindings>
      <layoutTemplate>
        <template layoutElement=
    "suggestResultsTemplate"/>
      </layoutTemplate>
      <itemTemplate>
        <template layoutElement=
    "suggestResultsItemTemplate">
          <label targetElement=
    "suggestResultsItemTemplate">
            <bindings>
              <binding property=
    "text"/>
            </bindings>
          </label>
        </template>
      </itemTemplate>
    </listView>

    Bertrand
    ----
    This posting is provided "AS IS" with no warranties, and confers no rights.
  • Huh? [:^)] Re: Help: Trying to make connected dropdown lists in Atlas.

    09-26-2005, 5:47 PM
    • Member
      355 point Member
    • Dr.NETjes
    • Member since 02-13-2004, 2:39 PM
    • Posts 71
    Hi bleroy, thanks for this example code!
    However after trying for 2 hours, I just couldn't get it to work (too much missing lines in this example code)

    Could you please post the complete code of your example? And also the code of the 'suggestionSource' webservice?

    Thanks!
  • Re: Help: Trying to make connected dropdown lists in Atlas.

    09-26-2005, 5:57 PM
    • Star
      14,095 point Star
    • bleroy
    • Member since 04-12-2003, 7:09 AM
    • Redmond
    • Posts 2,296

    Yes, sorry about that, but as I said in the previous message, this will not work in the PDC build.
    Here's the code for the suggestionSource webmethod:

    [WebService(Namespace = http://tempuri.org/)]
    [
    WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    public class WordService : DataService {
     
    private const string CacheKey = "AtlasDataServiceWordList";
     
      [
    DataObjectMethod(DataObjectMethodType.Select)]
     
    public string[] GetWordsStartingWith(string firstLetters) {
       
    Cache cache = HttpContext.Current.Cache;
        
    List<string> data = (List<string>)cache[CacheKey];
       
    if (data == null) {
          data =
    new List<string>();
           
    using (TextReader reader = new StreamReader(Server.MapPath("~/App_Data/words.txt"))) {
             
    string s = reader.ReadLine();
             
    while (s != null) {
               
    data.Add(s);
                s = reader.ReadLine();
              }
            }
            cache.Insert(CacheKey, data);
          }
          
    List<string> filteredData = new List<string>();
         
    foreach (string s in data) {
           
    if (s.StartsWith(firstLetters, StringComparison.CurrentCultureIgnoreCase)) {
              filteredData.Add(s);
            }
          }
         
    return filteredData.ToArray();
        }
    }

    Bertrand
    ----
    This posting is provided "AS IS" with no warranties, and confers no rights.
  • Huh? [:^)] Re: Help: Trying to make connected dropdown lists in Atlas.

    09-26-2005, 6:03 PM
    • Member
      355 point Member
    • Dr.NETjes
    • Member since 02-13-2004, 2:39 PM
    • Posts 71

    Hmm... I thought you said that, using the PDC build, binding to a dropdown is possible using a DataList and templating it.
    Do you happen to have the complete source of the aspx page in your first listing? (including reference to webservice, scripts declarations, etc.)?

    Thanks,
    Dion

  • Re: Help: Trying to make connected dropdown lists in Atlas.

    09-26-2005, 8:52 PM
    • Star
      14,095 point Star
    • bleroy
    • Member since 04-12-2003, 7:09 AM
    • Redmond
    • Posts 2,296
    The page has a lot more in it so it would be too big to post here, but basically, you can have a look at this to get a good idea of  an end-to-end scenario:
    http://weblogs.asp.net/bleroy/archive/2005/09/20/425698.aspx
    Bertrand
    ----
    This posting is provided "AS IS" with no warranties, and confers no rights.
  • Re: Help: Trying to make connected dropdown lists in Atlas.

    09-27-2005, 3:57 AM
    • Member
      20 point Member
    • gr8cik
    • Member since 08-30-2005, 9:33 AM
    • Posts 4
    Thank you for the answer Bertrand !

    I'll check the link you provided (hmm ... I think that I already saw it two or three days ago ...) I'll read it more carefully then ;-)
  • Smile [:)] Re: Help: Trying to make connected dropdown lists in Atlas.

    09-28-2005, 3:02 AM
    • Member
      355 point Member
    • Dr.NETjes
    • Member since 02-13-2004, 2:39 PM
    • Posts 71

    Hi Bertrand,

    I finally got it working to bind data to a dropdown (thanks for your example).
    Now I'm trying to figure out how to send a parameter (from the master-dropdown) to the dataservice, in order to filter the options in the detail-dropdown.

    When I've got my master-detail dropdowns working, I'll post my code here.

    --Dion

Page 1 of 3 (34 items) 1 2 3 Next >