Bootstrap模式如何执行远程模态按钮以触发代码

时间:2015-12-24 16:07:48

标签: javascript c# jquery asp.net twitter-bootstrap

我是jquery和bootstrap C#的新手,我想要做的是我有两个页面default.aspx和popup.aspx,我使用bootstrap模式远程调用popup.aspx作为模态。我试图从popup.aspx页面上的asp控件中选择所有选择并操作它并希望将值返回到隐藏字段。然后default.aspx可以根据隐藏字段中的值显示结果。

我在模态上有一个带有onclick事件的asp按钮,但该事件并没有触发后面的代码。

只要我没有放入data-dismiss =“modal”或UseSubmitBehavior =“false”,我就可以触发该事件,但它会将default.aspx重定向到popup.aspx

如果我将其中一个或两个属性放入其中,则不会触发后面popup.cs代码中的事件

来自default.aspx的

代码

<form id="form1" runat="server">
    <asp:TextBox ID="txtText" runat="server"></asp:TextBox>
    <asp:TextBox ID="txtText2" runat="server"></asp:TextBox>
    <a data-toggle="modal" class="btn btn-info" href="popup.aspx" data-target="#myModal">Click me !</a>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog"  aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
    </div> <!-- /.modal-content -->
</div> <!-- /.modal-dialog -->
</div> <!-- /.modal -->

</form>

在default.aspx上的jquery

<script>
     $('#myModal').on('hidden.bs.modal', function (event) {
         $('#txtText').val($("#lblLabel").val());
         $(this).find('#popup')[0].reset();
     });
   </script>
来自popup.aspx的

代码

<form id="popup" runat="server">
<div>

        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
             <h4 class="modal-title">Modal title</h4>
        </div>          <!-- /modal-header -->
        <div class="modal-body">
            <asp:TextBox ID="txtBox" runat="server"></asp:TextBox>



        <p>Excitavit hic ardor milites per municipia plurima, quae isdem conterminant, dispositos et castella, sed quisque serpentes latius pro viribus repellere moliens, nunc globis confertos, aliquotiens et dispersos multitudine superabatur ingenti.</p>
        </div>          <!-- /modal-body -->
        <div class="modal-footer">

            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <asp:Button ID="btnButton" runat="server"  Text="Button" OnClick="btnButton_Click" data-dismiss="modal" CssClass="btn btn-primary"/>

        </div>          <!-- /modal-footer -->


</div>
</form>

那么这有什么办法可行吗?

1 个答案:

答案 0 :(得分:0)

经过大量研究,我已经解决了这个问题。经过几个小时的研究,我发现为了从远程页面模态调用该方法,有四件事需要。

  1. 所需的任何方法都必须是静态的。
  2. 必须将所需的远程页面控件中的任何值作为参数传递给该方法。
  3. 静态方法必须声明为[System.Web.UI.WebMethod]。
  4. 使用ajax方法调用方法。
  5. 我不确定这是否是正确的方法,但它适用于我需要做的事情。我希望如果他们的网站/应用程序需要这种类型的要求,这可能会帮助其他人。