Archive

Archive for October, 2009

Calling Method in Parent Page from User Control

October 10, 2009 Leave a comment

In ASP.Net, we develop custom user control as a reusable server control independent of any containing parent aspx page. User control has its own public properties, methods, delegates, etc that can be used by parent aspx page. When a user control is embedded or loaded into a page, the page can access public properties, methods, delegates, etc that are in user control. After loading the user control, there a situation may arise like calling methods in page itself. But when a user control is developed, it has no knowledge of containing page. So it becomes a trick to call the page method.

In .Net, Delegate class has one method DynamicInvoke. DynamicInvoke method is used to invoke (late-bound) method referenced by delegate. We can use this method to call a method in parent page from user control. Let’s try with this example.

First create a user control called CustomUserCtrl. Its code will look some thing like this:

public partial class CustomUserCtrl : System.Web.UI.UserControl
{
private System.Delegate _delWithParam;
public Delegate PageMethodWithParamRef
{
set { _delWithParam = value; }
}

private System.Delegate _delNoParam;
public Delegate PageMethodWithNoParamRef
{
set { _delNoParam = value; }
}

protected void Page_Load(object sender, EventArgs e)
{
}

protected void BtnMethodWithParam_Click(object sender, System.EventArgs e)
{
//Parameter to a method is being made ready
object[] obj = new object[1];
obj[0] = "Parameter Value" as object;
_delWithParam.DynamicInvoke(obj);
}

protected void BtnMethowWithoutParam_Click(object sender, System.EventArgs e)
{
//Invoke a method with no parameter
_delNoParam.DynamicInvoke();
}
}

Then add this user control into an aspx page. The code behind of this page is as:

public partial class _Default : System.Web.UI.Page
{
delegate void DelMethodWithParam(string strParam);
delegate void DelMethodWithoutParam();
protected void Page_Load(object sender, EventArgs e)
{
DelMethodWithParam delParam = new DelMethodWithParam(MethodWithParam);
//Set method reference to a user control delegate
this.UserCtrl.PageMethodWithParamRef = delParam;
DelMethodWithoutParam delNoParam = new DelMethodWithoutParam(MethodWithNoParam);
//Set method reference to a user control delegate
this.UserCtrl.PageMethodWithNoParamRef = delNoParam;
}

private void MethodWithParam(string strParam)
{
Response.Write("<br/>It has parameter: " + strParam);
}

private void MethodWithNoParam()
{
Response.Write("<br/>It has no parameter.");
}
}

BtnMethodWithParam and BtnMethowWithoutParam are two different buttons on the user control that are invoking the methods in the parent page. On Page_Load of the page, we are setting the references of page class methods to delegate type properties in the user control. Click different buttons of user control, you will see MethodWithParam(string strParam) and MethodWithNoParam() methods called.

This is all we have to do to call page class methods from user control in ASP.Net.

Advertisements

Load ASP.Net User Control Dynamically Using jQuery

October 10, 2009 5 comments

Today we will explore the way of loading ASP.Net user control at run time using jQuery. jQuery has one method load(fn) that will help here. This load(fn) method has following definition.

load (url, data, callback): A GET request will be performed by default – but if any extra parameters are passed, then a POST will occur.
url (string): URL of the required page
data (map – key/value pair): key value pair data that will be sent to the server
callback (callback method): call back method, not necessarily success

Now comes custom HttpHandler that will load the required user control from the URL given by this load(fn) method. We all know that it is either in-built or custom HttpHandler that is the end point for any request made in ASP.Net.

Let’s see by example. In the ASP.Net application, add one aspx page and user control. Then, add one more class derived from IHttpHandler. The aspx html markup will look something like this.

<html xmlns=”http://www.w3.org/1999/xhtml&#8221; >
<head runat=”server”>
<title>Load ASP.Net User Control</title>
<script src=”jquery-1.2.6.js”></script>
<script>
$(document).ready(function() {
$(“#BtnLoadUserCtrl”).click(function() {
$(“#UserCtrl”).load(“SampleUserCtrl.ascx”);
});
});
</script>
</head>
<body>
<form runat=”server”>
<div>
<br />
<input value=”Load User Control” /> <br />
<div id=”UserCtrl”></div>
</div>
</form>
</body>
</html>

The code is quite readable. On the click event of BtnLoadUserCtrl button, SampleUserCtrl.ascx user control is being tried to load in the <div> element having id UserCtrl.

Then, write our custom Httphandler called jQueryHandler as below.

public class jQueryHandler:IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
// We add control in Page tree collection
using(var dummyPage = new Page())
{
dummyPage.Controls.Add(GetControl(context));
context.Server.Execute(dummyPage, context.Response.Output, true);
}
}

private Control GetControl(HttpContext context)
{
// URL path given by load(fn) method on click of button
string strPath = context.Request.Url.LocalPath;
UserControl userctrl = null;
using(var dummyPage = new Page())
{
userctrl = dummyPage.LoadControl(strPath) as UserControl;
}
// Loaded user control is returned
return userctrl;
}

public bool IsReusable
{
get { return true; }
}
}

Do not miss to add this HttpHandler in the web.config.

<httpHandlers>
<add verb=”*” path=”*.ascx” type=”JQUserControl.jQueryHandler, JQUserControl”/>
</httpHandlers>

This web.config configuration tells that jQueryHandler will process request for file type having .ascx extension and methods all (GET, POST, etc). The type attribute value is something like:
type=”Namespace.TypeName, Assembly name where Handler can be found”

Now we are ready to test our sample. Run the page, and see on the click of button, the sampleusertCtrl.ascx is loaded.

I hope we can now extend this concept to fit any such programming requirement in future.
Happy Coding!