如何在ASP.NET按钮点击时停止Bootstrap模态框中页面的刷新

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>

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

- AST

---

请尝试使用简单按钮或其他元素，而不是链接按钮，可以吗？ - Jekin Kalariya

是的，我也试过那个。 - AST

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>

- Jekin Kalariya

---

抱歉，我忘记添加“return false”了。现在请尝试按照答案中所述更改代码。 - Jekin Kalariya

它并没有通过这些重新加载页面，但需要绑定的数据根本没有显示出来。 - AST

尝试在我的代码中添加autopostback="false"并删除return语句，只需调用OnClientClick="showModel()"。 - Jekin Kalariya

抱歉 @jekin，我已经尝试过了，但不起作用，实际上数据在第二次点击时确实会出现，但第一次点击时不会。 - AST

这个网页链接 https://dev59.com/WGUp5IYBdhLWcg3wPFz_ 可能会对你有所帮助。 - Jekin Kalariya

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。

- sherin.k

---

你能详细说明一下吗？@sherin.k - AST

如果问题仍未解决，请在此处评论确切的问题。请阅读编辑后的回复@Roal.A。 - sherin.k

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) { }
   })
 }

- User

Answer 4

当你使用input type submit时会出现这样的问题，但在这种情况下是无效的。

第二个原因是你正在使用一个带有空href的锚点。我认为这正是你遇到的问题。

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

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

这不会重定向或刷新页面，只是像按钮一样起作用。

- Mayank Pandeyz

---

你通过什么方式触发 ShowUserPass_Click.cs？ - AST

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 -->

将 'modal-content' 类用 UpdatePanel 控件包围起来。您也可以使用 scriptmanager 在代码后台打开模态框，如下所示。

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

编辑

我误解了你的问题。如果您想要防止在模态框内按下按钮（例如，提交模态框等）时关闭模态框，您可以使用上述解决方案。

但是，如果您想在postback后打开模态框，您只需将scriptmanager行添加到linkbutton的单击事件中。无需将updatepanel添加到模态框中。

- Ravimallya

---

请问您能否提供给我代码？我已经按照大家的建议加入了"return false"语句，这样做可以避免页面刷新，但是数据没有绑定，显示为空。 - AST

根据他人建议，删除页面中使用的任何脚本和你自己的脚本（onClientClick事件）。将C＃代码替换为上述代码（单击事件），其中包含在回传后将打开模态的脚本。 - Ravimallya

谢谢，数据已经被检索出来了，但是模态框即使在刷新按钮上也一直弹出。 - AST

是的，按下 F5 按钮将重新加载模态框，因为页面从服务器进行了回发。 - Ravimallya

那么，我该如何防止它呢？我已经尝试了 AutoPostBack=false，但模态框在刷新时仍然弹出。 - AST