0

场景：我有一个模态样式的 div，当用户单击按钮时将显示该 div。在显示 div 的时候，我需要从后端获取一些数据来填写一些字段。此外，我想对所有模态窗口使用 jQuery 方法（模态 div 中的淡入淡出，显示背景 div 以及启用 ESC 键或“单击关闭”以关闭模态）。

它看起来像这样：

<asp:ScriptManager ID="sc" runat="server" />
<asp:UpdatePanel ID="updForm" runat="server">
    <ContentTemplate>
        <h4>Testing jQuery calls combined with code behind actions</h4>
        <div class="pad-content">
        <asp:LinkButton ID="lnkShowIt" runat="server" OnClick="lnkShowIt_Click" Text="Load Form" OnClientClick="showForm()" />
        <asp:Panel ID="pnlPopup" ClientIDMode="Static" runat="server" CssClass="box-modal" style="width:500px;display:none;z-index:1001">
            <div class="header">Edit Estimate <a href="javascript: disablePopup()" class="button">X</a></div>
            <div class="content">
                <div class="window">
                    <h5>Test Form</h5>
                    <asp:TextBox ID="tbxTime" runat="server" />
                    <br />
                    <asp:TextBox ID="tbxText" runat="server" Width="150px" />
                    <br />
                    <asp:LinkButton ID="lnkValidate" runat="server" CssClass="link-button-blue" Text="Validate" OnClick="lnkValidate_Click" />
                </div>
            </div>
        </asp:Panel>
            </div>
    </ContentTemplate>
</asp:UpdatePanel>
<div id="backgroundPopup"></div>

所以... lnkShowIt 调用 jQuery（将显示 pnlPopup）和 C#（将填充 tbxTime）。

jQuery 方法实际上只是从我拥有的一个通用 js 库中调用另一个方法来处理模态窗口的内容 - 我认为实际代码不是问题，但这里是用于此页面的简单函数：

<script type="text/javascript" language="javascript">
    function showForm() {
        loadPopup('#pnlPopup');
    }

</script>

方法背后的代码如下所示： protected void lnkShowIt_Click(object sender, EventArgs e) { tbxTime.Text = System.DateTime.Now.Second.ToString(); }

    protected void lnkValidate_Click(object sender, EventArgs e)
    {
        if (tbxTime.Text == tbxText.Text)
        {
            Response.Redirect("DynamicBoxesWithJQuery.aspx?mode=success");
        }
        else
        {
            tbxText.Style["border"] = "1px solid red";
        }
    }

通过执行以下操作，我可以取得一定程度的成功，但这似乎只是一个重大的黑客攻击，我不得不假设有更好的方法：

protected void lnkShowIt_Click(object sender, EventArgs e)
    {
        tbxTime.Text = System.DateTime.Now.Second.ToString();
        ScriptManager.RegisterStartupScript(this, this.GetType(), "OpenEditor", "<script type='text/javascript'>loadPopup('#pnlPopup');</script>", false);
    }

    protected void lnkValidate_Click(object sender, EventArgs e)
    {
        if (tbxTime.Text == tbxText.Text)
        {
            Response.Redirect("DynamicBoxesWithJQuery.aspx?mode=success");
        }
        else
        {
            tbxText.Style["border"] = "1px solid red";
            ScriptManager.RegisterStartupScript(this, this.GetType(), "OpenEditor", "<script type='text/javascript'>loadPopup('#pnlPopup');</script>", false);
        }
    }

看起来它应该比这更容易，但是 UpdatePanel 不断重绘（并因此重置 pnlPopup 上的 display:none）的方式确实让我感到不适。

提前致谢

4

1 回答 1

1

我刚刚找到的解决方案：将 LinkBut​​ton 放在它自己的 UpdatePanel 中，然后将表单放在它自己的 UpdatePanel 中，并确保作为实际弹出框的 div 根本不在 UpdatePanel 中。

<h4>Testing jQuery calls combined with code behind actions</h4>
<div class="pad-content">
    <asp:UpdatePanel ID="updLink" runat="server">
        <ContentTemplate>
            <asp:LinkButton ID="lnkShowIt" runat="server" OnClick="lnkShowIt_Click" Text="Load Form" OnClientClick="showForm()" />
        </ContentTemplate>
    </asp:UpdatePanel>
    <asp:Panel ID="pnlPopup" ClientIDMode="Static" runat="server" CssClass="box-modal" style="width:500px;display:none;z-index:1001">
        <div class="header">Edit Estimate <a href="javascript: disablePopup()" class="button">X</a></div>
        <div class="content">
            <asp:UpdatePanel ID="updForm" runat="server">
                <ContentTemplate>
                <div class="window"style="min-width:500px;">
                    <h5>Here is a Test Form</h5>
                    <label>Time:</label>
                    <asp:TextBox ID="tbxTime" runat="server" />
                    <br />
                    <asp:Label ID="lblText" AssociatedControlID="tbxText" runat="server" ViewStateMode="Disabled">Text:</asp:Label>
                    <asp:TextBox ID="tbxText" runat="server" Width="150px" />
                    <br />
                    <asp:LinkButton ID="lnkValidate" runat="server" CssClass="link-button-blue" Text="Validate" OnClick="lnkValidate_Click" />
                </div>
                </ContentTemplate>
            </asp:UpdatePanel>
        </div>
    </asp:Panel>
</div>

似乎没有任何来自代码隐藏的脚本寄存器就可以解决问题

于 2013-10-31T19:51:17.413 回答