So, you have a GridView or DetailsView that has standard “Edit” “Update” “New” type command buttons on them.  The way they get there is by having the declaration something like this:

 <asp:DetailsView ID="DetailsView1" runat="server" Height="50px" Width="125px"
            AllowPaging="True" AutoGenerateRows="False" DataKeyNames="Id"
            DataSourceID="SqlDataSource1">
            <Fields>
                <asp:BoundField DataField="Id" HeaderText="Id" ReadOnly="True"
                    SortExpression="Id" />
                <asp:BoundField DataField="Name" HeaderText="Name" SortExpression="Name" />
                <asp:BoundField DataField="CampStartDate" HeaderText="CampStartDate"
                    SortExpression="CampStartDate" />
                <asp:BoundField DataField="CampEndDate" HeaderText="CampEndDate"
                    SortExpression="CampEndDate" />
                <asp:CommandField ShowEditButton="True" ShowInsertButton="True" />
            </Fields>
</asp:DetailsView>

What you want is to say something like:

“I only want admin’s to be able to add new rows so  want to hide the “new” button based on that”

So, first thing is to convert the field to a template from the following menu.  You do this by using the little helper in the upper right hand corner of the detailsview (in design mode), chose Edit Fields, CommandField, then convert to template (as in the picture below).

Then, you will have something like this:

 <asp:DetailsView ID="DetailsView1" runat="server" Height="50px" Width="125px"
            AllowPaging="True" AutoGenerateRows="False" DataKeyNames="Id"
            DataSourceID="SqlDataSource1">
            <Fields>
                <asp:BoundField DataField="Id" HeaderText="Id" ReadOnly="True"
                    SortExpression="Id" />
                <asp:BoundField DataField="Name" HeaderText="Name" SortExpression="Name" />
                <asp:BoundField DataField="CampStartDate" HeaderText="CampStartDate"
                    SortExpression="CampStartDate" />
                <asp:BoundField DataField="CampEndDate" HeaderText="CampEndDate"
                    SortExpression="CampEndDate" />
                <asp:TemplateField ShowHeader="False">
                    <ItemTemplate>
                        <asp:LinkButton ID="LinkButton1" runat="server" CausesValidation="False"
                            CommandName="Edit" Text="Edit"></asp:LinkButton>
                        &nbsp;<asp:LinkButton ID="LinkButton2" runat="server" CausesValidation="False"
                            CommandName="New" Text="New"></asp:LinkButton>
                    </ItemTemplate>
                    <EditItemTemplate>
                        <asp:LinkButton ID="LinkButton1" runat="server" CausesValidation="True"
                            CommandName="Update" Text="Update"></asp:LinkButton>
                        &nbsp;<asp:LinkButton ID="LinkButton2" runat="server" CausesValidation="False"
                            CommandName="Cancel" Text="Cancel"></asp:LinkButton>
                    </EditItemTemplate>
                    <InsertItemTemplate>
                        <asp:LinkButton ID="LinkButton1" runat="server" CausesValidation="True"
                            CommandName="Insert" Text="Insert"></asp:LinkButton>
                        &nbsp;<asp:LinkButton ID="LinkButton2" runat="server" CausesValidation="False"
                            CommandName="Cancel" Text="Cancel"></asp:LinkButton>
                    </InsertItemTemplate>
                </asp:TemplateField>
            </Fields>
</asp:DetailsView>

Now, you have standard <asp:LinkButton> so you can call the visible property from your codebehind like this:

 <asp:TemplateField ShowHeader="False">
                     <ItemTemplate>
                         <asp:LinkButton ID="LinkButton1" runat="server" CausesValidation="False" Visible='<%# GetShowEditButton() %>'
                             CommandName="Edit" Text="Edit"></asp:LinkButton>
                         &nbsp;<asp:LinkButton ID="LinkButton2" runat="server" CausesValidation="False" Visible='<%# GetShowInsertButton() %>'
                             CommandName="New" Text="New"></asp:LinkButton>
                         &nbsp;<asp:LinkButton ID="LinkButton3" runat="server" CausesValidation="False"
                             CommandName="Delete" Text="Delete" Visible='<%# GetShowDeleteButton() %>'     ></asp:LinkButton>
                     </ItemTemplate>
</asp:TemplateField>

