PeterKellner.net » Uncategorized

MVP Award From Microsoft for ASP.NET 2.0

Peter Kellner — Fri, 02 Feb 2007 01:33:58 +0000

I was surprised and happy to receive notification of being awarded the MVP for ASP.NET 2.0. During the past 18 months, I’ve spent a lot of time both learning the technology as well as being involved in the community that it supports. During that time, I’ve done lots of posting (both questions and answers) on the
asp.net forums. In addition, I’d spoken at 4 code camps including the one I organized in Northern California (
http://www.siliconvalley-codecamp.com ). I’m sure it didn’t hurt that during this period I authored four MSDN articles.

At any rate, I’m very happy and fortunate to receive this award and look forward to future opportunities to be even more involved in the exciting community around asp.net.

Have GridView Highlight Last Inserted Record in ASP.NET 2.0

Peter Kellner — Thu, 07 Dec 2006 23:41:04 +0000

Introduction

A question that frequently comes up in the asp.net forums is how to have a gridview show the the last record added highlighted. This articles gives a technique for doing this. It only works with SqlServer but could could be modified for other databases.

What It Looks Like Running

After pressing the insert button on the screen shot below, the bottom line was actually added and it is automatically highlighted. This is in a nutshell, what the code listed below and this article discusses.

The Code

In order to run the code below, you must first set up Membership. The simplest way to do this is to simply add to your web.config a very small section enabling RoleManager. This will automatically create the membership database in sqlexpress. You should probably add a couple users just so your gridview is not empty from the start. The code you need to add to an empty asp.net 2.0 web site project is as follows (put it in the section).

<roleManager enabled="true">roleManager> 

Once you have done that, you can copy the code below to a new web page and simply run it.

Briefly, the way the code works is that when a row is inserted into the database the sqldatasource’s Inserted event is called. In this event, we take a look at the return parameter which comes from the sql:

InsertCommand="INSERT INTO [Names] ([name]) VALUES (@name);SELECT @NewID = Scope_Identity()"

NewId is actually a return parameter, so we can get that back in the inserted event. Once we get the value back, we store it in viewstate so that on the upcoming page_prerender, we can check and see which row has that id in it, and then highlight that row. The reason we do it in prerender and not load is because the inserted event is processed after load and it would not work if we put it there.

So, here is the code! Good luck.

<%@ 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”>

    // simple table named: Names. Two columns:  id int, name varchar(64)

    protected void ButtonInsert_Click(object sender, EventArgs e)
    {      
        SqlDataSource1.InsertParameters["name"].DefaultValue = DateTime.Now.ToString();
        int numInserted = SqlDataSource1.Insert();
        GridView1.DataBind();
    }

    protected void SqlDataSource1_Inserted(object sender, SqlDataSourceStatusEventArgs e)
    {
        object newId = e.Command.Parameters["@NewId"].Value;
        ViewState["NewId"] = Convert.ToInt32(newId);
    }

    protected void Page_PreRender(object sender, EventArgs e)
    {
        string newIdLast = string.Empty;
        if (ViewState["NewId"] != null)
        {
            int newId = (int)ViewState["NewId"];
            newIdLast = newId.ToString();
            int rowCnt = 0;
            foreach (GridViewRow row in GridView1.Rows)
            {
               string newIdText = row.Cells[1].Text;
                if (newIdText.Equals(newIdLast))
                {
                    //GridView1.EditIndex = rowCnt;
                    //GridView1.SelectedIndex = rowCnt;
                    row.Attributes.Add(“bgcolor”, “Gray”);
                    break;
                }
                rowCnt++;
            }
        }
    }
script>

<html xmlns=”http://www.w3.org/1999/xhtml” >
<head id=”Head1? runat=”server”>
    <title>Untitled Pagetitle>
head>
<body>
    <form id=”form1? runat=”server”>
    <div>
    <h2>Example of GridView that shows highlighted last inserted rowh2>
        <br />
        <asp:GridView ID=”GridView1? runat=”server” AutoGenerateColumns=”False” DataKeyNames=”id” DataSourceID=”SqlDataSource1? >
            <Columns>
                <asp:CommandField ShowEditButton=”True” ShowDeleteButton=”True” />
                <asp:BoundField DataField=”id” HeaderText=”id” InsertVisible=”False” ReadOnly=”True”
                    SortExpression=”id” />
                <asp:BoundField DataField=”name” HeaderText=”name” SortExpression=”name” />
            Columns>
        asp:GridView>
        <asp:SqlDataSource ID=”SqlDataSource1? runat=”server” ConnectionString=”&lt;%$ ConnectionStrings:ConnectionString %&gt;“
          DeleteCommand=”DELETE FROM [Names] WHERE [id] = @id”
          InsertCommand=”INSERT INTO [Names] ([name]) VALUES (@name);SELECT @NewID = Scope_Identity()”

          SelectCommand=”SELECT [id], [name] FROM [Names]“ UpdateCommand=”UPDATE [Names] SET [name] = @name WHERE [id] = @id” OnInserted=”SqlDataSource1_Inserted”>
            <DeleteParameters>
                <asp:Parameter Name=”id” Type=”Int32? />
            DeleteParameters>
            <UpdateParameters>
                <asp:Parameter Name=”name” Type=”String” />
                <asp:Parameter Name=”id” Type=”Int32? />
            UpdateParameters>
            <InsertParameters>
                <asp:Parameter Name=”name” Type=”String” />
               <asp:Parameter Direction=Output Name=”NewId” Size=4 Type=Int16 />
            InsertParameters>
        asp:SqlDataSource>
        <br />
        <br />
         <asp:Button ID=”ButtonInsert” runat=”server” OnClick=”ButtonInsert_Click” Text=”Insert Record” />div>
    form>
body>
html>

About the Author

Peter Kellner currently works as an asp.net enterprise consultant at http://www.73rdstreet.com. During the past year, Peter Kellner has authored four MSDN articles dealing with Membership and Profiles. He maintains a blog with more articles at http://peterkellner.net.

Integrating PBWiki with .Net Using the New PBWiki API, The Start of a .Net API

Peter Kellner — Mon, 18 Sep 2006 19:04:10 +0000

Abstract

In this article we will demonstrate a technique used to automatically add Wiki Pages to PBWiki using
the not quite released API provided by the peanut butter guys. The demonstration will involve integrating scheduled presentations at our Silicon Valley Code Camp on October 7th and 8th each with its own Wiki Page. Without the API, creating and linking the presentation to a Wiki page would have to be an ugly manual process involving the dreaded cut and pasting of URL’s.

Background

So, to begin with, I’m an enterprise database kind of guy and to be frank, Wiki’s scare me a little. The
idea of adhoc data being deposited by anyone onto a page with no real structures just makes me nervous. My
smart friends tell me I should embrace the chaos so I’m trusting them and going for it.

That being said, the specific problem we want to address with the Wiki is to allow presenters and presentees at
our codecamp to be able to interact with each other before and after their presentations. My experience is that
discussion groups don’t work that well for this and though lotus notes may have, that doesn’t seem to be much of an
option these days (Where is Ray?). The now obvious solution is to attach a Wiki Page to each presentation on our web
site and let users and presenters have at it. The problem is that this event is free and we don’t have an army
of staffers ready to add Wiki Pages each time someone submits a new presentation.

PBWiki To The Rescue

Turns out the guys at PBWiki are just about to release an API for their software. One of the functions of this API allows us
to create a new Wiki Page simply by building a request with post data as our page. Just what we need. So, lets just go through the steps with some fancy pictures and arrows of how we built this integration. (OK, no arrows, just pictures).

First, lets take a look at how we’ve enhanced our web site. (OK, this is in beta so depending on how fast you are at reading this article, the web site might not be quite to production yet. You will need to use your imagination.)

Notice the Wiki hyperlink next to the Session Titles. When this hyperlink is pressed, an API call is generated to the PBWiki API calling the AddPage function. If the Wiki Page exists, it simply quietly fails. Then after that, a redirect is processed that takes the user directly to the new Wiki Page. First time, the Wiki page is created with all kinds of information about the session as well as any other information we might want to transfer over. Below is what the Wiki Page looks like on our CodeCamp Wiki.

The Plumbing

So, how did we do this? First, we got an API key from PBWiki. this is a huge 15 character or so alpha string that identifies your wiki so that when you use it, pages and such will be created on your wiki. Then, we had to write some code. Basically, the way the API works is that you build a request that looks something like this to add a page.

http://YOURWIKI.pbwiki.com/api/AddPage?apikey_v1=12345&page=SomeNewPage&name=Some%20Guy&email=someone@example.org

Then, you add some post data to the request (or for small pages you can use the data parameter). Execute the request and your response is that status of the request. It’s returned in JSON format. Hopefully, you have your page now.

After that, you simply issue a redirect to the newly create page.

http://YOURWIKI.pbwiki.com/SomeNewPage

Now, you are probably wondering, where is the .Net API for doing this? OK, I’ll put some code below to satisfy that
wonderment. Basically, I created a very small API (1 call, AddPage), and a simple aspx page to run it. Here it is, and good
luck. Overtime, I’m sure I’ll fill out the API and add real error checking and better return type stuff. But, for now, here it is.

using System;

using System.Data;

using System.Configuration;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Web.UI.HtmlControls;

using System.Text;

using System.Net;

using System.Text.RegularExpressions;

///

/// An API for calling the PBWiki's API.  This is all C# and .NET 2.0

///

public  class PBWikiAPI

    public static string AddPage(string wikiURL,string apiKey,string page, string email,

        string name, string postData)

        string responseReturn = string.Empty;

try

            string wikiPageName = Regex.Replace(page, @"[^\w@-]", "");

            if (!String.IsNullOrEmpty(wikiPageName))

                string url = wikiURL + "/api/AddPage?apikey_v1=" + apiKey

                                + "&page=" + wikiPageName

                                + "&name=" + "AutoGenerator"

                                + "&email=" + email;

                Uri ourUri = new Uri(url);

                // Create a 'WebRequest' object with the specified url.

                WebRequest myWebRequest = WebRequest.Create(url);

                myWebRequest.Method = "POST";

                byte[] bytes = System.Text.Encoding.ASCII.GetBytes(page);

                myWebRequest.ContentLength = bytes.Length;

                System.IO.Stream os = myWebRequest.GetRequestStream();

                os.Write(bytes, 0, bytes.Length);

                os.Close();

                // Send the 'WebRequest' and wait for response.

                WebResponse myWebResponse = myWebRequest.GetResponse();

                if (myWebResponse != null)

                    System.IO.StreamReader sr1 = new System.IO.StreamReader(myWebResponse.GetResponseStream());

                    responseReturn = sr1.ReadToEnd().Trim();

                // Rel
ease resources of response object.

                myWebResponse.Close();

            else

                throw new ApplicationException("PBWikiAPI: no Page Name Specified");

        catch (Exception ex)

            throw new ApplicationException("PBWikiAPI: " + ex.ToString());

        return responseReturn;

The Sample ASP.NET aspx Page that calls this

using System;

using System.Data;

using System.Configuration;

using System.Collections;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Web.UI.HtmlControls;

public partial class Default12 : System.Web.UI.Page

    protected void Page_Load(object sender, EventArgs e)

    protected void Button1_Click(object sender, EventArgs e)

        string str = PBWikiAPI.AddPage("http://codecamp.pbwiki.com",

            "cd884b9f9d3034598340958435093405834",

            "TestPageFromAPI", "email", "name", "PostDataHere");

Conclusions

This is very cool stuff. It opens up a huge area of how to synchronize (or somewhat synchronize) blog data and more structured
data from things like databases (what a concept!). I’m sure as time goes on, I’ll do much more sophisticated integration with
Wiki data then is shown here. I’m totally jazzed by this.

References

http://api.pbwiki.com/

http://pbwiki.com/

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

Rendering Images With IIS Verses an ASP.NET 2.0 Handler

Peter Kellner — Tue, 05 Sep 2006 05:38:24 +0000

Performance Comparison

Recently, I’ve been wondering what the difference is between rendering an image using IIS’s built in file handling capabilities, or using the asp.net with a custom handler. I decided to do a little test program to simply see the difference in clock time for processing such requests. The results of this test clearly show that IIS is faster. Sometimes a little, and sometimes a lot. I decided to test three size images, and run them each 10 times. Often, there is a start up lag time so the iterations should wash that out.

The table below basically sums up the results pretty well. The resolution of my timer is not great so for small images (35KB), both IIS and the handler processed the image in under 15 milliseconds. There may be a difference but in
my case, it was probably not measurable because of all the other time involved in the request. For Medium size images (550KB), difference is more consistent. Again, it’s a timer resolution problem that makes 15 milliseconds probably something related to a CPU click of sorts. For large images (5.6MB) you can clearly see a difference. The time it takes for the handler to process the image is almost double that of IIS.

Just for the fun of it, if you want to run a URL that has the program that generated these numbers, you can by going to the URL: http://livedemos.peterkellner.net/ASPNETIISTiming.aspx and the numbers will recalculate live. A couple things to keep in mind here. First, the above URL is running on a hosted site with lots of other customers (specifically, it’s hosted at http://ultimahosts.net/ whom I recommend highly and it’s running with IIS 6.0.

If you want to experiment yourself with this, I’ve listed at the bottom of this article the class I associate with an ObjectDataSource to generate these numbers (as well as the HttpHandler and the aspx page). The tables are each GridView’s with incoming parameters to the ODS class of number of iterations and the image name in the /Images directory to process. It’s really very straight forward.

Conclusions

The conclusion is pretty obvious for large images. That is, IIS is better. There are times when you must use
a handler such as when you want to watermark your images or do other custom rendering. If, however that is not
necessary, better to rely on IIS to process the images. Something also to keep in mind is that if you use the
Wild Card Forwarding Option in IIS (only available in IIS6, not IIS5.1), the DefaultHttpHandler will automatically
get invoked for you on file types you do not specifically handle and those images will bounce back and get processed by
IIS 6.0. Here is a good reference from Dominick Baier describing how that works.

(GetWebData.cs) This is the class the ObjectDataSource References.

 
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.IO;
using System.Net;
using System.Web;
 
/// 
/// Summary description for GetWebData
/// 
/// 
[DataObject(true)] // This attribute allows the ObjectDataSource wizard to see this class
public class GetWebData
{
    /// 
    /// This is the Select Method used with the class.
    /// filename should be the name of the file that is in the images directory
    /// 
    /// 
    /// 
    /// 
    [DataObjectMethod(DataObjectMethodType.Select, true)]
    public List<ResultData> GetWebResults(int iterations, string fileName)
    {
        string absUri = HttpContext.Current.Request.Url.AbsoluteUri;
        string absoluteUri = absUri.Substring(0, absUri.LastIndexOf("/"));
        List<ResultData> list = new List<ResultData>(iterations);
        for (int i = 0; i < iterations; i++)
        {
            ResultData rd = new ResultData();
            rd.FromASPNET1 = ProcessWebRequest(absoluteUri + "/DisplayBMP.ashx?filename=" + fileName);
            rd.FromIIS = ProcessWebRequest(absoluteUri + "/Images/" + fileName);
            list.Add(rd);
        }
        return list;
    }
 
 
    /// 
    /// This process the requestString passed in and returns
    /// the number of ms it took to do that.  It does nothing
    /// with the results
    /// 
    /// complete URL
    /// milliseconds in process
    private double ProcessWebRequest(string requestString)
    {
        // used on each read operation (big, 1.5MB)
        // normally, one read is enough, but if it is
        // bigger than 1.5 MB, then it will simply to
        // multiple reads which should not affect timing
        // very much is my guess.
        byte[] buf = new byte[1500000];
 
        // prepare the web page we will be asking for
        HttpWebRequest request = (HttpWebRequest)
                                WebRequest.Create(requestString);
        DateTime startTime = DateTime.Now;
 
        // execute the request
        HttpWebResponse response = (HttpWebResponse)
                                   request.GetResponse();
 
        // we will read data via the response stream
        Stream resStream = response.GetResponseStream();
 
        int count;
        int bytesRead = 0;
        do
        {
            // fill the buffer with data
            count = resStream.Read(buf, 0, buf.Length);
            // make sure we read some data
            if (count != 0)
            {
                bytesRead += count;
            }
        } while (count > 0); // any more data to read?
 
        DateTime stopTime = DateTime.Now;
        TimeSpan elapsedTime = stopTime – startTime;
        return elapsedTime.TotalMilliseconds;
    }
}
 
/// 
/// A simple class to be used with Generic List
/// 
public class ResultData
{
    private double FromASPNET;
 
    public double FromASPNET1
    {
        get { return Math.Floor(FromASPNET); }
        set { FromASPNET = value; }
    }
 
    private double fromIIS;
 
    public double FromIIS
    {
        get { return Math.Floor(fromIIS); }
        set { fromIIS = value; }
    }
}

(DisplayBMP.ashx) The Handler I’m using for the comparison.

<%@ WebHandler Language="C#" Class="DisplayBMP"  %>
 
using System;
using System.Web;
 
public class DisplayBMP : IHttpHandler {
 
   public void ProcessRequest (HttpContext context) {
 
        try
        {
            string fileName = context.Server.MapPath("Images/medium.bmp");
            if (HttpContext.Current.Request.QueryString["filename"] != null)
            {
                fileName = context.Server.MapPath("Images/" + HttpContext.Current.Request.QueryString["filename"]);
            }
            System.Drawing.Bitmap bitMap = new System.Drawing.Bitmap(fileName);
 
            System.IO.MemoryStream ms = new System.IO.MemoryStream();
            bitMap.Save(ms, System.Drawing.Imaging.ImageFormat.Bmp);
            byte[] byteArray = new byte[ms.Length];
            ms.Position = 0;
            ms.Read(byteArray, 0, Convert.ToInt32(ms.Length));
            ms.Close();
            ms.Dispose();
            bitMap.Dispose();
            context.Response.ContentType = "image/bmp";
            context.Response.BinaryWrite(byteArray);
        }
        catch (Exception ee)
        {
            throw new ApplicationException(ee.ToString());
        }
        finally
        {
 
        }
 
    }
    public bool IsReusable {
        get {
            return false;
        }
    }
 
}

(ASPNETIISTiming.aspx) The aspx page to pull it all together (nothing in the codebehind).

<%@ Page Language="C#" MasterPageFile="~/MasterPageNoHeadShot.master" AutoEventWireup="true" CodeFile="ASPNETIISTiming.aspx.cs" Inherits="ASPNETIISTiming" Title="Untitled Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
 
<div>
        <table border="1" cellpadding="15">
            <tr>
                <td colspan="3" style="text-align: center">
                    Time Shown is for comparing load time in milliseconds when loading an image from
                    IIS<br />
                    or using ASP.NET handler.<br />
                    <br />
                    For Further Discussion on this:<br />
                    <br />
                    <asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="http://peterkellner.net/IISASPNETPerf">http://peterkellner.net/IISASPNETPerfasp:HyperLink>td>
            tr>
            <tr>
                <td style="width: 100px">
                    Small Image (35KB)td>
                <td style="width: 100px">
                    Medium Image (550KB)td>
                <td style="width: 100px">
                    Large Image (5.6MB)td>
            tr>
            <tr>
                <td style="width: 100px">
                    <asp:GridView ID="GridView1" runat="server" 
style="color: red;">AutoGenerateColumns="False"
          DataSourceID="ObjectDataSourceSmall">
                        <Columns>
                            <asp:BoundField DataField="FromIIS" HeaderText="FromIIS" SortExpression="FromIIS" />
                            <asp:BoundField DataField="FromASPNET1" HeaderText="FromASPNET1" SortExpression="FromASPNET1" />
                        Columns>
                    asp:GridView>
                td>
                <td style="width: 100px">
                    <asp:GridView ID="GridView2" runat="server" AutoGenerateColumns="False"
          DataSourceID="ObjectDataSourceMedium">
                        <Columns>
                            <asp:BoundField DataField="FromIIS" HeaderText="FromIIS" SortExpression="FromIIS" />
                            <asp:BoundField DataField="FromASPNET1" HeaderText="FromASPNET1" SortExpression="FromASPNET1" />
                        Columns>
                    asp:GridView>
                td>
                <td style="width: 100px">
                    <asp:GridView ID="GridView3" runat="server" AutoGenerateColumns="False"
          DataSourceID="ObjectDataSourceLarge">
                        <Columns>
                            <asp:BoundField DataField="FromIIS" HeaderText="FromIIS" SortExpression="FromIIS" />
                            <asp:BoundField DataField="FromASPNET1"       
HeaderText="FromASPNET1" SortExpression="FromASPNET1" />
                        Columns>
                    asp:GridView>
                td>
            tr>
        table>
        <br />
        <br />
        <asp:Button ID="Button1" runat="server" Text="Recalculate Times" Visible="False" /><br />
          
        <asp:ObjectDataSource ID="ObjectDataSourceMedium" runat="server" SelectMethod="GetWebResults"
            TypeName="GetWebData">
            <SelectParameters>
                <asp:Parameter DefaultValue="10" Name="iterations" Type="Int32" />
                <asp:Parameter DefaultValue="medium.bmp" Name="fileName" Type="String" />
            SelectParameters>
        asp:ObjectDataSource>
        <asp:ObjectDataSource ID="ObjectDataSourceSmall" runat="server" SelectMethod="GetWebResults"
            TypeName="GetWebData">
            <SelectParameters>
                <asp:Parameter DefaultValue="10" Name="iterations" Type="Int32" />
                <asp:Parameter DefaultValue="small.bmp" Name="fileName" Type="String" />
            SelectParameters>
        asp:ObjectDataSource>
        <asp:ObjectDataSource ID="ObjectDataSourceLarge" runat="server" SelectMethod="GetWebResults"
            TypeName="GetWebData">
            <SelectParameters>
                <asp:Parameter DefaultValue="10" Name="iterations" Type="Int32" />
                <asp:Parameter DefaultValue="large.bmp" Name="fileName" Type="String" />
            SelectParameters>
        asp:ObjectDataSource>
    div>
 
asp:Content>
 

Zero to Professional Web Site in Two DaysUsing Microsoft’s Visual Studio Design Templates

Peter Kellner — Tue, 29 Aug 2006 01:19:06 +0000

Using Microsoft’s Visual Studio Design Templates

Author: Peter Kellner
Date: August 27th, 2006

Our Story

It’s Monday, August 21st, we have our CodeCamp scheduled for October 7th and 8th in Los Altos California and we realize we need to have our web site to sign up and running yesterday! For those of you who don’t know what a codecamp is, basically, it’s a developer to developer weekend meeting where high quality presentations are given to an audience of enthusiastic developers. Typically, 30 or 40 speakers running simultanious presentations to 300 or so attendees. Codecamps are all Volunteer, all free, and always on a weekend. So, our web site needs to allow sign ups for speakers and their presentations, attendess to let us know they are coming, provide information about the Venue as well as ultimately provide scheduling information about classes. Most importantly, it needs to do it with style and pizazz.

Microsoft’s Professional CSS Design Templates to the Rescue

Personally, I’m good at building web site plumbing, doing things like building master pages, doing database access, making tables and labels, but to put it might it simply, I’m web design skill challenged. This is where Microsoft has done me a huge service by providing reference CSS Design templates I can use to create professional looking web sites. For our codecamp web site I took a look at the five templates available to me. The one that caught my eye for CodeCamp was the fun style web site on the left (also as shown on Microsoft’s web site).

It has a three dimensional, building block kind of look, a simple clean design and would allow me to have all the functionality I wanted in my web site. Taking a peak at the finished web site you can see the similarity.

Our Finished Product

Let’s take a look at the steps involved. As good engineers, we know what 60 of the "zero to 60" will look like (see picture on right), we know what "zero" looks like (Visual Studio 2005, File/New Empty Website), now we just need to figure out what the steps in the middle are.

By way of comparison between what Microsoft provides with their CSS Design Templates and our finished product, notice the menu on the left. Same format, just different content. Notice the title on the top, the header on the bottom as well as of course the great looking building block graphics giving the site the "fun" look and feel.

In the next section, will discuss the mapping between asp.net 2.0 and the CSS. Then, we will go into more details about how to make it happen. As a "tables" kind of HTML programmer it warms my heart (as well as all the viewers of my sites) to be able to deliver a css enabled web site.

Mapping CSS to ASP.NET 2.0

Lets first briefly talk some about what it takes to use a CSS file in a asp.net web site. First, you need to have CSS that supports the basic constructs you will be using. Assuming you are going to use a master page to implement your web site, you’ll need to have containers (also known as div tags) that wrap all the different parts of your web site. This includes things like headers, footers, menu’s, login controls, as well as of course the content. We will now go into a little detail on some of these areas to help you understand the steps.

Headers

If you look in the CSS file for the FUN site, you’ll see the following definition for "sitename" and "slogan" .

#sitename {
    position:absolute;
    top:20px;
    right:100px;
    text-align:right;
    color:#FFFFFF;
    font-size:1.8em;
    font-weight:bold;
    }
 
