ASP.Net Tips and Tutorials

These tips work with the controls themselves and can be used in Expression Web and Visual Studio etc.

Adding 'Delete Protection' to controls

If you use a control set up to allow Delete, the Delete button gives a straight delete without any warning, which can be dangerous.

To give a warning dialog box, add an OnClientClick event to the Delete button, as follows.

<asp:LinkButton
ID="DeleteButton"
runat="server" CausesValidation="False"
CommandName="Delete"
OnClientClick="return confirm('Are you sure you want to delete this record?');"
Text="Delete">
</asp:LinkButton>

See the tip below about creating multi-line dialog boxes.

Handling 'no data' and giving a link to add data.

If you have a FormView or DetailsView control reading data from an empty table it will give a blank page.

We get round this by adding an EmptyData template to the control.

So, what do users do to add entries now that the main view isn't there? We give them a 'New' link, copied from the ItemTemplate, with a simple id change and put this into the EmptyDataTemplate we created above.

To create a similar 'Empty Data' message with a Repeater control see this article

Using the Enter key to submit a form

The enter key doesn't submit a form in IE under most conditions. There are a number of ways around this using JavaScript but there's a very simple way on an ASP.Net page.

Enclose the fields in a Panel and set the DefaultButton attribute to the name of your submit button. Eg:

<asp:Panel ID="pnlEntry" DefaultButton="btnSearch" runat="server">
Search for: <asp:TextBox ID="txtSearch" runat="server" />
<asp:Button ID="btnSearch" Text="Search" runat="server"/>
</asp:Panel>

Multi-line Dialog boxes

You can have multi-line dialog messages by defining them as you would in JavaScript (which is what they will become). To add a second line to the deletion warning we created above using \n to force the new line(s):

OnClientClick="return confirm('Are you sure you want to delete this record? \n\n Deletions CANNOT be undone.');"

You can use quotes too with \' or \"

GridView Edit and Delete doesn't work

When you configure a GridView DataSource you have the option of using 'Insert Update and Delete'. These options only appear if you've selected the table key field when choosing the columns you want to display. Having done so you get this table key field as one of the columns.

Now, having this id column visible isn't very elegant and so the obvious thing to do is to change it's visibility to 'false'. However you'll soon discover that this stops the 'Edit and 'Delete' links working. You get no error but no update or delete happens.

The simple way around this is to set the GridViews 'DataKeyNames' parameter to the table ID. You can do this in code view or via the properties toolbox, eg, DataKeyNames = "userID"

Adding items to a databound DropDownList

It's common to populate a drop down list from a database table or xml file. You may need to add an initial item that invites the user to select from the list. This can be done on the page AppendDataBoundItem property.

<asp:DropDownList ID="DropDownList1" runat="server"
DataSourceID="SqlDataSource1"
DataTextField="widgetName" DataValueField="widgetID"
AppendDataBoundItems="true">
<asp:ListItem Value="">Select a widget</asp:ListItem>
</asp:DropDownList>

GridView DataFormat doesn't work?

If you add a DataFormat to a GridView column you'll probably puzzle over why it doesn't work.

To solve this little 'buglet' you need to set the bound field's HTMLEncode property to 'false', which you can do from the properties pane in EW when you edit the GridView columns, under GridView Tasks.

<asp:boundfield HtmlEncode="False" DataFormatString="{0:d}" DataField="HireDate" SortExpression="HireDate" HeaderText="Hire Date">

Formatting Dates in a FormView Control

You may often have a DateTime format in your database field which, if unformatted in your FormView control will display as:

28/02/2008 10:25:01:22 (using a UK example!)

To get this to display in ShortDate format you need to add the format parameters to the Bind property, for example:

<asp:Label ID="nDateLabel" runat="server" Text='<%# Bind("nDate", "{0:dd-MMM-yyyy}") %>'></asp:Label>

The format can be varied as required, perhaps to {0:MM/dd/yyyy} for a US style date

Using a DropDownList inside a FormView control

It is often useful to have a DropDownList inside a FormView's edit or insert templates. How to do this isn't obvious but is in fact simple.

The edit and insert templates have their textboxes databound to the relevant datasource and all we need to do is databind the DropDownList's 'SelectedValue' property to the appropriate value.

In this example we're binding the DropDownList to sName and sID fields from a table defined in the SQLDataSource.

<asp:DropDownList ID="DropDownList1" runat="server"
    DataSourceID="SQLDataSource2"
    DataTextField = "sName"
    DataValueField = "sID"
    SelectedValue = '<%# Bind("sID")%>' />

Note that the SelectedValue property needs to be added by hand. Neither Expression Web or Visual Studio support it in Intellisense!

DetailsView Edit fields are too small

If you use GridView and DetailsView controls to form a Master/Detail combination, it's common to find that the DetailsView edit fields are too small to show all the data. An address is a typical example.

The only way I've found around this is to use links rather than buttons or images for the CommandField ButtonType and then style 'inputs' to a width that suits the data being edited. You need to do this for both the GridView and DetailsView.

Links are not as attractive as buttons, so you can then style the links to look like buttons if need be.

If you have other links on the page, you may need to enclose the GridView and DetailsView in a Div, so that you can limit the effect of the input styling.

ASP.Met Menus in Safari

If you've carefully crafted a drop-down or flyout menu using the ASP.Met menu control you'll unfortunately find it doesn't work in the Apple Safari browser. This is a know issue, caused by ASP.Net incorrectly recognising Safari as a 'downlevel' browser.

The way around this is to add "ClientTarget='uplevel'" in the page directive.

<%@ Page ClientTarget-"uplevel" ..... %>

If you use a MasterPage you can avoid needing to do this on every page by adding the following to the MasterPage:

Protected Sub Page_PreInit(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.PreInit
    If InStr(Request.ServerVariables("http_user_agent"), "Safari") Then
        Page.ClientTarget = "uplevel"
    End If
End Sub

</script>