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

Question

我有一个 bootstrap 模式弹出窗口。里面有很多控件和提交按钮。所以在成功提交后我想关闭那个弹出窗口。下面是将消息显示为 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>

Answer 1

JQuery 和 Ajax 是您的 friend 。

您可以将其添加到文档中。就绪...

$(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操作吗？从您那里的代码来看，它似乎会执行回发并重新加载页面。