#sitename a {
    text-decoration:none;
    color:#FFFFFF;
    border-bottom:none;
    }
 
#slogan {
    font-size:.65em;
    margin:0px;
    text-align:right;
    }

In the reference site for Microsoft’s CSS Fun Site, you’ll see that they use the CSS for the title as follows:

<div id="sitename">
    <a href="#" title="site name – home page">site namea>
    <div id="slogan">
        Web site or company slogan goes herediv>
div>

In our ASP.NET 2.0 http://www.siliconvalley-codecamp.com, we use a similar construct for our title as follows:

<div id="sitename">
    <a href="#" title="Silicon Valley Code Camp">Silicon Valley Code Campa>
    <div id="slogan">
        "By and For the Developer Community"
    div>
div>

Footers are implemented in a similar way. Without showing all the details this time, the following snippet shows how we used the CSS to implement our own footer.

<div id="footer-container">
    <span id="footer-left">span>
    <div id="footer-right">
        <p>
            Silicon Valley Code Camp<br />
            October 7th and 8th, 2006<br />
            FootHill College, Los Altos Californiap>
    div>
div>

Lets take a look now at how to implement the menu (left side of the page) in the Master Page. This one is a little trickier because the css and Microsoft’s example don’t know anything about the sitemanager server control asp.net 2.0 gives us. First thing, lets view the actual css used for the menu as well as the example given to us using this css.

