Question

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

它看起来像这样：

<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上的none）实际上让我感到适合。

提前致谢

Answer 1

解决方案我刚发现：将LinkButton放在自己的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>

似乎没有任何代码隐藏的脚本注册

如何防止C＃重绘<div>我用jQuery显示</div>

1 个答案: