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

Question

我试图在引导程序的模式视图中显示数据，数据是从数据库中检索的。问题是它显示了数据，但只有几分之一秒，页面会自动刷新。 这是我的 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

您可以通过添加 return false

来停止刷新或提交

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

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

否则你可以使用 ajax。

Answer 3

我有同样的问题。使用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 4

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

第二个原因是你使用了一个带有空白href的锚。我认为这发生在你身上。

为了解决这个问题，我们可以使用：

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

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

Answer 5

如下使用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 并分配一个点击事件，再次使用脚本管理器将模态框从true 更改为show:false。

编辑

我误解了你的问题。如果想在modal内部按下按钮时阻止modal关闭，例如提交modal等，可以使用上述方案。

但是，如果您想在回发后打开模态框，您只需将 scriptmanager 行添加到链接按钮单击事件即可。无需在模式中添加更新面板。