/******************
SIDE LAYOUT 
******************/
 
#side-container-outer {
    width:20%;
    position:absolute;
    top:120px;
    left:0px;
    padding-bottom:100px;
    }
 
#block-side-top-right {
    width:92%;
    height:25px;
    float:right;
    }
 
#block-side-top-left {
    width:8%;
    height:25px;
    float:left;
    background: url(block-side-top-left.gif) no-repeat top right;
    }
 
#side-container-inner{
    background: #929E8E;
    margin:0px;
    padding:0px;
    }
 
#side {
    background: #FFFFFF;
    width:70%;
    margin-left:8%;
    padding:0 12% 10px 10%;
    }    
 
#block-side-bottom-left {
    width:8%;
    height:25px;
    float:left;
    background: url(block-side-bottom-left.gif) no-repeat bottom right;
    margin:0px;
    padding:0px;
    }
 
#block-side-bottom-right {
    width:92%;
    height:25px;
    float:right;
    margin:0px;
    padding:0px;
    }

Now, lets look at the actual implementation that gives Microsoft their default menu in their template example.

\par ??\cf0 \cf2 <\cf13 div\cf0 \cf6 class\cf2 ="none">\par ??\cf0 \cf2 <\cf13 a\cf0 \cf6 href\cf2 ="#maincontent">\cf0 goto main content\cf2 \par ??\cf0 \cf2 \par ??\cf0 \cf2 <\cf13 ul\cf2 >\par ??\cf0 \cf2 <\cf13 li\cf2 ><\cf13 a\cf0 \cf6 href\cf2 ="#"\cf0 \cf6 title\cf2 ="">\par ??\cf0 Home\cf2 \par ??\cf0 \cf2 <\cf13 li\cf2 ><\cf13 a\cf0 \cf6 href\cf2 ="#"\cf0 \cf6 title\cf2 ="">\par ??\cf0 News\cf2 \par ??\cf0 \cf2 <\cf13 li\cf2 ><\cf13 a\cf0 \cf6 href\cf2 ="#"\cf0 \cf6 title\cf2 ="">\par ??\cf0 Products\cf2 \par ??\cf0 \cf2 <\cf13 li\cf2 ><\cf13 a\cf0 \cf6 href\cf2 ="#"\cf0 \cf6 title\cf2 ="">\par ??\cf0 About\cf2 \par ??\cf0 \cf2 <\cf13 li\cf2 ><\cf13 a\cf0 \cf6 href\cf2 ="#"\cf0 \cf6 title\cf2 ="">\par ??\cf0 Contact\cf2 \par ??\cf0 \cf2 <\cf13 li\cf2 ><\cf13 a\cf0 \cf6 href\cf2 ="#"\cf0 \cf6 title\cf2 ="">\par ??\cf0 Login\cf2 \par ??\cf0 \cf2 <\cf13 li\cf2 ><\cf13 a\cf0 \cf6 href\cf2 ="#"\cf0 \cf6 title\cf2 ="">\par ??\cf0 Join\cf2 \par ??\cf0 \cf2 \par ??\cf0 \cf2 <\cf13 div\cf0 \cf6 class\cf2 ="separator-side-column">\par ??\cf0 \cf2 \par ??\cf0 \cf11 \par ??\cf0 \cf2 \par ??\cf0 \cf2 <\cf13 div\cf2 >\par ??\cf0 \cf2 <\cf13 div\cf0 \cf6 id\cf2 ="block-side-bottom-right">\par ??\cf0 \cf2 <\cf13 img\cf0 \cf6 src\cf2 ="App_Themes/default/block-side-bottom-right.gif"\cf0 \par ?? \cf6 alt\cf2 =""\cf0 \cf6 width\cf2 ="100%"\cf0 \cf6 height\cf2 ="25"\cf0 \cf2 />\par ??\cf0 \cf2 <\cf13 div\cf0 \cf6 id\cf2 ="block-side-bottom-left">\par ??\cf0 \cf2 \par ??\cf0 \cf2 \par ??\cf0 \cf2 \par ??} -->