Then, in your codebehind, you have the following:

 protected bool GetShowEditButton()
    {
        return Roles.IsUserInRole("Admin");
    }

    protected bool GetShowInsertButton()
    {
        return Roles.IsUserInRole("Admin");
    }
    protected bool GetShowDeleteButton()
    {
        return Roles.IsUserInRole("Admin");
    }
}

Hope you find this before spending a bunch of time reading about more complicated solutions.

The company I’m now working at is small and we don’t have a lot of resources to maintain hardware and do operating system type support.  We do have a high load requirement so we need a very robust supported solution.  Before this, I’d always been in the under $50 per month type plan with ORCSWeb, but I decided I needed more servers and a higher level of support.  I really did not know what level of support to expect when signing up for the managed servers but decided to go for it anyway.

All  can say is WOW!!!  I am over the top impressed.

We currently have 3 virtual servers hosted at ORCSWeb.  One, we use as a development server, and the other two are in a webfarm configuration.  I’ve always believed that when you go into production with a web site it’s critical you start with 2 servers in a webfarm.  it’s really easy to go from 2 to 10, but can be very painful to go from 1 to 2.   That’s a topic for another post, but suffice it to say, 2 is the minimum.

So, why am I so impressed?  First, the support team they assigned to me is totally awesome.  They all are focussed and competent which is a total relief compared with most hosting companies I’ve dealt with.  Other companies always have good people, but it seems to be the bad ones that really give me cause to remember.  Second, because I paid extra for the full managed support options on our three servers, I’ve been able to ask the things like the following.  Almost all of them I could do myself, but I’m swamped with my technology role in the new company and really appreciate being able to hand stuff like this off.

• I’ve pointed my MX record at my .149 server.  Could you please set up email and create the following 7 accounts.
• Please Setup a secure ftp server at the following address with the following username and password (and make sure the user is locked down to the root)
• Setup DFS Replication between these two directories on .148 and .149
• Create a RoboCopy script that copies files from my dev server to the .149 mirrored directory
• Please set up web statistics for me on http://www.siliconvalley-codecamp.com
• Please figure out why SqlServer 2008 is not letting me access catalog MyStuff1 from user 3p1 and fix
• Please make a replicate of website MyWeb1.com including the sqlserver catalog’s and put it on MyWeb2.com on server .149
• Please replace the sqlserver catalog MyStuff3 on server .149 with the bak file I uploaded to my ftp server
• I could go on and on, but I think you are getting the idea.
• Always with a smile, 24×7, what else can I say.

By the way, if you want to see one of my sites hosted there, go to http://www.siliconvalley-codecamp.com

Thank you ORCSWeb for making things a lot easier for me.

http://www.meetup.com/The-San-Francisco-ExtJS-Meetup-Group/calendar/10302891/

http://msdn.microsoft.com/en-us/library/aa478947.aspx

My plan is to do a progression where I start with a trivial GridPanel, then work myself in 5 steps to a full working membership editor that looks like this:

If you want to to run the code I will be explaining tonight, here are some links:

http://aspnetextjsdemo.peterkellner.net/ExtJSProfileEditorASimpleGrid.html

http://aspnetextjsdemo.peterkellner.net/ExtJSProfileEditorBMoreGrid.html

http://aspnetextjsdemo.peterkellner.net/ExtJSProfileEditorCMoreGridWithPaging.html

http://aspnetextjsdemo.peterkellner.net/ExtJSProfileEditorDMoreGridEditing.html

http://aspnetextjsdemo.peterkellner.net/ExtJSProfileEditorEAddDeleteToolbar.html

If you want a more complete demonstration of ExtJS in general along with more details of the code, I’m presenting a full length version of this at he Bay.Net Meeting in Microsoft next Wednesday evening.  Here are the full details.  These events are both community events are free.

http://www.baynetug.org/DesktopModules/DetailXEvents.aspx?ItemID=378&mid=49

Hope to see you at one of the events!

<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

    protected void Page_Load(object sender, EventArgs e)

    {

        LabelWhere.Text = System.Reflection.Assembly.GetExecutingAssembly().Location.ToString();

    }

</script>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title></title>

</head>

<body>

    <form id="form1" runat="server">

    <div>

        <asp:Label ID="LabelWhere" runat="server" Text="Label"></asp:Label>

    </div>

    </form>

</body>

</html>

Hope this Helps!

