I have a basic page that has a user control that is implementing IScriptControl interface. The problem is the alert works fine when I change th textbox on the page load. But after I do a partial postback, it stops working. I am trying to understand why the handler is getting unhooked. I understand that Initialize on the client control is only called when the page first loads up. But what needs to be done here to fix the issue. I see that the dropdown control is rerendered by the PageRequestManager, but what would be the best way to addhandler again?
Page
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TestPartialPostback.aspx.cs" Inherits="WebApplication1.TestPartialPostback" %>
<%@ Register Src="~/ScriptUserControl.ascx" TagName="ScriptUserControl" TagPrefix="custom" %>
<!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>
</head>
<body>
<form id="form1" runat="server">
<ajaxToolkit:ToolkitScriptManager ID="smMaster" runat="server" LoadScriptsBeforeUI="True" EnableScriptLocalization="False" EnableHistory="True" ScriptMode=Debug>
<Scripts>
<asp:ScriptReference Path="~/script.js" />
</Scripts>
</ajaxToolkit:ToolkitScriptManager>
<div>
<asp:UpdatePanel ID="upMain" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<custom:ScriptUserControl ID="ucSUC" runat=server />
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TestPartialPostback.aspx.cs" Inherits="WebApplication1.TestPartialPostback" %>
<%@ Register Src="~/ScriptUserControl.ascx" TagName="ScriptUserControl" TagPrefix="custom" %>
<!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>
</head>
<body>
<form id="form1" runat="server">
<ajaxToolkit:ToolkitScriptManager ID="smMaster" runat="server" LoadScriptsBeforeUI="True" EnableScriptLocalization="False" EnableHistory="True" ScriptMode=Debug>
<Scripts>
<asp:ScriptReference Path="~/script.js" />
</Scripts>
</ajaxToolkit:ToolkitScriptManager>
<div>
<asp:UpdatePanel ID="upMain" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<custom:ScriptUserControl ID="ucSUC" runat=server />
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
Page Codebehind
namespace WebApplication1
{
public partial class TestPartialPostback : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
}
}
UserControl
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="ScriptUserControl.ascx.cs" Inherits="WebApplication1.ScriptUserControl" %>
<asp:Panel ID="pnlPaymentInstrument" runat="server" Width="100%">
<asp:UpdatePanel ID="upPaymentInstrumentTypes" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:DropDownList ID="ddlCreditCardTypes" runat="server" >
<asp:ListItem Text="Visa" Value="0"></asp:ListItem>
<asp:ListItem Text="discover" Value="1"></asp:ListItem>
</asp:DropDownList>
<asp:Button ID="test" runat=server Text="button" />
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
User Control Codebehind
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace WebApplication1
{
public partial class ScriptUserControl : System.Web.UI.UserControl, IScriptControl
{
protected void Page_Load(object sender, EventArgs e)
{ }
protected override void OnPreRender(EventArgs e)
{
base.OnPreRender(e);
ScriptManager manager = ScriptManager.GetCurrent(this.Page);
if (manager != null)
{
manager.RegisterScriptControl(this);
}
else
{
throw new InvalidOperationException("A ScriptManager");
}
}
protected override void Render(HtmlTextWriter writer)
{
base.Render(writer);
ScriptManager.GetCurrent(this.Page).RegisterScriptDescriptors(this);
}
#region IScriptControl Members
public IEnumerable<ScriptDescriptor> GetScriptDescriptors()
{
ScriptControlDescriptor descriptor = new ScriptControlDescriptor("Test.Instrument", pnl.ClientID);
descriptor.AddElementProperty(ddlCreditCardTypes.ID, ddlCreditCardTypes.ClientID);
yield return descriptor;
}
public IEnumerable<ScriptReference> GetScriptReferences()
{
return null;
}
#endregion
}
}
JS Control Component
//SubscriberPaymentInstrumentControl
Type.registerNamespace("Test");
Test.Instrument = function(element) {
Test.Instrument.initializeBase(this, [element]);
this._ddlCreditCardTypes = null;
}
Test.Instrument.prototype =
{
initialize: function() {
Test.Instrument.callBaseMethod(this, 'initialize');
$addHandlers(this._ddlCreditCardTypes, { change: this._creditCardTypeChanged }, this);
alert("initialized");
},
dispose: function() {
$clearHandlers(this._ddlCreditCardTypes);
Test.Instrument.callBaseMethod(this, 'dispose');
alert("disposed");
},
_creditCardTypeChanged: function() {
alert("changed");
},
set_ddlCreditCardTypes: function(value) {
this._ddlCreditCardTypes = value;
},
get_ddlCreditCardTypes: function() {
return this._ddlCreditCardTypes;
}
};
Test.Instrument.registerClass('Test.Instrument', Sys.UI.Control);
function GetDDlSelectedValue(ddl) {
return ddl.options[ddl.selectedIndex].value;
}