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