Bootstrap Modal - Добавить серверный код ASP.Net

Question

Bootstrap Modal - Добавить серверный код ASP.Net

1

Чистое веб-приложение, реализующее Bootstrap. В настоящее время у меня есть метка и текстовое поле, отображаемое в Bootstrap - Modal, к которому я пытаюсь отправить данные из файла С# сервера. По какой-то причине модаль исчезает и ничего не показывает в пользовательском интерфейсе.

ASPX файл

<!-- Button to trigger modal -->
<a href="#myModal" role="button" runat="server" class="btn btn-lg btn-success" data-toggle="modal">Launch demo modal</a>
<%--<asp:Button ID="Button1" role="button" type="button" runat="server" Text="Modal" class="btn btn-lg btn-success"  data-toggle="modal" data-target="#myModal"/>--%>

<!-- Modal -->
<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h3 id="myModalLabel">Modal header</h3>
            </div>
            <div class="modal-body">

                <asp:Label ID="Label1" runat="server"></asp:Label>
                <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
            </div>
            <div class="modal-footer">
                <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Close</button>
                <button class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

С# файл

protected void Click_Me(object sender, EventArgs e)
{
    Label1.Text = "test label";
    TextBox1.Text = "text box text";

    modal_Img.Src = "test path";
}

Пожалуйста посоветуй

ps: мне нужно использовать панель обновления?

Vivek akk 03 нояб. 2014, в 16:32

Источник

Теги:

c#

asp.net

twitter-bootstrap-3

c#-4.0

1 ответ

Ещё вопросы

Cody Hicks · Accepted Answer · 2014-11-03T14-10-00.000Z

0

Лучший ответ

Панель обновления, вероятно, не будет лучшим решением для этого, потому что обновляется только частичное количество html, и Javascript/JQuery для модальности не вызывается снова после частичной обратной передачи.

Вам нужно каким-то образом снова вызвать Javascript после обратной передачи. Вы можете вызвать Javascript, необходимый для открытия модального события Click_Me.

    protected void Click_Me(object sender, EventArgs e)
    {
      // do stuff
      Label1.Text = "test label";
      TextBox1.Text = "text box text";
      modal_Img.Src = "test path";

      // make sure the modal opens
      ScriptManager.RegisterClientScriptBlock(this.Page, this.Page.GetType(), "script", "<script type='text/javascript'>$( document ).ready(function() { $('#MyModal').modal('show')});</script>", false);
    }

Cody Hicks 03 нояб. 2014, в 14:10

0

Мой ответ предполагает, что вы вызываете событие Click_Me с кнопки внутри модального окна. В противном случае функциональность по умолчанию для модального окна заключается в закрытии, когда вы щелкаете за его пределами. В любом случае вам понадобится способ открыть резервную копию и отобразить ваши обновления после постбэка.
Cody Hicks 03 нояб. 2014, в 16:39
0

Привет Итак, я изменил код, как показано ниже - добавил кнопку - <asp: Button ID = "Button5" role = "button" OnClick = "Click_Me" runat = "server" Text = "Modal" class = "btn btn-lg btn -success "data-toggle =" modal "data-target =" # myModal "/>, а затем добавил ниже в c # ScriptManager.RegisterClientScriptBlock (this.Page, this.Page.GetType ()," script "," <script type = 'text / javascript'> $ (document) .ready (function () {$ ('# MyModal'). modal ('show')}); </ script> ", false); - но я не вижу модального появления - ??? Я что-то здесь упускаю?
Vivek akk 03 нояб. 2014, в 17:13
0

@ Vivek akk Это сработало для вас? Трудно сказать, что data-toggle и data-target будут работать во время обратной передачи asp.net, но добавление кода ScriptManager существу добавит javascript, необходимый для открытия или повторного открытия модального режима при перезагрузке вашей страницы.
Cody Hicks 03 нояб. 2014, в 17:21
0

Это не сработало, чувак - я удалил триггер <a> и удалил комментарий к кнопке, к которой я добавил событие onclick. Затем я добавил код вызова, как предложено вами в C #. Кажется, все еще не работает. Мне нужно сделать что-нибудь еще?
Vivek akk 03 нояб. 2014, в 17:31
0

Чувак, я добавил панель обновления и менеджер скриптов. Теперь он работает, но проблема в том, что модал появляется дважды один раз до и после запуска логики сервера.
Vivek akk 03 нояб. 2014, в 17:42
0

@ Vivek akk попробуйте удалить либо логику сервера ( ScriptManager ), либо вызов кнопки «self» ... ( data-toggle и data-target ). Кажется, теперь он вызывается дважды, как на стороне клиента, так и на стороне сервера.
Cody Hicks 03 нояб. 2014, в 17:45
0

Я проверил ваш код без панели обновления, и это сработало. Я создал тег кнопки как таковой ... <asp:Button ID="Button5" role="button" OnClick="Click_Me" runat="server" Text="Modal" class="btn btn-lg btn-success"/> и событие закодировано в моем ответе
Cody Hicks 03 нояб. 2014, в 17:51
0

Спасибо, чувак, теперь он рендерится только один раз, но есть еще одна проблема. Как только страница загружается - при первом нажатии кнопки она ничего не делает, но когда я нажимаю снова, она загружает модальный режим и отлично работает при последующих щелчках. Только при первой загрузке мне нужно дважды нажать кнопку, чтобы она заработала. есть идеи ? ценим ваше время.
Vivek akk 03 нояб. 2014, в 17:52
0

неважно, чувак, это работает, когда я удаляю data-toggle и data-target
Vivek akk 03 нояб. 2014, в 17:54
0

@ Vivek akk Отлично. Рад, что смог помочь. Я только недавно закончил проект, который использовал WebForms и реализовал Bootstrap. Я столкнулся с похожими проблемами. С блоком сценария выше, вы можете внедрить Javascript со стороны сервера, когда он игнорируется на стороне клиента. Иногда WebForms не очень хорошо работают с тяжелыми сценариями на стороне клиента из-за обратных передач.
Cody Hicks 03 нояб. 2014, в 17:59

Показать ещё 8 комментариев