So, I have to say one of my main motivations for doing posts is I enjoy helping others through problems.  It gives me a certain satisfaction to know that I have knowledge others may not at any give time and I have a great way to share that knowledge.  It also makes me feel good when others go out of their way to appreciate the effort.  I know when I post questions on forums and get good answers how happy I am, it’s good to know others appreciate my efforts.

So, continuing down that path, Here is the code necessary to answer Zimbran’s last question.

<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

</script>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title>ODS DDL Example</title>

</head>

<body>

    <form id="form1" runat="server">

    <div>

        <asp:ObjectDataSource ID="ObjectDataSource1" runat="server" 

            SelectMethod="GetMembers"

            TypeName="BusinessObject"></asp:ObjectDataSource>

        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" 

               DataKeyNames="Id"

            DataSourceID="ObjectDataSource1">

            <Columns>

                <asp:BoundField DataField="Id" HeaderText="Id" ReadOnly="True" 

                   SortExpression="Id" />

                <asp:BoundField DataField="Name" HeaderText="Name" SortExpression="Name" />

                <asp:BoundField DataField="Email" HeaderText="Email" SortExpression="Email" />

                <asp:TemplateField HeaderText="Approved" SortExpression="Approved">

                    <ItemTemplate>

                        <asp:Label ID="LabelYesOrNo" runat="server" 

                           Text='<%# (bool) Eval("Approved") ? "Yes" : "No"  %>'></asp:Label>

                    </ItemTemplate>

                </asp:TemplateField>

            </Columns>

        </asp:GridView>

    </div>

    </form>

</body>

</html>

The Problem

For the third year in a row, Silicon Valley’s Code Camp is happening.  The way I’ve organized the data is that each year I make a fresh new sql server 2005 database catalog.  this means that I have one for 2006, one for 2007 and a new one for 2008.  I want to do a mailing to all people who have registered to previous code camps and who have not registered yet for this code camp.  This way, I can do multiple mailings without worrying about sending to people that who have registered (which would make me look silly for not knowing they registered already).  I do not like when people say things like "Ignore this message if you have registered…".  In addition we will maintain an opt out list so that people who do not want additional emails sent can request that and not worry about us sending more emails.

The Givens

So, since this article is about how to solve the problem with LINQ, I will not go into details of how to create the generic lists of email addresses.  Let’s assume we have methods that give us these 4 lists. They are:

• 2006 Registered Attendees
• 2007 Registered Attendees
• 2008 Registered Attendees
• Opt Out Email List

The Code

Below is the C# version 3.0 (.Net 3.5 and asp.net 3.5) that performs this function described in the problem above.  The next section "The Explanation" gives more details on what i s happening.

   1:  using System.Linq;

   2:   

   3:  /// <summary>

   4:  /// shows all non registered users by going 

   5:  /// through past years and making a

   6:  /// unique query.

   7:  /// </summary>

   8:  /// <returns>List of all non-registered 

   9:  /// code campers form previous years</returns>

  10:  public static List<ListItem> LoadAllUnRegisteredCodeCampUsers()

  11:  {

  12:   

  13:      List<string> codeCampersCurrentYear = 

  14:          GetEmailsFromPreviousYear("CodeCampSV06");

  15:   

  16:      List<string> emailOptOut2008 = 

  17:          GetDoNotRemoveList("CodeCampSV06");

  18:   

  19:      List<string> codeCampers2007 = 

  20:          GetEmailsFromPreviousYear("PASTSV07");

  21:   

  22:      List<string> codeCampers2006 = 

  23:          GetEmailsFromPreviousYear("PASTSV06");

  24:   

  25:      // Make Combined List of 06 and 07 and unique it 

  26:      // (duplicates are removed in Union)

  27:      IEnumerable<string> uniqueNamesQuery =

  28:          codeCampers2006.Union(codeCampers2007).OrderBy(s => s);

  29:   

  30:      var emailListBeforeOptOut = 

  31:          uniqueNamesQuery.Except(codeCampersCurrentYear);

  32:   

  33:      var emaiListAfterOptOut = 

  34:          emailListBeforeOptOut.Except(emailOptOut2008);

  35:   

  36:      List<ListItem>  finalList = new List<ListItem>();

  37:      foreach (string s in emaiListAfterOptOut)

  38:      {

  39:          finalList.Add(new ListItem(s,s));

  40:      }

  41:      return finalList;

  42:  }

  43:   

