在UpdatePanel中回发后取消绑定

Knockout binding after postback in UpdatePanel

本文关键字:取消 绑定 UpdatePanel      更新时间:2023-09-26

我有一个带有表的页面,在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,使其始终强制回发到服务器。