时间戳

首页 > 解决方案 > 在服务器端提交消息后关闭模态弹出窗口

javascript - 在服务器端提交消息后关闭模态弹出窗口

问题描述

我有一个bootstrap modal pop up. 里面有很多控件和提交按钮。因此，在成功提交后，我想关闭该弹出窗口。下面是将消息显示为的代码Record Saved successfully。

if (strMessage == "Success" && strSaveSubmit == "Draft")
            {
                ClientScript.RegisterStartupScript(Page.GetType(), "erroralert", "alert('Record Saved as Draft Successfully');", true);                    
            }

但是有了这个，我想关闭我无法关闭的模式弹出窗口。这是那个div

<div class="modals">

        <form id="frmFileUpload" runat="server">
            <div class="col-sm-6">
                <asp:HiddenField ID="hdnFileInfo" runat="server" />
                <asp:HiddenField ID="hdnClose" runat="server" />
                <label>Sap ID</label>
                <asp:Label ID="lblSapId" Text="" runat="server" />
            </div>

            <div class="col-sm-6">
                <label>Candidate ID</label>
                <asp:Label ID="lblCandidateId" Text="" runat="server" />
            </div>

            <div class="col-sm-6">
                <label>Technical Feasible</label>
                <div class="selectWraper">
                    <asp:DropDownList ID="ddlTechFeasible" runat="server">
                        <asp:ListItem Text="Select" Value="Select" />
                        <asp:ListItem Text="YES" Value="YES" />
                        <asp:ListItem Text="NO" Value="NO" />
                    </asp:DropDownList>
                </div>
            </div>

            <div class="col-sm-6">
                <div class="upload">
                    <label>Upload Document</label>
                    <asp:HiddenField ID="hdnGetFileName" runat="server" />
                    <div id="dvFileUpload">
                        <asp:FileUpload runat="server" ID="flufileUpload" AllowMultiple="true" CssClass="chooseFile" />
                    </div>
                </div>
            </div>

            <div class="col-sm-6">
                <label>Remarks</label>
                <asp:TextBox ID="txtRemarks" runat="server" TextMode="MultiLine" />
            </div>
            <div class="col-sm-6" style="overflow: auto; height: 100px;">

                <asp:GridView ID="grdFilesInfo" runat="server" AutoGenerateColumns="false" EmptyDataText="No files uploaded">
                    <Columns>
                        <asp:BoundField DataField="Text" HeaderText="Uploaded Files" />
                        <asp:TemplateField>
                            <ItemTemplate>
                                <asp:LinkButton ID="lnkDownload" ToolTip="download files" CssClass="fa fa-download" CommandArgument='<%# Eval("Value") %>' runat="server" OnClick="lnkDownload_Click"></asp:LinkButton>
                            </ItemTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField>
                            <ItemTemplate>
                                <asp:LinkButton ID="lnkDelete" ToolTip="delete files" CssClass="fa fa-trash-o" CommandArgument='<%# Eval("Value") %>' runat="server" OnClientClick="if (!confirm('Are you sure you want delete the file?')) return false;" OnClick="lnkDelete_Click" />
                            </ItemTemplate>
                        </asp:TemplateField>
                    </Columns>
                </asp:GridView>
            </div>

            <div class="clearfix"></div>
            <div class="modalButton">

                <asp:Button ID="btnSaveDraft" runat="server" Text="Save as Draft" OnClick="btnSaveDraft_Click" CssClass="button" OnClientClick="return SaveOrDraft('Draft');" />

                <asp:Button ID="btnSubmit" runat="server" Text="Submit" data-dismiss="modal" OnClick="btnSubmit_Click" CssClass="button" OnClientClick="return SaveOrDraft('Draft');" />
            </div>
        </form>
    </div>

标签： javascriptc#jqueryasp.netbootstrap-modal

解决方案

JQuery 和 Ajax 是您的朋友。

您可以将其添加到文档中。准备好...

$(document).ready(function() {
    $('#<%= btnSubmit.ClientID %>').on('click', function () {
        $('.modals').hide(); // hides anything with 'modals' as the class
    }
}

您也可以只给模态一个 ID 并使用 $('#ModalID').hide(); 您可以为提交按钮分配一个静态 ID，但 <%= btnSubmit.ClientID %> 将为您提取 ID。

这是ajax操作吗？从您那里的代码来看，它似乎会执行回发并重新加载页面。

推荐阅读