The Explanation

The first line (1) is required because all the LINQ methods we are using are static extension methods.  This means, that without referencing the LINQ namespace, the methods OrderBy,Except and Union would not be available to us.

Lines 13 to 23 call methods that populate our generic lists of strings.  The reason this is done is because each of these lists come from different SQL Server 2005 database catalogs. This can probably be done in LINQ but I thought it was easier to do it this way.

Line 27 creates a list of unique names.  The Union method has the added benefit of eliminating duplicates.  OrderBy(s=>s) simply creates an annonymous delegate that takes in a string and returns a string so that is what gets sorted.  After giving this some thought, I’m not sure the OrderBy really helps us in anyway but this is a tutorial type article so I’m leaving it in.

Line 33 removes all the people who have asked to be opted out of the email.  It uses the static extension method Except.

Finally, line 36 to 40 creates a generic list of ListItems which is what is returned by the method.  ListItem’s are returned primarily because the calling method shows a list of checkboxes and this makes it easy.

Conclusions

LINQ is a great tool for managing collections.  In this case we demonstrated how to take 4 generic lists of strings (collections), do some simple set operations (union,except,orderby) and produce a list of emails we want to send.  Not only is it simple to code, it’s easy to maintain because the method names are so descriptive.   Hopefully, this will help with your similar programming efforts.  Best of luck.

Introduction

Creating themes for ASP.NET 2.0 is very easy if you follow the standard guidelines Microsoft gives us.  Microsoft gives a pretty good discussion in the MSDN article
ASP.NET Themes and Skins Overview.  I’ve read it several times but since I don’t do this very often I keep forgetting the simple things.  Recently,
I posted a question on ASP.NET forums asking how to have an image automatically come from the correct theme directory.  As usual, Dave Sussman
gave me the perfect answer.

"You should store the images under the themes and set the ImageUrl in the skin file. Give the control a SkinID in both the skin file and in the page. When the theme changes the appropriate image will be used."

In this article, I’ll basically explain his answer with an example using the code camp web site.

Code Camp Site Structure

The Code Camp project has a very standard directory setup.  In Visual Studio 2008, the solution explorer looks like this:

Notice that I have two themes defined, Gray2008 and Gray2009.  The reason for this is so when 2009 comes along and we want to change certain images that contain things like the Code Camp Date and Year, we don’t have to do surgery on the asp.net pages, but simply change to the new theme and update the files there.  This also keeps the code base intact so we don’t have to branch our code for next year.  All in all, a very clean solution.

The Mechanics of Theme Changing and the Skin Definitions

First, you have simple mention in your web.config file the name of the default theme you will be using.  By doing that, it references the correct App_Themes sub directory. Our web.config looks like the following for this year which means we will be using the Gray2009 theme directory.

Second, you need to mention a SkinId in any control you may use.  In our case, we want to have the image on the upper right side of the code camp web site display the correct year.  That is, on the home page we have something like this:

The tag in the master page looks like this:

Notice the SkinId circled in green.  Also notice that there is no ImageUrl defined in this tag.  What happens next is that web site will look in the default theme’s SkinFile.skin file (see the solution explorer above for this).  In the App_Themes/Gray2008/SkinFile.skin file there is a reference that finds the actual image file that will be used.  It reference it from the App_THemes/Gray2008/Images directory as follows:

And, that’s it!  Just by changing the theme in the web.config file, the correct image file will be displayed in the master page.  The other nice thing is that design time support works also.  You will see in the Visual Studio 2008 Designer the correct image based on where your web.config points.

Conclusion

In this article, we’ve shown the details of how to have a flexible design that
supports multiple theme files.  Something we will use for years and years with
the new Code Camp web site.  We also may decide to have different themes for
different types of users.  That is, admin’s may have a different theme than
normal users.  We could also let users pick there own color styles by having
different themes.  Lots of possibilities.

I hope this helps you.

(Source Code Available in Article 6 Below – (Added March 2009))

Introduction

If you have complex styling issues involving ASP.NET we are experts and might be able to help. This technique is fairly old however newer methods could be used for similar results. Contact Peter Kellner and his associates here.

It’s often the case that brilliant designers will make interfaces that are hard to implement using standard frameworks like ASP.NET.  As Software engineers striving for consistency, we always want to do the best we can with the standard tool kits to take advantage for built in functionality.  ASP.NET 2.0′s built in menu system is a perfect example.  If you use that menu system, you get to make very simple declarative site maps by simply using the ASP.NET 2.0 Site Navigation Features.

