在UpdatePanel中回发后取消绑定
Knockout binding after postback in UpdatePanel
我有一个带有表的页面,在UpdatePanel中绑定了Knockout。我的目标是在回发后成功应用绑定。在初始页面加载时,一切都按预期进行,因此模型正在运行。
我使用pageLoad()调用一个函数,该函数从服务器端设置的HiddenField获取模型的JSON数据。在视图中,我将每个RadioButton的单击数据绑定设置为ViewModel之外的JS函数,该函数将隐藏输入字段的值设置为按钮指定的ID,然后通过在客户端单击隐藏按钮来导致服务器回发。
在pageLoad()中,我使用Sys.WebForms.PageRequestManager.getInstance().add_endRequest来指定应在回发的服务器端完成后调用绑定助手函数。
我的问题:
在服务器端设置之后,具有JSON数据的HiddenField在返回客户端时仍然具有与客户端相同的字符串,即使在执行服务器端scriptlet时,我也可以看到值更新正确。不确定这里发生了什么。
即使值没有更新,BindingHelp()也会被调用,尽管由于某种原因,在已经发生一次回发后,单击RadioButtons不再会导致事件。
任何对此的见解都将不胜感激!
代码:
<script type="text/javascript">
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(BindingHelper)
function pageLoad() {
if (!isPostBack()){
BindingHelper();
}
}
function BindingHelper() {
var data = <%= hfData.Value%>;
var model = new DataViewModel();
model.load(data);
ko.applyBindings(model);
}
function Select(id) {
document.getElementById('<%=hfSelectedID.ClientID%>').value = id;
document.getElementById('<%=rbSelect.ClientID%>').click();
}
function isPostBack() {
return document.getElementById('hfPostback').value == 'True';
}
</script>
HTML:
<table id="tblData">
<thead>
<tr>
<th></th>
<!-- ko foreach: subViewModel -->
<th><input type="radio" name="rbGroup" data-bind="value: id, checked: $root.selectedID, click: function() {Select(id);}" /><span data-bind="text: name"></span></th>
<!-- /ko -->
</tr>
</thead>
</table>
<asp:HiddenField ID="hfData" runat="server" />
<asp:HiddenField ID="hfSelectedID" runat="server" />
<input id="hfPostback" type="hidden" value="<%=Page.IsPostBack.ToString()%>" />
<div style="display:none">
<asp:RadioButton ID="rbSelect" runat ="server" AutoPostBack="true" />
</div>
编辑:我已经确定,如果绑定不在UpdatePanel中,只需在Page_Load中将BindingHelp()注册为启动脚本,就可以实现这一点。
奇怪的是,即使我通过指定UpdatePanel来注册启动脚本,结果也是一样的。UpdatePanel中还有其他控件,所以我知道UpdatePanel实际上正在更新,并且没有设置为有条件更新。
我解决了这个问题。我最终需要在DOM中找到HiddenField,然后从中解析JSON以获得模型的数据。我觉得奇怪的是,即使在服务器端设置了值之后,它仍然保留了旧值,但UpdatePanel使生命周期变得复杂。
此外,我还将客户端单击的RadioButton更改为LinkButton,使其始终强制回发到服务器。
- 如何销毁/删除/取消绑定SnapSVG.js
- 取消绑定主干视图事件
- 从父元素取消绑定滚动事件并绑定到子元素
- 使用Re-base时,在React中从状态绑定和取消绑定Firebase
- javascript onchange取消绑定错误|未定义
- 在javascript中取消绑定侦听器
- 在偶数侦听器块中绑定和取消绑定
- 取消绑定angular中的scope属性
- 根据文件类型取消绑定和重新绑定click事件处理程序
- 取消绑定而不是重新绑定
- 取消绑定/绑定单击jquery selectbox插件
- 取消绑定后未提交的表单
- 动态取消绑定eventListeners(垃圾收集)
- 取消绑定父节点和子节点
- 取消绑定由加载jQuery'的外部脚本添加的事件;s的getScript函数
- 正在取消绑定jQuery事件处理程序
- 取消绑定除特定命名空间之外的所有命名空间中的事件
- 删除和取消绑定主干中的子视图
- 取消绑定窗口.onbeforeunload()取消
- setTimeout vs. 事件绑定/取消绑定;什么更有效