<div id="side-container-outer">
    <div id="block-side-top-right">
        <img src="App_Themes/default/block-side-top-right.gif" 
           alt="" width="100%" height="25" />div>
    <div id="block-side-top-left">
    div>
    <div class="clear">
    div>
    <div id="side-container-inner">
        <div id="side">
            <div class="clear">
            div>
            
            <div class="none">
                <a href="#maincontent">goto main contenta>
            div>
            <ul>
                <li><a href="#" title="">
                    Homea>li>
                <li><a href="#" title="">
                    Newsa>li>
                <li><a href="#" title="">
                    Productsa>li>
                <li><a href="#" title="">
                    Abouta>li>
                <li><a href="#" title="">
                    Contacta>li>
      &n bsp;         <li><a href="#" title="">
                    Logina>li>
                <li><a href="#" title="">
                    Joina>li>
            ul>
            <div class="separator-side-column">
            div>
            
        div>
        <div>
            <div id="block-side-bottom-right">
                <img src="App_Themes/default/block-side-bottom-right.gif" 
                   alt="" width="100%" height="25" />div>
            <div id="block-side-bottom-left">
            div>
        div>
    div>
div>

Because we are going to use the asp.net 2.0 server control SiteManager, our aspx file will look considerable different but will yield the same look and feel.