The requirement faced today has to do with building the web site for our third annual code camp.  We have that brilliant designer I mentioned above, and he has made a design that just seems too perfect to compromise.  Here are some screen shots of how the designer envisions the sight looking and working after it is completed.

Notice the interesting behavior of the top menu (REGISTER;PROGRAM;NEWS;ABOUT AND WIKI).  Unselected, the bottom line strip is the same as selected.  When selected, the background of the selection changes to a different shade of the same color as the bottom strip.

Also notice the interesting behavior of the secondary menu. that is, when ABOUT is selected from the top menu, notice that the secondary menu shows: Contact;Venue;Organizers;Sponsors and Previous.  As you can see above (on the bottom of the 5 pictures), when Venu is selected, it is highlighted to in bright white to indicate that you have selected that.  The really cool part here is that the ABOUT on the primary menu stays highlighted when you choose different  secondary menu choices.

Why Go Through The Trouble, why not just do it with HTML and CSS directly

So, a reasonable person might say that since you can’t easily get this behavior with the asp:menu control and the site map provider (OK, at least I couldn’t figure it out), why not just code this up with simple list items, button clicks and a pile of code to react to those things?  Well, the answer is you can certainly do that.  The problem is the next time you want to do something similar you will find yourself doing a lot of cut and pasting.  Personally, whenever I find myself cutting and pasting a lot I know I should probably think about how to refactor the code to make it more reusable and therefore more reliable.

What Are the Benefits of Using asp:menu and the site map providers

I mentioned that there are benefits to using the asp:menu and site map providers.  What are those benefits you might ask.  Well, let me first show you what you have to do to set up a simple menu system using these, then list the benefits of what comes out.

The Web.SiteMap

First, you need to create a web.sitemap file in your web directory.  Here is what a simple one looks like similar to what will create the pictures above.

<?xml version="1.0" encoding="utf-8" ?>

 

   <siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >

 

      <siteMapNode url="Default.aspx" title="HOME" description="Silicon Valley CodeCamp 08">

 

            <siteMapNode url="Register.aspx" title="REGISTER"  description="" />

 

            <siteMapNode url="News.aspx" title="NEWS"  description="" />

 

            <siteMapNode url="About.aspx" title="ABOUT"  description="">

 

            <siteMapNode url="Contact.aspx" title="Contact"  description="" />

 

            <siteMapNode url="Sponsors.aspx" title="Sponsors"  description="" />

 

            <siteMapNode url="Previous.aspx" title="Previous"  description="" />

 

         </siteMapNode>

 

      </siteMapNode>

 

   </siteMap>

The Web.Config

You need to declare which sitemap provider you are using. In our case, we are simply reading from a file.  Then, you should (do not have to) declare a section for each web page you want to provide role access to.  Here is an example of my web.config. This first part says give access to any logged in user for Sponsors.aspx

<location path="Sponsors.aspx">

 

    <system.web>

 

        <authorization>

 

            <deny users="?"/>

 

        </authorization>

 

    </system.web>

 

</location>

 

</configuration>

The Second part defines the Site Map Provider and sets securityTrimming to true to only show pages the user has access to.

<system.web>

 

    <siteMap defaultProvider="XmlSiteMapProvider" enabled="true">

 

    <providers>

 

        <add name="XmlSiteMapProvider" 

 

        description="SiteMap provider which reads in .sitemap XML files." 

 

        type="System.Web.XmlSiteMapProvider, System.Web, Version=2.0.0.0,... 

 

        siteMapFile="web.sitemap" securityTrimmingEnabled="true"/>

 

    </providers>

 

    </siteMap>

 

The Master Page

In your master page, you need to define your primary menu.  In our case, it is the one that displays: REGISTER;NEWS and ABOUT.  Here is all you need for that.

    <asp:Menu ID="mainMenu" runat="server" Orientation="Horizontal" 

 

        DataSourceID="SiteMapMain" CssClass="headLinksBar"  CssSelectorClass="SimpleEntertainmentMenu"

 

        MaximumDynamicDisplayLevels="0" StaticItemFormatString="// {0}     ">

 

    </asp:Menu>

 

