Feb 20, 2012, 3:06 AM
[CLOSED] Managing events from a dynamically loaded UserControl
Hi there.
I am having troubles to achieve this: manage usercontrols events which are static (no generated in codebehind) but loaded dynamically.
I recreate the user control in the form (in the Page_Init event).
I am able to do that using the [AddToRecreation_Test] and the [js_putToCache] functions than I found in this forum.
No matter wich combination of properties I use (EnableViewstate=true, ViewStateMode=Enabled, both in ResourceManager, or controls, or Container; neither managing events as listeners or directevents, etc), can't achieve this.
As far now, my code can't preserve the checkbox state in postbacks and its event doesnt work properly.
Here is my example code:
Form html code:
I am having troubles to achieve this: manage usercontrols events which are static (no generated in codebehind) but loaded dynamically.
I recreate the user control in the form (in the Page_Init event).
I am able to do that using the [AddToRecreation_Test] and the [js_putToCache] functions than I found in this forum.
No matter wich combination of properties I use (EnableViewstate=true, ViewStateMode=Enabled, both in ResourceManager, or controls, or Container; neither managing events as listeners or directevents, etc), can't achieve this.
As far now, my code can't preserve the checkbox state in postbacks and its event doesnt work properly.
Here is my example code:
Form html code:
<%@ Page Title="" Language="VB" MasterPageFile="~/MasterPages/PrincipalExt.master" AutoEventWireup="false" CodeFile="TestUserControl.aspx.vb" Inherits="Modulo_Solicitude_TestUserControl" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="phBody" Runat="Server">
<ext:Button runat="server" ID="btnTest" Text="Push"></ext:Button>
<ext:Button runat="server" ID="btnDelete" Text="Delete"></ext:Button>
<ext:Container runat="server" ID="contContainer" EnableViewState="true"></ext:Container>
</asp:Content>
Form code-behind:Imports Ext.Net
Partial Class Modulo_Solicitude_TestUserControl
Inherits System.Web.UI.Page
Protected Sub Page_Init(sender As Object, e As System.EventArgs) Handles Me.Init
If Not Page.IsPostBack Then
Me.Session.Remove("Recreation_Test")
End If
Dim ids As System.Collections.Generic.List(Of String) = Me.Session("Recreation_Test")
If Not ids Is Nothing Then
For Each id As String In ids
ExtNet.Js.Call("js_destroyFromCache", New JRawValue(contContainer.ClientID))
Dim uc1 As BaseUserControl = CType(Me.LoadControl("~/UserControl/Test1.ascx"), BaseUserControl)
uc1.ID = id
Me.contContainer.ContentControls.Add(uc1)
ExtNet.Js.Call("js_putToCache", New JRawValue(contContainer.ClientID), uc1.ControlsToDestroy)
Me.contContainer.UpdateContent()
Next
End If
End Sub
Private Sub AddToRecreation_Test(ByVal sControlId As String)
Dim ids As System.Collections.Generic.List(Of String) = Me.Session("Recreation_Test")
If ids Is Nothing Then
ids = New System.Collections.Generic.List(Of String)
Me.Session("Recreation_Test") = ids
End If
ids.Add(sControlId)
End Sub
Private Sub RemoveFromRecreation_Test(ByVal sControlId As String)
Dim ids As System.Collections.Generic.List(Of String) = Me.Session("Recreation_Test")
'TODO: mandar llamar a la función que eliminará el contacto
'pero primero asegurarse si el ID es del tipo New o no
'---
If Not ids Is Nothing Then
ids.Remove(sControlId)
End If
End Sub
Protected Sub btnTest_DirectClick(sender As Object, e As Ext.Net.DirectEventArgs) Handles btnTest.DirectClick
ExtNet.Js.Call("js_destroyFromCache", New JRawValue(contContainer.ClientID))
Dim uc1 As BaseUserControl = CType(Me.LoadControl("~/UserControl/Test1.ascx"), BaseUserControl)
uc1.ID = "UC1"
Me.contContainer.ContentControls.Add(uc1)
ExtNet.Js.Call("js_putToCache", New JRawValue(contContainer.ClientID), uc1.ControlsToDestroy)
Me.contContainer.UpdateContent()
Me.btnTest.Disabled = True
Me.btnDelete.Disabled = False
Me.AddToRecreation_Test(uc1.ID)
End Sub
Protected Sub btnDelete_DirectClick(sender As Object, e As Ext.Net.DirectEventArgs) Handles btnDelete.DirectClick
ExtNet.Js.Call("js_destroyFromCache", New JRawValue(contContainer.ClientID))
Me.RemoveFromRecreation_Test("UC1")
Me.btnTest.Disabled = False
Me.btnDelete.Disabled = True
End Sub
Protected Sub Page_Load(sender As Object, e As System.EventArgs) Handles Me.Load
If Not IsPostBack Then
Me.btnTest.Disabled = False
Me.btnDelete.Disabled = True
End If
End Sub
End Class
Usercontrol html code:<%@ Control Language="VB" AutoEventWireup="false" CodeFile="Test1.ascx.vb" Inherits="UserControl_Test1" %>
<ext:Label ID="Label1" runat="server" Text="I am User control №1" />
<br />
<ext:Button ID="Button1" runat="server" Text="User control №1: Ext.Net button">
</ext:Button>
<ext:Checkbox runat="server" ID="chkBox" BoxLabel="Check here" >
<DirectEvents>
<Check ViewStateMode="Enabled" OnEvent="Func"></Check>
</DirectEvents>
</ext:Checkbox>
Usercontrol code-behind:Imports System.Collections.Generic
Imports Gravitar.Neptune.Util
Imports Ext.Net
Partial Class UserControl_Test1
Inherits BaseUserControl
Public Overrides ReadOnly Property ControlsToDestroy() As System.Collections.Generic.List(Of String)
Get
Dim oList As New System.Collections.Generic.List(Of String)
oList.Add(Me.chkBox.ClientID)
oList.Add(Me.Label1.ClientID)
oList.Add(Me.Button1.ClientID)
Return oList
End Get
End Property
<DirectMethod()> _
Public Sub Func()
Me.Button1.Disabled = True
End Sub
Protected Sub Button1_DirectClick(sender As Object, e As Ext.Net.DirectEventArgs) Handles Button1.DirectClick
ExtMessageBox.ShowAlert("Title", "Body", "Okas")
End Sub
Protected Sub Page_Load(sender As Object, e As System.EventArgs) Handles Me.Load
HttpContext.Current.Items("ExtNetParam_ReturnViewState") = True
End Sub
End Class
Masterpage code:<%@ Master Language="VB" CodeFile="PrincipalExt.master.vb" Inherits="MasterPages_PrincipalExt" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
<%--BEGIN - Estilos usados en ExtNet..................................................................... --%>
<link href="../Common/css/ExtNet/Images.css" rel="stylesheet" type="text/css" />
<link href="../Common/css/ExtNet/LiveSearch.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.x-menu.x-menu-horizontal .x-menu-list
{
overflow: hidden;
}
.x-menu.x-menu-horizontal .x-menu-list .x-menu-list-item
{
float: left;
}
.x-menu.x-menu-horizontal .x-menu-list .x-menu-list-item .x-menu-item-arrow
{
background: none;
}
</style>
<script type="text/javascript">
var sTemplateColor = 'color:{0};';
var sTemplateBold = 'font-weight:bold;';
var sTemplateSpan = '<span style="{0}{1}">{2}</span>';
var master_FormatStringSpan = function (sValue, bBold, sColor) {
var sBoldString = '';
var sColorString = '';
var sReturn = '';
if (bBold) {
sBoldString = sTemplateBold;
if (sColor != '')
sColorString = String.format(sTemplateColor, sColor);
}
else {
sColorString = String.format(sTemplateColor, 'gray');
}
sReturn = String.format(sTemplateSpan, sBoldString, sColorString, sValue);
return sReturn;
};
</script>
<script type="text/javascript">
var js_destroyFromCache = function (container) {
container.controlsCache = container.controlsCache || [];
Ext.each(container.controlsCache, function (controlId) {
var control = Ext.getCmp(controlId);
if (control && control.destroy) {
control.destroy();
}
});
};
var js_putToCache = function (container, controls) {
container.controlsCache = controls;
};
</script>
<%--END - Estilos usados en ExtNet..................................................................... --%>
</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" DirectMethodNamespace="CompanyX" />
<div id="divPrincipal" runat="server" class="contenedorPrincipal base">
<asp:ContentPlaceHolder ID="phBody" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
Thanks in advanced.
Last edited by Daniil; Feb 20, 2012 at 5:11 PM.
Reason: [CLOSED]