Bootstrap 模式验证网络表单 + 仅显示

Question

对于我正在创建的新网站，我想使用 bootstraps 模态从用户那里获取一些信息，然后他才能访问页面上的内容。

我面临 2 个问题，我似乎找不到解决方案。

1) 我正在尝试仅显示模态。输入信息后，模式应该会消失，直到页面完全重新加载后才会再次出现。

我试图在用户会话中保存一个布尔值，但感觉不对。这里的最佳做法是什么？

2) 我显示的模式包含一个文本框。我想验证此数据并检查我的数据库中是否不存在该内容。根据我在网上发现的，进行验证的最佳方法是通过模态主体内的简单表单。因为我在母版页中使用 asp.net 网络表单，所以我在母版页中已经有一个表单，无法在模态中嵌套另一个表单。我可以处理保存表单时单击按钮中的 'Already exists' 部分，但是验证不应该在那里，对吗？

模态

<div class="modal fade" id="mdlReference">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <asp:Label runat="server" Font-Bold="True" Text="Order reference" ID="lblMdlReferenceTitle" /><br/>
                    <asp:Label runat="server" ForeColor="red" ID="lblMdlReferenceDetailsTitle"></asp:Label>
                </div>
                <div class="modal-body">
                        <asp:TextBox ID="tbMdlReference" autocomplete="off" CssClass="form-control" placeholder="Reference" runat="server"></asp:TextBox>
                </div>
                <div class="modal-footer">
                    <asp:Button ID="btnCreateOrderWithReference" runat="server" class="btn btn-success" Text="Create" OnClick="btnCreateOrderWithReference_OnClick" />
                    <asp:Button ID="btnCloseMdlReference" runat="server" class="btn btn-danger" Text="Cancel" OnClick="btnCloseMdlReference_Click" />
                </div>
            </div>
        </div>
    </div>

编辑

我通过在重定向中将引用保存为查询字符串后重定向到同一页面，然后在页面加载中检查此引用来修复 'Show only ones'：

 string Reference = Request.QueryString["Reference"];
            if (!string.IsNullOrEmpty(Reference))
            {
                ...
            }

Answer 1

1) I'm trying to show the modal only ones. Ones the information is entered the modal should disappear and until the page is fully reloaded not appear again.

您可以在此函数中以编程方式显示模式

$(document).ready(function(){
    // Here the code to show the modal
    // When document is ready
});

对于模态工具，您可以将特定的类添加到您的表单按钮，以使其在提交时消失。看看 official documentation.

2) The modal I'm showing contains a textbox. I would like to validate this data and also check if the content is not already existing in my database. From what I found online the best way to do validation is trough a simple form inside the modal body. Because I'm using asp.net web forms with a master page I already have a form in the master page and can't nest another one inside the modal. I can handle the 'Already exists' part in the button click when saving the form, but the validation should not be in there, right?

首先......我不知道asp.net......所以我希望我能告诉你一个解决方案。你不能在

中调用 ajax

$('#your-button').click(function({
    // Ajax call here
    // on success: submit()
    // on error: modify error labels
}));`

使用此方法，您可以将验证部分保留在后端控制器中，但无需重新加载页面或重定向到特定位置。

Answer 2

1) For your 1st query when Page load you need fire query which is to check whether user data is available or not and if not then only modal has to open and that will done by ID.

2) For 2nd query to close model you can use close class to modal.

Bootstrap 模式验证网络表单 + 仅显示

Bootstrap modal validation web forms + show only ones

javascript

asp.net

jquery

webforms

twitter-bootstrap