\par ??\cf0 \cf2 <\cf13 asp\cf2 :\cf13 SiteMapDataSource\cf0 \cf6 ID\cf2 ="SiteMapDataSource1"\cf0 \par ?? \cf6 runat\cf2 ="server"\cf0 \cf6 ShowStartingNode\cf2 ="false"\cf0 \cf2 />\par ??\cf0 \cf2 <\cf13 asp\cf2 :\cf13 Repeater\cf0 \cf6 ID\cf2 ="foo"\cf0 \cf6 runat\cf2 ="server"\par ??\cf0 \cf6 DataSourceID\cf2 ="SiteMapDataSource1"\cf0 \cf2 >\par ??\cf0 \cf2 <\cf13 HeaderTemplate\cf2 >\par ??\cf0 \cf2 <\cf13 ul\cf2 >\par ??\cf0 \cf2 \par ??\cf0 \cf2 <\cf13 ItemTemplate\cf2 >\par ??\cf0 \cf2 <\cf13 li\cf2 ><\cf13 a\cf0 \cf6 href\cf2 ='\cf0\cb7\highlight7 <%\cb0\highlight0 #Eval("url") \cb7\highlight7 %>\cf2\cb0\highlight0 '>\par ??\cf0 \cb7\highlight7 <%\cf2\cb0\highlight0 #\cf0 Eval(\cf13 "Title"\cf0 ) \cb7\highlight7 %>\par ??\cb0\highlight0 \cf2 \par ??\cf0 \cf2 \par ??\cf0 \cf2 <\cf13 FooterTemplate\cf2 >\par ??\cf0 \cf2 \par ??\cf0 \cf2 \par ??\cf0 \cf2 \par ??\cf0 \cf2 <\cf13 div\cf0 \cf6 class\cf2 ="separator-side-column">\par ??\cf0 \cf2 \par ??\cf0 \cf11 \par ??\cf0 \cf2 \par ??\cf0 \cf2 <\cf13 div\cf2 >\par ??\cf0 \cf2 <\cf13 div\cf0 \cf6 id\cf2 ="block-side-bottom-right">\par ??\cf0 \cf2 <\cf13 img\cf0 \cf6 src\cf2 ="App_Themes/default/block-side-bottom-right.gif"\cf0 \par ?? \cf6 alt\cf2 =""\cf0 \cf6 width\cf2 ="100%"\cf0 \cf6 height\cf2 ="25"\cf0 \cf2 />\par ??\cf0 \cf2 <\cf13 div\cf0 \cf6 id\cf2 ="block-side-bottom-left">\par ??\cf0 \cf2 \par ??\cf0 \cf2 \par ??\cf0 \cf2 \par ??} -->

<div id="side-container-outer">
    <div id="block-side-top-right">
        <img src="App_Themes/default/block-side-top-right.gif" 
        alt="" width="100%" height="25" />div>
    <div id="block-side-top-left">
    div>
    <div class="clear">
    div>
    <div id="side-container-inner">
        <div id="side">
            <div class="clear">
            div>
            
            <asp:SiteMapDataSource ID="SiteMapDataSource1" 
            runat="server" ShowStartingNode="false" />
            <asp:Repeater ID="foo" runat="server"
            DataSourceID="SiteMapDataSource1" >
                <HeaderTemplate>
                    <ul>
                HeaderTemplate>
                <ItemTemplate>
                    <li><a href=’<%#Eval("url") %>‘>
                        <%# Eval("Title") %>
                    a>li>
                ItemTemplate>
                <FooterTemplate>
                    ul>
                FooterTemplate>
            asp:Repeater>
            <div class="separator-side-column">
            div>
            
        div>
        <div>
            <div id="block-side-bottom-right">
                <img src="App_Themes/default/block-side-bottom-right.gif" 
                alt="" width="100%" height="25" />div>
            <div id="block-side-bottom-left">
            div>
        div>
    div>
div>

The SiteMap Server control is basically a repeater type control which means that a template for each row being repeated must be referenced. All the rows in the menu (which are pulled from the SiteMapDataSource) are output through the SiteMap Server control. However, if you look carefully at the above two examples, you’ll see that the containers (div tags) all have the same class references.

