How To Fill a GridView with Custom Objects in an Arraylist using a DataTable

Usually when I use a GridView, I pull and write to a database table, which is the easiest way to use them. All of the Edit and Delete commands are pretty much prepackaged together with the SqlDataSource control.

However, I recently found myself building a shopping cart tool that didn't touch a database until the user submits the order. I personally like to write to the database right away in case the client gets disconnected, but in this particular case, I didn't have that pleasure.

So, I needed to be able to pull an arraylist of objects of type ORDER (a custom class I build) out of the session variable SHOPPINGCART (another custom class I built) and feed them into a gridview for the user to edit quantity, remove items from the cart, etc before checking out.

I first put together my GridView:

<asp:GridView
    ID="gvYourCart"
    DataKeyNames="OrderID"
    AutoGenerateColumns="false"
    runat="server">
    <Columns>
        <asp:BoundField 
            HeaderText="Quantity" 
            DataField="Quantity" />
        <asp:BoundField 
            HeaderText="Device Model" 
            DataField="Device Model" 
            ReadOnly="true" />
        <asp:BoundField 
            HeaderText="Rate Plan" 
            DataField="Rate Plan" 
            ReadOnly="true" />
        <asp:BoundField 
            HeaderText="Total One Time Cost" 
            DataField="Total One Time Cost" 
            ReadOnly="true" />
        <asp:BoundField 
            HeaderText="Total Recurring Costs" 
            DataField="Total Recurring Costs" 
            ReadOnly="true" />
    </Columns>
</asp:GridView>

I only want users to be able to edit the Quantity field and remove orders from the cart, so I've made all other columns readonly.

Now, to start populating my gridview, I'll need to create a DataTable and populate it with the fields that are relavant to what I'll be displaying.
Private _dt As Data.DataTable
Public Sub Form_Load() Handles Me.Load
CType(Master.FindControl("nav_order"), HtmlTableCell).Attributes.Add("class", "nav_highlight")
_dt = New Data.DataTable()
_dt.Columns.Add("OrderID")
_dt.Columns.Add("Quantity")
_dt.Columns.Add("Product Model")
_dt.Columns.Add("Total One Time Cost")
gvYourCart.DataSource = _dt
If Not IsPostBack Then
BindData()
End If
End Sub

Public Sub BindData()
For Each thisOrder As Order In CType(Session("ShoppingCart"), ShoppingCart).Orders
Dim newRow As Data.DataRow = _dt.NewRow()
newRow.Item("OrderID") = thisOrder.ID
newRow.Item("Quantity") = thisOrder.Quantity
newRow.Item("Product Model") = thisOrder.Product.Name
newRow.Item("Total One Time Cost") = FormatCurrency(thisOrder.OneTimeCost(), 2)
_dt.Rows.Add(newRow)
Next
gvYourCart.DataBind()
End Sub

Because I know that I will need to bind data to my gridview every time I edit or delete from the control, I went ahead and created a BindData function that will pull data from my Shopping Cart in sessions and tie its data to the DataTable.

