Как отобразить значение в диалоге SimpleModal? - PullRequest
Новая
       12

Как отобразить значение в диалоге SimpleModal?

1 голос
/ 10 июня 2010

мой вопрос действительно прост.У меня есть кнопка 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 ]

1 голос
/ 10 июня 2010

Лол, я снова отвечаю на свой вопрос, но буду благодарен mNVhr tho.

Я, наконец, заставил все это работать. Хитрость для кнопки 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();
}

Надеюсь, этот крошечный код поможет тем разработчикам asp.net, которые хотят использовать хороший jQuery в своих проектах.

1 голос
/ 10 июня 2010

Как видно из приведенных выше кодов.

Когда я нажимаю на кнопку btnOpen, запускаются два обратных запроса.Один из них - из кода asp.net, который назначает текущую дату и время элементу управления textbox внутри модального диалога.Второй постбэк от javascript, который открывает модальное диалоговое окно.Кнопка asp.net должна быть внутри панели обновления.В противном случае, модальное диалоговое окно останется на 0,5 секунды.

Когда я нажимаю btnSave внутри модального диалогового окна.Обратная передача также произошла.У меня есть немного логики здесь.Когда значение текстового поля равно 1, я вызываю функцию closeDialog ().Когда значением являются другие числа, модальное диалоговое окно остается открытым, и элемент управления меткой внутри диалогового окна будет отображать число из текстового поля.

jQuery - это хорошо, но как разработчик .Net он просто новыйи иногда мне трудно это понять, особенно из-за конфликта обратных ссылок между javascript и .net.

Надеюсь, этот ответ полезен.

1 голос
/ 10 июня 2010

Полагаю, поскольку вы сказали, что ваш вопрос прост, вы просто не знакомы с jQuery.Вы можете поместить это в вашу функцию click или в функцию $(document).ready, в зависимости от ваших полных требований: 

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

Примечание: вам нужно будет использовать .html вместо .textесли у вас есть строка с тегами, но .text быстрее.

...