<asp:SiteMapDataSource ID="SiteMapMain" runat="server" ShowStartingNode="False" />

The Inherited Page (About.aspx For Example)

<asp:Content ID="SublinksSessions" ContentPlaceHolderID="Sublinks" runat="server">

 

    <asp:Menu ID="subMenu" runat="server" DataSourceID="SiteMapAbout" SkinID="subMenu"  CssClass="headLinksBar" 

 

    CssSelectorClass="SimpleEntertainmentMenu"     >

 

    </asp:Menu>

 

</asp:Content>

 

And the Benefits…

• You have no .net code to write!
• Adding new menu items as Primary or Secondary is easy
• Security is completely taken care of
• Menu Entries Automatically come and go based on User Permission 

Not Using the

CSS Friendly Adapters

If you do not use the CSS Friendly Adapter library, the menu render using tables. 
Below is what the actual HTML looks like of the main menu if I remove the

CSS Friendly Adapters.

<table>

 

    <a href="#ctl00_mainMenu_SkipLink">

 

        <img alt="Skip Navigation Links" src="/WebStyleOnly%20-%20Copy/WebResource.axd?d=G5" width="0" height="0" style="border-width: 0px;" />

 

    </a>

 

    <table id="ctl00_mainMenu" class="headLinksBar ctl00_mainMenu_2" cssselectorclass="SimpleEntertainmentMenu" cellpadding="0" cellspacing="0" border="0">

 

        <tr>

 

            <td onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="ctl00_mainMenun0">

 

                <table cellpadding="0" cellspacing="0" border="0" width="100%">

 

                    <tr>

 

                        <td style="white-space: nowrap;">

 

                            <a class="ctl00_mainMenu_1" href="/WebStyleOnly%20-%20Copy/Register.aspx">

 

                                // REGISTER

 

                            </a>

 

                        </td>

 

                    </tr>

 

                </table>

 

            </td>

 

            <td style="width: 3px;">

 

            </td>

 

            <td onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="ctl00_mainMenun1">

 

                <table cellpadding="0" cellspacing="0" border="0" width="100%">

 

                <tr>

 

                    <td style="white-space: nowrap;">

 

                        <a class="ctl00_mainMenu_1" href="/WebStyleOnly%20-%20Copy/News.aspx">

 

                            // NEWS 

 

                        </a>

 

                    </td>

 

                </tr>

 

                </table>

 

            </td>

 

            <td style="width: 3px;">

 

            </td>

 

            <td onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="ctl00_mainMenun2">

 

                <table cellpadding="0" cellspacing="0" border="0" width="100%">

 

                    <tr>

 

                        <td style="white-space: nowrap;">

 

                            <a class="ctl00_mainMenu_1" href="/WebStyleOnly%20-%20Copy/About.aspx">

 

                                // ABOUT

 

                            </a>

 

                        </td>

 

                    </tr>

 

                </table>

 

            </td>

 

            </span>

 

        </tr>

 

</table>

The same code, when using the CSS Friendly adapters, plus some clever additions that will be discussed later, has the html code looking like the following.

<table>

 

    <tr>

 

        <div class="AspNet-Menu-Horizontal">

 

            <ul class="AspNet-Menu">

 

                <li class="AspNet-Menu-TopLevel-register">

 

                    <a href="/WebStyleOnly - Copy/Register.aspx">

 

                      REGISTER

 

                     </a> 

 

                </li>

 

                 <li class="AspNet-Menu-TopLevel-news">

 

                    <a href="/WebStyleOnly - Copy/News.aspx">NEWS</a>

 

                </li>

 

                <li class="AspNet-Menu-TopLevel-about-Selected">

 

                    <a href="/WebStyleOnly - Copy/About.aspx">

 

                      ABOUT</a>

 

                </li>

 

            </ul>

 

         </div>

 

     </tr>

 

 </table>

You can see that the CSS adapter code is not only much smaller, but easier to read and because of the inserted class names, much easier to customize.

Conclusions

We have not made clear yet how the CSS Friendly Adapters will make the menu’s work the way we want it to. We have shown css classes created (AspNet-Menu-TopLevel-about-Selected for example) are create by the custom code written by us in the CSS Friendly Adapter Project.  We have however talked about the menu control and showed an example of how the html is actually rendered, and what is rendered based on.  That is, the web.sitemap defines the menu and we have shown that.  In the next article, we will show details of the custom code we have in the CSS Friendly Adapter that solves the problem of how to highlight the menu choices based on what is clicked.

