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

Posted 2023-03-05

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

【英文标题】：how do i stop refreshing page in bootstrap modal with asp.net button click

【发布时间】：2016-12-26 04:14:40

【问题描述】：

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

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

【问题讨论】：

您可以尝试使用简单按钮或其他元素而不是链接按钮吗？

是的，我也试过了。

【参考方案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>

【讨论】：

对不起，我忘了添加 retutn false 现在尝试更改 aswer 中提到的代码

这样做并没有重新加载页面，但是需要绑定的数据根本没有显示出来。

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

对不起@jekin，我已经尝试过了，但不起作用，实际上数据确实是在第二次点击时出现的，而不是在第一次点击时

***.com/questions/15410232/… 可能对你有帮助

【参考方案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

请阅读编辑重播@Roal.A 如果问题仍未解决，请在此处评论确切的问题。

【参考方案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)  
   )
 

【参考方案4】：

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

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

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

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

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

【讨论】：

你在哪里触发 ShowUserPass_Click.cs？

【参考方案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 行添加到链接按钮单击事件即可。无需在模式中添加更新面板。

【讨论】：

你能不能给我代码，我已经按照大家的建议放了return false语句这样做，页面不刷新它可以工作，但数据不绑定它显示为空。跨度>

按照其他人的建议删除您在页面中使用的任何脚本，并同时删除您的脚本（onClientClick 事件）。将 c# 代码替换为上述代码（点击事件），其中包含在回发后将打开模式的脚本。

thnx，数据已检索，但即使在刷新按钮上，模式也会继续弹出。

是的，按 F5 按钮将重新加载模式，因为页面是从服务器回发的。

那么，我该如何预防呢？我试过AutoPostBack=false，但刷新时弹出模式