ASP.NET Alerts: how to display message boxes from server-side code?

Pasted from:

http://weblogs.asp.net/bleroy/archive/2005/12/01/432016.aspx

 

One of the most common mistakes beginner ASP.NET developers make is to call MsgBox.Show from their ASP.NET server-side code. It is a mistake because this code runs server-side and will just display the message box on the server where it's not going to be very useful. Well, in version 2.0, it will actually throw an exception.

Once the developers understand the disconnected way HTTP works, it becomes quite natural, but the need to trigger an alert box from the server-side remains.

That's why I just published a new GotDotNet workspace CodePlex project that contains an Alert server control and a ConfirmButton server control that you can use both client-side and server-side. The controls should work fine in all browsers, but will look a little nicer in IE thanks to the (non-standard) modal dialog feature.

Here's how you use the controls...

First, if you want to show an alert from server-side code, you've got to first declare the alert in your page's markup (or new up a new Microsoft.Samples.Alert.Alert control and set its properties and subcontrols if you're that sort of developer):

<ms:Alert ID="ServerAlert" runat="server" Buttons="OK" Title="Server Alert" OnChoice="ServerAlertChoice"
Font-Names="Arial" HorizontalAlign="Center" Width="350px" Height="100px">
This is a rich alert box that was triggered by<br /><i>server-side code</i>.<br />
</ms:Alert>

And then simply call the Show() method on the Alert instance from server-side code:

ServerAlert.Show();

You can handle the user's choice server-side by handling the OnChoice event and act accordingly:

public void ServerAlertChoice(object sender, AlertChoiceEventArgs e) {
  AlertResult.Text = "You clicked " + e.Result.ToString();
  AlertResult.Visible = true;
}

You can also trigger the alert's display client-side and handle its response client-side:

<ms:Alert ID="ClientAlert" runat="server" Buttons="YesNoCancel" Title="Client Alert"
  Font-Names="Arial" HorizontalAlign="Center" Width="350px" Height="140px">
  This is a rich alert box that was triggered by<br /><i>client-side code</i>.<br />
  The button will take the value that you chose.<br /><br />
</ms:Alert>
<input type="button" name="ClientShowButton" value="Show alert without posting back"
onclick="this.value=<%= ClientAlert.GetShowClientEvent() %>;" /><br />

Or any combination that's useful for you.

You can also use the ConfirmButton as you would use a regular button (it derives from Button) to ask the user for confirmation before posting back to the server:

<ms:ConfirmButton ID="Confirm" runat="server" OnClick="ConfirmClick"
Text="Confirm Button" ConfirmText="Are you sure you want to press this button?" />

And so that you can use such confirm buttons in a repeated control such as a GridView, instances of a repeated confirm button can reference a single alert to save HTML rendering and not repeat the alert text for each data row:

<asp:GridView AutoGenerateColumns="False" DataSourceID="Datasource1"
  ID="GridView1" runat="server" DataKeyNames="ID">
  <SelectedRowStyle BackColor="gray" />
  <Columns>
    <asp:BoundField DataField="ID" HeaderText="ID" InsertVisible="False" ReadOnly="True"
      SortExpression="ID" Visible="False"/>
    <asp:BoundField DataField="Name" HeaderText="Name" SortExpression="Name"/>
    <asp:BoundField DataField="Alias" HeaderText="Alias" SortExpression="Alias"/>
    <asp:TemplateField HeaderText="Command">
      <ItemTemplate>
        <ms:ConfirmButton ID="Confirm" runat="server"
          Alert="GridSelectConfirmAlert" CommandName="select"
          Text="Select" /><br />
      </ItemTemplate>
    </asp:TemplateField>
  </Columns>
</asp:GridView>

<ms:Alert ID="GridSelectConfirmAlert" runat="server" Buttons="YesNo" Title="Are you sure?"
  Font-Names="Arial" HorizontalAlign="Center" Width="320px" Height="50px">
  Are you sure you want to select this row?
</ms:Alert>

Check out the Alert.aspx page for these examples in context.

I hope this is useful. As always, feedback is welcome.

http://www.codeplex.com/alerts

UPDATE: The first release was missing a file. I've corrected the version in source control and the release file. Thanks for pointing that out.

UPDATE 2: the project migrated to CodePlex.