Gath Adams

This code shows how to display a client-side Alert Box from within server-side code. Of course, being built on JQuery, the Alert Box is cooler than usual.

The Alert Box is built on the Impromtu Plugin for JQuery. It also uses the Corners Plugin for the rounded corners.

Here is a demo of the ASP.Net Alert Box. Clicking the button will submit the page, and the Alert Box will be displayed once the page has been returned.

Here is the code behind the Submit Button:

Protected Sub Button2_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button2.Click
clsJQuery.AlertBox(Me.Page, "this is a demo of the Alert Box using JQuery")
End Sub

And here is the code in the clsJQuery Class:

Public Class clsJQuery
    Public Shared Sub AlertBox(ByRef oPage As Page, ByVal sMsg As String)

        Call IncludeJQuery(oPage)
        Call IncludeImpromptu(oPage)
        Call IncludeCorners(oPage)

        'Add the script after all the HTML
        Dim sb As StringBuilder
        sb = New StringBuilder
        sb.Append("<script language=javascript>$.prompt('" & sMsg & "').children('#jqi').corner();</script>")
        oPage.Controls.AddAt(oPage.Controls.Count, New LiteralControl(sb.ToString()))
        sb = Nothing

    End Sub

    Private Shared Sub IncludeJQuery(ByVal oPage As Page)
        Call IncludeJSLibrary(oPage, "jquery-1.2.6.min.js")
    End Sub

    Private Shared Sub IncludeCorners(ByVal oPage As Page)
        Call IncludeJSLibrary(oPage, "jquery.corner.js")
    End Sub

    Private Shared Sub IncludeImpromptu(ByVal oPage As Page)
        Call IncludeJSLibrary(oPage, "jquery-impromptu.1.5.js")

        If oPage.ClientScript.IsClientScriptBlockRegistered("jquery.alert.css") = False Then
            oPage.ClientScript.RegisterClientScriptBlock(oPage.GetType, "jquery.alert.css", "<LINK href='jquery.alert.css' type=text/css rel=stylesheet >")
        End If
    End Sub

    Private Shared Sub IncludeJSLibrary(ByRef oPage As Page, ByVal sJSFileName As String)
        Dim sRegKey As String = "jquery-1.2.6.min.js"

        If oPage.ClientScript.IsClientScriptIncludeRegistered(sJSFileName) = False Then
            oPage.ClientScript.RegisterClientScriptInclude(oPage.GetType, sJSFileName, sJSFileName)
        End If

    End Sub
End Class

All pretty simple The only things to really note are the different subs which make sure that the jquery scripts are only loaded once on the page (the subs IncludeJQuery, IncludeImpromptu etc can should be called when using other jquery functions). Also, the adding of the jquery call as a new page element at the foot of the page ensures the libraries are loaded before the function is called.

This post brought to you by WeGotDomain.com - Over 10,000 Aged domains for sale!

Related posts:

1. Create a Website Comparison Widget using GoogleTrends

Name (required)

Mail (will not be published) (required)

Website