Article Series

So, first, a little background.  As many of you know, I’ve been the ring leader of Silicon Valley Code Camp here in northern California for the past 2 years.  Since Code Camp is a limited budget, 100% volunteer effort, the most important thing is to have efficient communications between everyone.  Attendees, Speakers, Organizer, Sponsors and everyone else involved in the event.  To that end, the first code camp web site was created.  It was based on CSS provided by Microsoft.  Check out the post I made two years ago about it titled "Zero to Professional Web Site in Two Days".

This year, we are planning on a different format.  I don’t want to give too much away because we have not formally announced the changes, but if you look carefully at the designs, you might get an idea what these changes are going to be.  I’m getting slightly off topic.  The purpose of this series of articles to take you with me, step by step through building the web site.  This time,
we are going to do it right.  Professional Designer (volunteer) and Professional CSS Implementer (not me, but we do have some budget for this from last year).

So, here are the steps.

1. Decide on what changes need to be made
2. Work with a professional designer to make mock ups (photoshop, fireworks, etc.)
3. Create css and html pages from the designers work
4. Implement the css and html in asp.net
5. Test
6. Publish

So far, we have done steps 1,2 and are working on step 3.  I’ve alluded to the requirements above, but don’t want to spoil too many surprises.  Suffice to say, that is done already.  Step 2 is also now complete.  The professional designer gave us very detailed PSD files that we can turn over to a css wizard.  First, let me show you some of the designs and peek into fireworks to see what is actually under the covers.

First, here are some screen shots of what pages will look like (png files created from the PSD files)

Include is also a PDF file.  It allows the person doing the css and html to really do a good job of pulling the pieces apart to make great web content.

(notice the detailed names for all the layers!  this kind of consistency makes it much easier to implement in html and css).

Step 3 is to hand this over to a designer.  I did not have someone to use locally, so I decided to take a shot at using rentacoder.  I posted a detailed specification which you can see on that site if you navigate to this url: 
http://www.rentacoder.com./RentACoder/misc/BidRequests/ShowBidRequest.asp?lngBidRequestId=924960 

Notice the detailed specifications as well as the 13 bids that have been made ranging from $100 to $1000.  I posted a question on the forums asking if anyone had used any of these services and the response was yes, but don’t take the lowest bid and also make sure you use someone with lots of experience.  I haven’t decided next steps yet (that is who to choose), but I will keep posting as I build this web site.

Stay tuned!

Turns out when I added the web server in vista, I forgot to check the Static Content checkbox under World Wide Web Services / Common Http Features.

Hope this finds you if you are having the same problem.

<asp:TemplateField HeaderText="TemplateUsersId" SortExpression="TemplateUsersId">      <EditItemTemplate>

       <asp:DropDownList ID="DropDownListUser" runat="server" AutoPostBack="False" DataSourceID="SqlDataSourceUser"

            DataTextField="Username" DataValueField="id" SelectedValue='<%# Bind("TemplateUsersId") %>'>

         </asp:DropDownList>

         ..

Notice that even though I’m using Bind rather than eval, the value does not stick.  Well, we always have a reason so I believe it is not working because SelectedValue only has a Get (it’s read only) and the value can not be put back.  So, the solution that works for me is to program the GridView’s Updating Row Event.  That is, get the value from the dropdownlist, and set it in the event.  Here is the code that is working for me.

 /// <summary>    /// This Code Gets the value of the DropDownList in the EditItemTemplate.

    /// </summary>

    /// <param name="sender"></param>

    /// <param name="e"></param>

    protected void GridViewIncomingUrls_RowUpdating(object sender, GridViewUpdateEventArgs e)

    {

        DropDownList dropDownListUser = GridViewIncomingUrls.Rows[e.RowIndex].FindControl("DropDownListUser") as DropDownList;

        e.NewValues["TemplateUsersId"] = dropDownListUser.SelectedValue;

    }

Yee Ha! it works. Hope you don’t have to suffer like me and just bump into this solution

I enthusiastically recommend it to anyone trying to incorporate Ajax into their asp.net applications.  It’s not only got a great introduction, but also goes into lots of useful details for day to day programming.

Amazon.com: ASP.NET AJAX in Action

