Question

我试图在bootstrap的模态视图中显示数据，从数据库中检索数据。问题是它显示数据，但只有几分之一秒，页面会自动刷新。这是我的HTML

<div class="col-md-4" style="margin-left: 5px;">
 <br />
 Invoice #<asp:TextBox ID="txt_Invoiceno" runat="server"></asp:TextBox><br />
 <asp:LinkButton ID="lnk_showInvoice" runat="server" OnClick="ShowUserPass_Click" OnClientClick="showModel()">Show Last Five Invoices</asp:LinkButton>
 </div>
<div class="modal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Last five invoices </h4>
            </div>
            <div class="modal-body">
               <asp:GridView runat="server" ID="gvInvoices"></asp:GridView>
            </div>
        </div>
        <div class="modal-footer">
        </div>
    </div>
</div>

这是我的.cs文件

protected void ShowUserPass_Click(object sender, EventArgs e)
{
    SQLHelper objSql = new SQLHelper();
    objSql.SqlText = "select FirstName,LastName,Email from tblUserDetail";
    DataTable dt = objSql.getDataTable(false);
    gvInvoices.DataSource = dt;
    gvInvoices.DataBind();
    objSql.Close();
    objSql.Dispose();

}

jquery的：

 <script>
    function showModel() {
        $('.modal').modal();
    }

</script>

所以我的问题是，如何自动停止页面刷新？

Answer 1

通过更改ASP代码和脚本来尝试以下代码

<asp:LinkButton ID="lnk_showInvoice" runat="server" OnClick="ShowUserPass_Click" OnClientClick="showModel(); return false">Show Last Five Invoices</asp:LinkButton>


    <script>
        function showModel() {
            $('.modal').modal();

        }

    </script>

Answer 2

我有同样的问题。使用ajax解决了

html

 <a OnClick="showModel()" >Show Last Five Invoices</a>

Jquery的

   function showModel() {
   $('.modal').modal();


    $.ajax({
    type: "POST",
    url: "filename.aspx/ShowUserPass_Click",
    data: "{}",
    contentType: "application/json; charset=utf-8",
    datatype: "jsondata",
    async: "true",
    success: function (t) {
         //set value to gridview or use normal table
    },
    error: function (t) { }
   })
 }

Answer 3

当您使用输入类型提交但是在这种情况下无效时会发生此类问题。

第二个原因是您正在使用其中包含空白href的锚点。而且我认为这种情况正在发生。

为克服这个问题，我们可以使用：

<a href="javascript:void(0)" id="..." class="...">Link</a>

这不会重定向或刷新页面，就像按钮一样。

Answer 4

使用UpdatePanel，如下所示：

<div class="modal fade" tabindex="-1" role="dialog" id="mdlShowUserPass">
    <div class="modal-dialog" role="document">
        <asp:UpdatePanel runat="server">
            <ContentTemplate>
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title">Modal title</h4>
                    </div>
                    <div class="modal-body">
                        Your Content. Ex form
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <asp:Button ID="btnUpdate" runat="server" Text="Update" />
                    </div>
                </div>
                <!-- /.modal-content -->
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

使用UpdatePanel控件环绕“modal-content”类。你也可以使用如下脚本管理器从后面的代码中打开模态。

protected void ShowUserPass_Click(object sender, EventArgs e)
{
    SQLHelper objSql = new SQLHelper();
    objSql.SqlText = "select FirstName,LastName,Email from tblUserDetail";
    DataTable dt = objSql.getDataTable(false);
    gvInvoices.DataSource = dt;
    gvInvoices.DataBind();
    objSql.Close();
    objSql.Dispose();
    ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "", "<script>$(function () {$('#mdlShowUserPass').modal({show:true,keyboard: false, backdrop: 'static'});});</script>", false); 
    // note the #mdlShowUserPass id which assigned to the modal
}

如果您希望从服务器端关闭模态，请添加LinkButton并指定单击事件，再次使用scriptmanager通过从true更改为show:false来隐藏模态。

修改

我很想念你的问题。如果你想在按下模态内的按钮时阻止模态关闭，例如，提交模态等，你可以使用上述解决方案。

但是，如果要在回发后打开模式，只需将scriptmanager行添加到linkbutton click事件即可。无需将updatepanel添加到模态。

Answer 5

您可以通过添加 return false

来停止刷新或提交

<asp:LinkButton ID="lnk_showInvoice" runat="server" OnClick="ShowUserPass_Click" OnClientClick="showModel();return false;">Show Last Five Invoices</asp:LinkButton>

你可以像这样添加，这应该可以解决你的问题。

否则你可以使用ajax。

如何使用asp.net按钮单击停止在bootstrap模式中刷新页面

5 个答案:

修改