Search code examples
javascriptjqueryasp.nettwitter-bootstrapwebforms

Bootstrap modal validation web forms + show only ones


For a new website that I'm creating, I want to use bootstraps modal to get some information from the user before they can access the content on the page.

I'm facing 2 problems which I can't seem to find a solution for.

  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.

I'm tried to save a bool for example in the user's session, but that does not feel right. What would be the best practice here?

  1. 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 through 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?

Modal

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

EDIT

I fixed the 'Show only ones' by redirecting to the same page after saving with the reference as query string in the redirect and then checking for this reference in the page load:

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

Solution

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

    You can show programmatically the modal within this function

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

    For the modal toogle, you can add specific classes to your form button, in order to make it disappear on submit. Have a look at the 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?

    First... I don't know asp.net... So i hope i can tell you a solution anyway. Can't you make an ajax call inside the

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

    With this method you can keep the validation part into a back-end controller, but without recharging the page or redirecting to a specific location.