jQuery and reloading server control

Question

I am new to jQuery and have some questions. I have created a server web control (it implements a webControl) and wanted to know how to refresh the control when an event fires. In other words:

1. I have a server control that has a drop-down list.
2. When the user makes a selection, I want to cause a partial post back and reload the control (to set some public properties values that can be read by the page consuming the control).

Can this be done just by using jQuery or would I still need to update the panels?

Here is my server control:

<Assembly: WebResource("com.myControls.WebControls.miniActiveDirectorySearchStyle.css", "text/css", PerformSubstitution:=True)> 
Namespace com.myControls.WebControls
    < _
    System.Drawing.ToolboxBitmap(GetType(Button), "myControls.WebControls.ActiveDirectorySearch.bmp"), ToolboxData("<{0}:miniActiveDirectorySearch ID='miniActiveDirectorySearch{0}'  runat=""server""> </{0}:miniActiveDirectorySearch>"), _        ClientCssResource("com.myControls.WebControls.miniActiveDirectorySearchStyle.css")> _
Public Class miniActiveDirectorySearch
    Inherits WebControl
    Public ddlValue As New TextBox
    Public ddlText As New TextBox

    Private tblMainLayout As HtmlTable
    Private divControlContainer As New HtmlGenericControl()
    Private modalExtender As New ModalPopupExtender()
    Private tbSearchUser As New TextBox
    ''' <summary>
    '''X Offset for modal dialog
    ''' </summary>
    ''' <value></value>
    ''' <returns></returns>
    ''' <remarks></remarks>
    <Description("Mouser Over Highlight Color")> Public Property mouseOverColor As String = "#9db3d9"

    ''' <summary>
    '''X Offset for modal dialog
    ''' </summary>
    ''' <value></value>
    ''' <returns></returns>
    ''' <remarks></remarks>
    <Description("Drop Down List Width")> Public Property ddlWidth As String = "100"

    Private Sub attachWebResources()

        Dim styleLink As String = "<link rel='stylesheet' text='text/css' href='{0}' />"
        Dim location As String = Page.ClientScript.GetWebResourceUrl(Me.[GetType](), "myControls.WebControls.miniActiveDirectorySearchStyle.css")
        Dim styleInclude As New LiteralControl([String].Format(styleLink, location))
        DirectCast(Page.Header, HtmlControls.HtmlHead).Controls.Add(styleInclude)

        ScriptManager.RegisterClientScriptResource(Me, Me.GetType, "com.myControls.ActiveDirectory.WebControls.jquery-1.4.1.min.js")
        ScriptManager.RegisterClientScriptResource(Me, Me.GetType, "com.myControls.ActiveDirectory.WebControls.miniActiveDirectorySearch.js")


    End Sub
    Protected Overrides Sub CreateChildControls()
        createDynamicControls()
        MyBase.CreateChildControls()
    End Sub

    Protected Overrides Sub OnInit(ByVal e As System.EventArgs)
        attachWebResources()
        MyBase.OnInit(e)
    End Sub


    Protected Overrides Sub OnLoad(ByVal e As System.EventArgs)
        MyBase.OnLoad(e)
    End Sub

    Private Sub createDynamicControls()
        Controls.Clear()

        Try
            tblMainLayout = buildMaintable()
            Controls.Add(tblMainLayout)
        Catch ex As Exception
            Throw New ApplicationException("Exception Occurred Creating Control.", ex.InnerException)
        End Try
    End Sub
    Private Function buildMaintable() As HtmlTable
        tblMainLayout = New HtmlTable
        Dim divImage As New HtmlGenericControl("div")
        ddlText = New TextBox
        ddlValue = New TextBox

        With ddlText
            .ID = "ddlText"
        End With

        With ddlValue
            .ID = "ddlValue"
        End With
        With divControlContainer
            .ID = Me.UniqueID & "_divSearchResults"
            .Attributes.Add("onClick", "hideMe(this)")
        End With
        With divImage
            .ID = Me.UniqueID & "_ImageDiv"
        End With
        With tblMainLayout
            .CellPadding = 0
            .CellSpacing = 0
            .Style.Add("border-collapse", "collapse")

            Dim tr As New HtmlTableRow
            With tr
                Dim td As New HtmlTableCell
                With td
                    With tbSearchUser
                        .ID = Me.UniqueID & "_tbSearchName"
                        .Attributes.Add("onKeyPress", "searchKeyPress(event, this.id, '" & divControlContainer.UniqueID & "', '" & mouseOverColor & "','" & ddlText.ID & "','" & ddlValue.ID & "')")
                        .Attributes.Add("onmouseover", "document.getElementById('" & divImage.ID & "').className='DivSearchMouseOverMini', tbMouseOver(this)")
                        .Attributes.Add("OnmouseOut", "document.getElementById('" & divImage.ID & "').className='divSearchDefaultMini',tbMouseOut(this)")
                        .Width = ddlWidth
                        .Attributes.Add("onClick", "showSearchResults('" & divControlContainer.UniqueID & "')")
                        .CssClass = "tbSearchDefault"
                    End With
                    .Controls.Add(tbSearchUser)


                    .Controls.Add(ddlText)
                    .Controls.Add(ddlValue)

                End With

                .Controls.Add(td)

                td = New HtmlTableCell
                With td

                    With divImage
                        .Attributes.Add("class", "divSearchDefaultMini")
                        .Attributes.Add("onmouseover", "this.className='DivSearchMouseOverMini',document.getElementById('" & tbSearchUser.ID & "').className='tbSearchMouseOver'")
                        .Attributes.Add("onmouseout", "this.className='divSearchDefaultMini', document.getElementById('" & tbSearchUser.ID & "').className='tbSearchDefault'")
                        .Attributes.Add("onClick", "showSearchResults('" & divControlContainer.UniqueID & "')")
                    End With
                    .Controls.Add(divImage)
                End With
                .Controls.Add(td)

            End With
            .Controls.Add(tr)
            tr = New HtmlTableRow
            With tr
                Dim td As New HtmlTableCell
                With td
                    .ColSpan = 2
                    .Controls.Add(divControlContainer)
                End With
                .Controls.Add(td)
            End With
            .Controls.Add(tr)
        End With

        Return tblMainLayout
    End Function

End Class

This code creates a server control with a textbox and styles to mimick a dropdown list. This way, I can add some functionality to the drop down list. I would like to cause a partial post back when the user makes a change to the "dropdown list" or textbox. All my jQuery is done in another file that is added as a web resource.

Answer 1

Why not use an ajax call to the server page, which won't cause an actual post-back. Grab what you need and update it on the client in the response. Or, you can fire your server code to do that as well.

jQuery ajax is really easy to use. Just declare a static Webmethod on the server to handle whatever your request is supposed to accomplish.