如何在 SimpleModal 的对话框中显示值？

Question

我的问题很简单。我有一个 asp.net 按钮。我可以用它来调用 simpleModal 并显示一个对话框。现在，我在对话框中添加了一个标签控件，并希望这个标签显示一些值。我该怎么办？

这是我的代码

$('#<%= btnOpen.ClientID %>').click(function(e) {
            e.preventDefault();

            $('#content').modal({
                onOpen: function(dialog) {
                    dialog.overlay.fadeIn('slow', function() {
                        dialog.data.hide();
                        dialog.container.fadeIn('slow', function() {
                            dialog.data.slideDown('slow');

                        });
                    });
                },
                onClose: function(dialog) {

                    dialog.data.fadeOut('slow', function() {
                        dialog.container.slideUp('slow', function() {
                            dialog.overlay.fadeOut('slow', function() {
                                $.modal.close(); // must call this!

                            });
                        });
                    });
                }

            });
            e.preventDefault();
            // return false;
        });
<asp:Button ID="btnOpen" runat="server" Text="ASP.NET Open"/>

<div id="content" style="display: none;">

    <asp:Label ID="Label1" runat="server" Text=""></asp:Label>

</div>

Answer 1

我假设既然您说您的问题很简单，那么您只是对 jQuery 不熟悉。您可以将其放入您的 click 函数或 $(document).ready 函数中，具体取决于您的全部要求：

var yourValue = ; // put your function or value here
$('#Label1').text(yourValue);

注意：如果您有带标签的字符串，则需要使用.html 而不是.text，但.text 更快。

Answer 2

大声笑，我又在回答我自己的问题，但我会感谢 mNVhr。

我终于搞定了整个事情。 asp.net 按钮触发回发以及 javascript 的回发的技巧是将 asp.net 按钮放入更新面板。这是我的代码

对于 javascript 部分：

<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>

<script src="js/jquery.simplemodal-1.3.5.js" type="text/javascript"></script>

<script type="text/javascript">

    function myOpen() {
        $('#content').modal({
            onOpen: function(dialog) {
                dialog.overlay.fadeIn('slow', function() {
                    dialog.data.hide();
                    dialog.container.fadeIn('slow', function() {
                        dialog.data.slideDown('slow');

                    });
                });
            },
            onClose: function(dialog) {

                dialog.data.fadeOut('slow', function() {
                    dialog.container.slideUp('slow', function() {
                        dialog.overlay.fadeOut('slow', function() {
                            $.modal.close(); 

                        });
                    });
                });
            }

        });


    }

    function myClose() {
        $.modal.close();


    }


</script>

对于 HTML 标记

<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
    <ContentTemplate>
        <asp:Button ID="btnOpen" runat="server" Text="Open" OnClick="btnOpen_Click" OnClientClick="myOpen();" />
    </ContentTemplate>
</asp:UpdatePanel>
<div id='content' style="display: none">
    <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="true">
        <ContentTemplate>
            <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
            <asp:Button ID="btnSave" runat="server" Text="Save" OnClick="btnSave_Click" />
            <input id="Button2" type="button" value="Close" onclick="myClose();" />
            <asp:Label ID="Label2" runat="server" Text=""></asp:Label>
        </ContentTemplate>
    </asp:UpdatePanel>
</div>

后面的代码：

 protected void Page_Load(object sender, EventArgs e)
{

}
private void CloseDialog()
{

    string script = string.Format(@"myClose()");
    ScriptManager.RegisterClientScriptBlock(this, typeof(Page), UniqueID, script, true);
}
protected void btnSave_Click(object sender, EventArgs e)
{
    if (TextBox1.Text == "1")
        CloseDialog();
    else
        Label2.Text = TextBox1.Text;

}
protected void btnOpen_Click(object sender, EventArgs e)
{
    TextBox1.Text = DateTime.Now.ToString();
    UpdatePanel1.Update();
}

我希望这个小代码可以帮助那些想在他们的项目中使用漂亮的 jQuery 的 asp.net 开发人员。

Answer 3

从上面的代码可以看出。

当我单击 btnOpen 按钮时，触发了两个回发。一个来自 asp.net 后面的代码，它将当前日期时间分配给模式对话框内的文本框控件。第二个回发来自打开模式对话框的 javascript。 asp.net 按钮必须在更新面板内。否则，模态对话框只会停留大约 0.5 秒。

当我单击模式对话框中的 btnSave 时。回发也发生了。我这里有点逻辑。当文本框的值为 1 时，我调用 closeDialog() 函数。当值为其他数字时，模态对话框保持打开状态，对话框内的标签控件将显示文本框中的数字。

jQuery 很好，但作为一个 .Net 开发者，它是新的，有时我很难理解它，尤其是 javascript 和 .net 之间的回发冲突。

我希望这个答案会有所帮助。