Not Everything Works out of the Box

So far, everything has seemed very straight forward. Well, life is not always so simple. For example, on our Presenters web page, we want to use the three column content that the css fun template provides us but unfortunately, there example looks like what I have pictured below on the left, and we want to make it look like what is pictured on the right. To do this, we are going to have to do a little minor surgery on the css file. Not very hard though since Microsoft’s template is almost correct.

The first thing you notice is that the Microsoft example of using the template on the left has columns that are roughtly equal in size. For our web site, we want to have a narrow column for the picture, a wide column for the course description, and then a narrow column to show the presenters website. What we get from the css gives is a great starting place. Below are all the css tags needed from the css file to make the three equal width columns.

/******************
Three Column Section
******************/
 
#three-column-container {
    width:100%;
    margin:10px 0px;
    padding:10px 0px
    }
 
#three-column-left {
    float:left;
    width:30%;
    }
 
#three-column-right {
    float:right;
    width:30%;
    }
 
#three-column-middle {
    width:30%;
    margin:0px 31% 0px 35%;
    }

Using this in their sample code, Microsoft used the following HTML to generate the page above on the left.

<div id="three-column-container">
<div id="three-column-left">
    <h2>
        Column one of a three column content sectionh2>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
    euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor
    sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
    ut.div>
<div id="three-column-right">
    <h2>
        Column three of a three column content sectionh2>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
    euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
div>
<div id="three-column-middle">
    <h2>
        Column two of a three column content sectionh2>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
    euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
div>

We want to modify this some, but we don’t just want to modify it, we want to create another set of tags so we can preserve the original for use later. Using cut and paste (with reservation of course), we create a new set of tags and simply add a w to the end of the tag names for wide (not very creative). We then modify the margins of this new tag to give us a wide section. A little trial and error is necessary to fine tune these numbers. Below is the new css we have created.

/******************
Three Column Section Wide Middle
******************/
 
#three-column-containerw {
    width:100%;
    margin:10px 0px;
    padding:10px 0px
    }
 
#three-column-leftw {
    float:left;
    width:15%;
    }
 
#three-column-rightw {
    float:right;
    width:15%;
    }
 
#three-column-middlew {
    width:55%;
    margin:0px 22% 0px 22%;
    margin:
    }

Using our newly defined css "three-column-containerw", we created the presenter interface using the Repeater server control included with asp.net. Notice the use of templates to each individual presenter’s information. Notice we are using div tags the way we normally use table row and column tags. Below is implementation.

<asp:Repeater ID="Repeater1" runat="server" 
    DataSourceID="ObjectDataSourceAllPresenters">
    <HeaderTemplate>
        <div id="three-column-containerw">
    HeaderTemplate>
    <ItemTemplate>
        <div id="three-column-leftw">
        <br />
            <asp:Image runat="server" ID="ImageUser" 
            ImageUrl=’<%# "~/DisplayImage.ashx?PKID=" + Eval("PKID")  %>‘ />
            <asp:Label ID="LabelName" runat="server" Font-Bold="true" 
            Text=’<%# Eval("UserFirstName") + " " + Eval("UserLastName") %>‘>
            asp:Label>
        div>
        <div id="three-column-rightw">
            <asp:Label ID="Label2" runat="server" 
            Font-Bold="true" Text=’<%# Eval("UserWebSite") %>‘>
            asp:Label>
 
            <asp:HyperLink ID="HyperLinkSessions"  
              NavigateUrl=’<%# "~/Sessions.aspx?id=" + Eval("PKID") %>‘
              Text="Sessions"
              runat="server">asp:HyperLink>
        div>
        <div id="three-column-middlew">
            <asp:Label ID="Label1" runat="server" Text=’<%# Eval("UserBio") %>‘>asp:Label>
        div>
  ;       <div class="clear">div>
        <hr />
    ItemTemplate>
    <FooterTemplate>
        div>
    FooterTemplate>
asp:Repeater>

Summary

We’ve demonstrated some of the techniques her necessary to take a professional built CSS and implement an asp.net 2.0 web site. Seeing the power CSS brings to the table makes it possible for a web designer and web engineer to work independently and product outstanding results. We’ve seen that here by taking the Microsoft Professionally developed templates, combined with an asp.net 2.0 engineer (me) for two days and the results are very impressive. Mileage will vary of course depending on the project, but this really shows what can be done in a very short amount of time.

About the author

Peter Kellner founded 73rd Street Associates in 1990, where he successfully delivered systems for university clinic scheduling, insurance company management, and turnkey physician office management to more than 500 customers nationwide. Ten years later, in 2000, 73rd Street Associates was purchased by a large insurance company, and Peter started a new career as an independent software consultant. Among the technologies he currently is involved with are ASP.NET, Oracle, Java, VOiP, and soon, SQL Server. When not working, Peter spends most his free time biking. He has ridden his bike across the globe. Most recently he and his wife, Tammy, rode across the U.S., from California to Georgia, in just 27 days. His blog site is http://peterkellner.net. You will find this article and the code posted in the download section.

Inserting Programmatically with ObjectDataSource in ASP.NET 2.0

Peter Kellner — Wed, 07 Jun 2006 20:21:02 +0000

( ObjectDataSource1.Insert(); )

ObjectDataSource’s are great for building your own middle tier between your aspx web page and your database (or any other datastore for that matter). By binding the datasource to a databound server control like detailsview, you auto-magically get the insert behavior you are looking for. If however, you just just want to insert to the ObjectDataSource you have included on your aspx page without using a databound control, you don’t have a lot of fancy footwork to do. All you have to do is reference the insert parameter by name (or index offset) and assign it directly.

Below is an example of how to insert a Role into Membership using the ObjectDataSource developed in a my previous MSDN article Microsoft ASP.NET 2.0 Member/Role Management with IIS
Part 2: Implementation.

< %@ 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 Button1_Click(object sender, EventArgs e)
{
  ObjectDataSource1.InsertParameters["roleName"].DefaultValue =
    TextBoxRole.Text;
  ObjectDataSource1.Insert();
}
script>
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>AddRoleWithODS.aspxtitle>
head>
<body>
<form id="form1" runat="server">
  <asp :ObjectDataSource ID="ObjectDataSource1" runat="server"
    InsertMethod="Insert"
    SelectMethod="GetRoles"
    TypeName="MembershipUtilities.RoleDataObject">
    <insertparameters>
      <asp   arameter Name="roleName" Type="String" />
    insertparameters>
  asp>
  <asp :Button ID="Button1" runat="server" Text="Add Role"
    OnClick="Button1_Click" />
  <asp :TextBox ID="TextBoxRole" runat="server">
    asp>
form>
body>
html>

If you do not want to declaratively define the ObjectDataSource and just want to use it directly, you can do that also. You simply reference the ObjectDataSource by Type and call its insert method. An example of that is below.

using System;
using System.Web.UI;
using MembershipUtilities;
 
public partial class Default3 : Page
{
  protected void Button1_Click(object sender, EventArgs e)
  {
    RoleDataObject.Insert(TextBox1.Text);
  }
}

Membership Editor Works With Atlas March CTP

Peter Kellner — Sat, 25 Mar 2006 03:17:20 +0000

Membership Editor Works With Atlas March Community Technology Preview IE and Firefox!

In two previous postings I used the January version of Atlas. At MIX06, Microsoft released the next version which is known as the March CTP. I have updated my web demonstration programs to take advantage of the new Atlas. The basic difference now is that the demonstrations all now work with Firefox as well as IE. I don’t know about other browser compatability issues, but I’d sure like to hear if they work in your browser. The code can be run at the following locations:

http://livedemos.peterkellner.net/ (using March Atlas)

http://livedemos.peterkellner.net/DefaultNoAjax.aspx (no Atlas, just for comparison)

and demonstrating adding Membership with Personalization information:

http://livedemos.peterkellner.net/DefaultWithProfile.aspx

I have not yet posted the code for the working versions of this you can download. I’m still not happy with part of the solution. Specifically, to make the textbox field you enter the search name into work correctly the changed behavior has to be added. This is done by declaratively putting the following in the asp page of interest.

<script type="text/xml-script">
 
  
   "ctl00_ContentPlaceHolder1_TextBoxUserSearch">
    
     "100"
          changed="onTextChange" />
    
   
  
 
script>

The TextBox is declared in the page as follows:

<asp :TextBox ID="TextBoxUserSearch"
 runat="server" AutoPostBack="False"
 CausesValidation="True">
asp>

And, of course there must be this little picece of script to make to make it work:

<script type="text/javascript">
function onTextChange() {
__doPostBack('ctl00_ContentPlaceHolder1_GridViewMemberUser','') ;
}
script>

The actual javascript that gets invoked is from Garbin’s "The Atlas Notes blog".

The reason the control can be referenced inside a master page is because of the ct100_ContentPlaceHolder_ prefix on the ID. I’m hoping to find out how to do the above without referencing the control by it’s strange ID. Anyone knows, please let me know. I’ll then fix my code and post it for everyone to see. (with a blog entry of course)

Thanks

Published in MSDN!

Peter Kellner — Mon, 09 Jan 2006 21:50:01 +0000

MSDN has published both of the articles from this blog in their latest release of MSDN. The articles can be found at the following two URL’s.

Microsoft ASP.NET 2.0 Member/Role Management with IIS

Part 1: Security and Configuration Overview (or Here at peterkellner.net)

Part 2: Implementation (or Here at peterkellner.net)

There is no source code with Part 1. The source code for Part 2 can be downloaded from the download section, or go directly to this file:

Source Download Here

(this source code replaces what was here before. It has many improvements and has been tested with the released VS2005)