In order to edit and delete rows of my GridView, I will need to create 4 new functions (these are usually handled by the UpdateCommand and DeleteCommand of the SqlDataSource, but we'll need to build our own since we're doing things a little more custom than usual.

Add the following tags to the GridView control:
AutoGenerateEditButton="true"
AutoGenerateDeleteButton="true"
OnRowEditing="EditQty"
OnRowCancelingEdit="CancelEditQty"
OnRowUpdating="UpdateEditQty"
OnRowDeleting="DeleteOrder"

Now, at this point your code may look nothing like mine, but this should give you a pretty good start.

The EditQty sub procedure will pretty much always look like this. All we are doing is telling the GridView which row we will be editing. Because we set some columns as ReadOnly, they will not be editable.

Public Sub EditQty(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewEditEventArgs)
gvYourCart.EditIndex = e.NewEditIndex
BindData()
End Sub

Again, the CancelEditQty sub procedure is pretty standard. We are just letting the gridview know that we don't want to edit any rows by setting the EditIndex to -1.

Public Sub CancelEditQty()
gvYourCart.EditIndex = -1
BindData()
End Sub

Because I didn't allow for sorting on my GridView, I know that the shopping cart's order are displayed on the GridView in the same order as they are stored in the shopping cart, so I can afford to make the assumption that the index of the ArrayList in my ShoppingCart object's Orders property matches the e.RowIndex of the GridView, but be careful of how you make your edits.

Public Sub UpdateEditQty(ByVal sender As Object, ByVal e As GridViewUpdateEventArgs)
Dim thisRow As GridViewRow = gvYourCart.Rows(e.RowIndex())
CType(CType(Session("ShoppingCart"), ShoppingCart).Orders(e.RowIndex), Order).Quantity = CType(thisRow.Cells(1).Controls(0), TextBox).Text

gvYourCart.EditIndex = -1
BindData()
End Sub

Ditto.

Public Sub DeleteOrder(ByVal sender As Object, ByVal e As GridViewDeleteEventArgs)
CType(Session("ShoppingCart"), ShoppingCart).Orders.RemoveAt(e.RowIndex())
BindData()
End Sub

And that is it! You should now be able to view the contents of your ShoppingCart or other ArrayList in GridView form, and make easy edits and deletes.

AJAX and URL Rewrite: Sys is undefined Issue

I created a website on a subfolder of my domain, and later moved it to a subdomain as its own application. Oddly, after I did this, I saw an issue pop up wherein javascript errors were thrown every time I opened a page that:
Message: Syntax error
Line: 3
Char: 1
Code: 0
URI: http://(domain)/WebResource.axd?d=3sB1WgLxUgrovkMyz-aqWw4&t=633626442871064790
... along with 2 errors for the ScriptResource.axd file and 2 instances of a 'Sys' is undefined error.
After some research, I found that this is caused by the combination of AJAX and URL Rewrite. I'm not sure if it is specific to GoDaddy hosting, or global. It's strange that it didn't surface until I moved my project. Regardless, I have found a solution.

The major problem is that my application is not recognizing the WebResource.axd and ScriptResource.axd as files; therefore tying to rewrite their urls using them as keywords.

My current URL Rewrite structure looks like this:

<rewrite>
    <rules>
        <rule name="RewriteCheck" stopProcessing="true">
            <match url="^(.+)$" />
            <conditions logicalGrouping="MatchAll">
                <add input="{REQUEST_FILENAME}"
                    matchType="IsFile" 
                    negate="true" />
                <add input="{REQUEST_FILENAME}" 
                    matchType="IsDirectory" 
                    negate="true" />
            </conditions>
            <action type="Rewrite" url="UserProfile.aspx?key={R:0}" />
        </rule>
    </rules>
</rewrite>

I'm already checking for files and directories, but now I need to check for these .axd files before casting a url into the rewriter. Therefore, I'll use the bounce URLs off a pattern *.axd to negate them from being processed by the Rewrite function.

<rewrite>
    <rules>
        <rule name="RewriteCheck" stopProcessing="true">
            <match url="^(.+)$" />
            <conditions logicalGrouping="MatchAll">
                <add input="{REQUEST_FILENAME}" 
                    matchType="IsFile" 
                    negate="true" />
                <add input="{REQUEST_FILENAME}" 
                    matchType="IsDirectory" 
                    negate="true" />
                <add input="{URL}" 
                    pattern=".*.axd$" 
                    negate="true" />
            </conditions>
            <action type="Rewrite" url="UserProfile.aspx?key={R:0}" />
        </rule>
    </rules>
</rewrite>

I re-ran my application and every worked like a charm!

Vanity URLs with GoDaddy Hosting using URL Rewrite

GoDaddy is a very affordable web hosting provider and domain registrar. I often recommend them to most of my clients who don't already have hosting set up. Unfortunately, GoDaddy does not allow you to access the IIS panel directly which sometimes makes a simple task slightly more complex as you have to navigate through their hosting control center, or sometimes entirely unfeasible. However, for the most part, they provide you with everything you would need to host most websites for a nominal fee.

I've recently had the need to create a portal that used vanity urls for each user profile on the site. For instance, if Aaron, Bob and Carl all have profiles on the portal, their respective portals may be:
Aaron: digitalplaydoh.com/profile.aspx?id=2
Bob: digitalplaydoh.com/profile.aspx?id=5
Carl: digitalplaydoh.com/profile.aspx?id=31

The client would like users to be able to select a unique ID for their account that can be typed out after the domain that will take users straight to their profile, similar to what you would find on Facebook or MySpace. ie:
Aaron: digitalplaydoh.com/aaronsmith
Bob: digitalplaydoh.com/bigbob
Carl: digitalplaydoh.com/carl


Microsoft's URL Rewrite module comes preinstalled on GoDaddy accounts with IIS 7.0. Here's where things get a little unfortunate for the GoDaddy developer. While running IIS 7.0, you will be unable to use Front Page Extensions, which means if you're using Visual Studio, you'll need to now connect to the site with the FTP method. Not terrible, but definitely a little slower.

Once you're running IIS 7.0, we're ready to start using the Microsoft URL Rewrite module. Open your web.config file and go to the <system.webServer> and add the following:

<system.webServer>
    <rewrite>
        <rules>
            <rule name="RewriteCheck" stopProcessing="true">
                <match url="^(.*)$" />
                <conditions logicalGrouping="MatchAll">
                    <add input="{REQUEST_FILENAME}" 
                        matchType="IsFile" 
                        negate="true" />
                    <add input="{REQUEST_FILENAME}" 
                        matchType="IsDirectory" 
                        negate="true" />
                </conditions>
                <action type="Rewrite" url="Profile.aspx?key={R:0}" />
            </rule>
        </rules>
    </rewrite>
</system.webServer>

This allows us to find any path that is not a file or directory, and redirect it to Profile.aspx?key=(path). This means I need to now make sure that Profile.aspx can support me passing a "key" request parameter in instead of an "id", which is just a little work in how we pull from the database, but we've otherwise now go the ability to go to http://digitalplaydoh.com/carl and get Carl's profile page.

Note that you also need to be ready for an incorrect "key". Should I accidently type http://digitalplaydoh.com/calr, you need to be able to catch this as a incorrect keyword and show a proper error page.