<asp:ImageButton SkinID="iconCheckedDisabled" ImageUrl="Images/iconCheckedDisabled.gif" runat="server" ToolTip="Checked Disabled" />

<asp:ImageButton SkinID="iconCheckedEnabled" ImageUrl="Images/iconCheckedEnabled.gif" runat="server" ToolTip="Checked Enabled" />

<asp:ImageButton SkinID="iconUnCheckedDisabled" ImageUrl="Images/iconUnCheckedDisabled.gif" runat="server" ToolTip="Unchecked Disabled" />

<asp:ImageButton SkinID="iconUnCheckedEnabled" ImageUrl="Images/iconUnCheckedEnabled.gif" runat="server" ToolTip="Unchecked Enabled" />

The image files look like the following:

The problem basically is that you can’t dynamically swap skin files easily because they must be set at the preinit phase of event processing. Not at databound events which is where I’d want to do it.

So, my revelation was that I could just list all the states in a gridview template, then use the visibility attribute to make them show the correct one. That way, the skins are all loaded all the time, just now showing all the time. The GridView Code looks like the following:

Then, when you finally run it, the gridview looks something like this.

Notice no codebehind was necessary for this trick! Good luck and hope this save you some time.

The code is posted below.  I think you’ll get the idea.

[DataObjectMethod(DataObjectMethodType.Select, false)]

Hope this helps!

I’m doing a project where I have lots of DropDownList’s on a page and want a simple way to set the initial values based on some known value.  The DropDownLists are retrieved using ObjectDataSource but I don’t want the first value displayed.  I wrestled some with how to do this using page_load or page_prerender but didn’t come up with good solutions.  I did finally
decide that programming the databound event of the dropdownlist was probably the best way to go.

The solution is pasted below.  The MembershipUtilities.MembershipODS c# code can be downloaded from MSDN or on my web site at the following location. 

http://peterkellner.net/2006/01/09/microsoft-aspnet-20-memberrole-management-with-iis/.

<%@ Page Language=”C#” %>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”

  “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<script runat=”server”>
    protected void DropDownListUser_DataBound(object sender, EventArgs e)

    {
        DropDownListUser.SelectedIndex =
          DropDownListUser.Items.IndexOf
          (DropDownListUser.Items.FindByValue(Context.User.Identity.Name));
    }
</script>

<html xmlns=”http://www.w3.org/1999/xhtml” >
<head runat=”server”>
    <title>DropDownList Initialize</title>
</head>
<body>
    <form id=”form1″ runat=”server”>
    <div>
        <asp:DropDownList ID=”DropDownListUser” runat=”server”
          DataSourceID=”ObjectDataSourceUser”
          DataTextField=”UserName” DataValueField=”UserName”
          OnDataBound=”DropDownListUser_DataBound”>
        </asp:DropDownList>
        <asp:ObjectDataSource ID=”ObjectDataSourceUser” runat=”server”
          SelectMethod=”GetMembers”
          TypeName=”MembershipUtilities.MembershipUserODS”>
            <SelectParameters>
                <asp:Parameter Name=”sortData” Type=”String” />
            </SelectParameters>
        </asp:ObjectDataSource>
    </div>
    </form>
</body>
</html>

SilverlightDevCampSF is an upcoming gathering, inspired by BarCamp, to build Silverlight applications, It’s organized by volunteers & Silverlight enthusiasts, with attendance free to all. At this event, I will be presenting a 30 minute presentation on how to build animation into a Silverlight application. I’ll talk about the implementation details of building the picture slider used in the Community Media Browser preview hosted at

http://labs.leveragesoftware.com/gallery.html .  In this informal talk I’ll discuss how LoadXaml() was critical to this process as well as other tricks.  Because the picture slider is running from a live web feed, there is no way to know ahead of time how many picture we may have to scroll so clipping type solutions just don’t make sense.  Time permitting, we’ll talk about other issues involved in building this application and of course take
questions.

 http://www.devexpress.com/Products/NET/WebForms/ASPxCloudControl/Index.xml

So, now, where to use it?  Code Camp of course!  Now, if you browse to the Sessions listing, you’ll see the DevExpress Cloud Control in use.

You can see this control in action at our web site here: 

http://www.siliconvalley-codecamp.com/Sessions.aspx

My experience with using this control was great!  Easy to setup.  Below is all the code I needed on my asp page to make it happen.