如何在SimpleModal对话框中显示值?

时间:2010-06-09 23:12:29

标签: asp.net jquery simplemodal

我的问题非常简单。我有一个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>

3 个答案:

答案 0 :(得分:1)

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

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

注意:如果您的字符串中包含标记,则需要使用.html代替.text,但.text更快。

答案 1 :(得分:1)

大声笑,我再次回答了我自己的问题,但我会赞美你的观点。

我终于完成了整个工作。 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开发人员。

答案 2 :(得分:1)

如您所见,从以上代码中可以看出。

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

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

jQuery很不错,但作为一个.Net开发人员,它只是新的,有时我很难理解它,特别是对于javascript和.net之间的回发冲突。

我希望这个答案很有帮助。