ASP.NET AJAX Jquery pass parameter to user control and create user control dynamicaly
Issues rendering UserControl using Server.Execute() in an ASMX web service.
Issues ICustomParams not defined.
Output: getting usercontrol having grid in Jquery popup through ajax. (Click to enlarge)
I will explain how to dynamically load ASP.Net UserControl using jQuery and AJAX and add it to the ASP.Net page. Also we can see how to dynamically pass parameters to ASP.Net UserControl using jQuery AJAX.
Step1:
Interface
First we need to implement an interface. create a ICustomParams.vb in app_code folder.
Public Interface ICustomParams
Property docType() As String
Property project() As String
End Interface
This will solve exception of IcustomerParams
Step2:
UserControl
Add a web usercontrol(display1.ascx) file with implement the ICustomParams interface, like this
Public Class display1
Inherits System.Web.UI.UserControl
Implements ICustomParams
Private docType As String
Private project As String
Public Property idocType() As String Implements ICustomParams.docType
Get
Return docType
End Get
Set(value As String)
docType = value
End Set
End Property
Public Property iproject() As String Implements ICustomParams.project
Get
Return project
End Get
Set(value As String)
project = value
End Set
End Property
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
GridView1.DataSource = dbOperation.getDBTable("select project,last_updated as reviewdate,reviewdate as reviewdate1,reviewby,subject,venue,filename,remarks1,remarks2, concat(project,'\\',type,'\\',filename) as url from upload_cmg where project like '" & project & "' and type = '" & docType & "' order by reviewdate1 desc")
GridView1.DataBind()
End Sub
End Class
Step3:
WebMethod
Below is the WebMethod that will accept the jQuery AJAX call and load the UserControl dynamically. The WebMethod accepts UserControl (.ascx) path to load the UserControl. Also I will pass string parameters of type and project which I use to set the properties via the interface. Finally the UserControl returned as HTML string back to the page.
create a webservice vinservice.asmx like this (tag omitted for blog)
WebService Language="VB" CodeBehind="~/App_Code/vinservice.vb" Class="vinservice"
Create corresponding vb file in App_code as vinservice.vb:
Imports System.Web
Imports System.Web.Services
Imports System.Web.Services.Protocols
Imports System.Web.Script.Services
Imports System.Web.Script.Serialization
' To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
_
_
_
_
Public Class vinservice
Inherits System.Web.Services.WebService
Public Function GetUserControlHTML(controlpath As String, type As String, project As String) As String
' Create instance of the page control
Dim page As New Page()
Dim headHolder = New System.Web.UI.HtmlControls.HtmlHead
' Create instance of the user control
Dim userControl As UserControl = DirectCast(page.LoadControl(controlpath), UserControl)
'Disabled ViewState- If required
'' userControl.EnableViewState = False
'Acces the control via the interface
Dim UserCtrl As ICustomParams = TryCast(userControl, ICustomParams)
If UserCtrl IsNot Nothing Then
UserCtrl.docType = type
UserCtrl.project = project
End If
'Form control is mandatory on page control to process User Controls
Dim form As New HtmlForm()
'Add user control to the form
form.Controls.Add(userControl)
'Add form to the page
page.Controls.Add(headHolder)
page.Controls.Add(form)
'Write the control Html to text writer
Dim textWriter As New System.IO.StringWriter()
'execute page on server
HttpContext.Current.Server.Execute(page, textWriter, False)
' Clean up code and return html
' Dim html As String = CleanHtml(textWriter.ToString())
Return html
End Function
End Class
Step4:
Client-side Execution
Below we are making an AJAX with JQuery call to the server WebMethod and passing the controlpath to load the UserControl with type and project parameters:
function vinModal( type, project )
{
//$("#display1").setProject(i);
// $("#display1").setDocType(j);
$.ajax({
type: "POST",
url: "vinservice.asmx/GetUserControlHTML",
data: "{controlpath: '~/display1.ascx', type: '"+ type +"', project: '"+ project +"'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnSuccess,
error: OnError
});
function OnSuccess(data, status) {
// alert(data.d); //no need to display on success
$("#dynamicControl").html(data.d);
}
function OnError(request, status, error) {
alert('error ' + request.statusText + status + error.responseText);
//$("#divmenu").html('error ' + request.statusText);
}
}
If your control have html error then you may get following message:
To resolve this check your html of user control.
- Vinod Kotiya
Issues ICustomParams not defined.
Output: getting usercontrol having grid in Jquery popup through ajax. (Click to enlarge)
I will explain how to dynamically load ASP.Net UserControl using jQuery and AJAX and add it to the ASP.Net page. Also we can see how to dynamically pass parameters to ASP.Net UserControl using jQuery AJAX.
Step1:
Interface
First we need to implement an interface. create a ICustomParams.vb in app_code folder.
Public Interface ICustomParams
Property docType() As String
Property project() As String
End Interface
This will solve exception of IcustomerParams
Step2:
UserControl
Add a web usercontrol(display1.ascx) file with implement the ICustomParams interface, like this
Public Class display1
Inherits System.Web.UI.UserControl
Implements ICustomParams
Private docType As String
Private project As String
Public Property idocType() As String Implements ICustomParams.docType
Get
Return docType
End Get
Set(value As String)
docType = value
End Set
End Property
Public Property iproject() As String Implements ICustomParams.project
Get
Return project
End Get
Set(value As String)
project = value
End Set
End Property
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
GridView1.DataSource = dbOperation.getDBTable("select project,last_updated as reviewdate,reviewdate as reviewdate1,reviewby,subject,venue,filename,remarks1,remarks2, concat(project,'\\',type,'\\',filename) as url from upload_cmg where project like '" & project & "' and type = '" & docType & "' order by reviewdate1 desc")
GridView1.DataBind()
End Sub
End Class
Step3:
WebMethod
Below is the WebMethod that will accept the jQuery AJAX call and load the UserControl dynamically. The WebMethod accepts UserControl (.ascx) path to load the UserControl. Also I will pass string parameters of type and project which I use to set the properties via the interface. Finally the UserControl returned as HTML string back to the page.
create a webservice vinservice.asmx like this (tag omitted for blog)
WebService Language="VB" CodeBehind="~/App_Code/vinservice.vb" Class="vinservice"
Create corresponding vb file in App_code as vinservice.vb:
Imports System.Web
Imports System.Web.Services
Imports System.Web.Services.Protocols
Imports System.Web.Script.Services
Imports System.Web.Script.Serialization
' To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
Public Class vinservice
Inherits System.Web.Services.WebService
Public Function GetUserControlHTML(controlpath As String, type As String, project As String) As String
' Create instance of the page control
Dim page As New Page()
Dim headHolder = New System.Web.UI.HtmlControls.HtmlHead
' Create instance of the user control
Dim userControl As UserControl = DirectCast(page.LoadControl(controlpath), UserControl)
'Disabled ViewState- If required
'' userControl.EnableViewState = False
'Acces the control via the interface
Dim UserCtrl As ICustomParams = TryCast(userControl, ICustomParams)
If UserCtrl IsNot Nothing Then
UserCtrl.docType = type
UserCtrl.project = project
End If
'Form control is mandatory on page control to process User Controls
Dim form As New HtmlForm()
'Add user control to the form
form.Controls.Add(userControl)
'Add form to the page
page.Controls.Add(headHolder)
page.Controls.Add(form)
'Write the control Html to text writer
Dim textWriter As New System.IO.StringWriter()
'execute page on server
HttpContext.Current.Server.Execute(page, textWriter, False)
' Clean up code and return html
' Dim html As String = CleanHtml(textWriter.ToString())
Return html
End Function
End Class
Step4:
Client-side Execution
Below we are making an AJAX with JQuery call to the server WebMethod and passing the controlpath to load the UserControl with type and project parameters:
function vinModal( type, project )
{
//$("#display1").setProject(i);
// $("#display1").setDocType(j);
$.ajax({
type: "POST",
url: "vinservice.asmx/GetUserControlHTML",
data: "{controlpath: '~/display1.ascx', type: '"+ type +"', project: '"+ project +"'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnSuccess,
error: OnError
});
function OnSuccess(data, status) {
// alert(data.d); //no need to display on success
$("#dynamicControl").html(data.d);
}
function OnError(request, status, error) {
alert('error ' + request.statusText + status + error.responseText);
//$("#divmenu").html('error ' + request.statusText);
}
}
If your control have html error then you may get following message:
To resolve this check your html of user control.
- Vinod Kotiya
Comments