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:
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.
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.