Asp.Net Insert using bootstrap Modal Popup

Question

I am trying to create an insert function on a modal. When the user clicks on the Add button, a modal should pop-up to the screen and a form inside would be present. When the user clicks the Save button, the data will be saved to the database but somehow, my asp entities are not read when placed inside the modal. When I try to remove everything from the modal, my code works. Even the code behind can't detect all of my entities in the design page.

Button to Launch Modal

    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#AddUser">Add User</button>

My Modal

   <div class="modal fade" id="AddUser" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Add User Account</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                        <div class="form-horizontal">
                        <hr />
                        <asp:ValidationSummary runat="server" CssClass="text-danger" />
                            <div class="form-group">
                            <asp:Label runat="server" AssociatedControlID="Username" CssClass="col-md-2 control-label">Username</asp:Label>
                                <div class="col-md-10">
                                    <asp:TextBox runat="server" ID="TextBox1" CssClass="form-control"/>
                                    <asp:RequiredFieldValidator runat="server" ControlToValidate="Username" CssClass="text-danger" ErrorMessage="The field is required." />
                                </div>
                            </div>

                            <div class="form-group">
                                    <asp:Label runat="server" AssociatedControlID="Fullname" CssClass="col-md-2 control-label">Fullname</asp:Label>
                                <div class="col-md-10">
                                    <asp:TextBox runat="server" ID="TextBox2" CssClass="form-control"/>
                                    <asp:RequiredFieldValidator runat="server" ControlToValidate="Fullname" CssClass="text-danger" ErrorMessage="The field is required." />
                                </div>
                            </div>


                            <div class="form-group">
                                    <asp:Label runat="server" AssociatedControlID="RoleID" CssClass="col-md-2 control-label">Role</asp:Label>
                                <div class="col-md-3">
                                    <asp:DropDownList runat="server" ID="DropDownList1" CssClass="form-control" DataSourceID="SqlDataSource2" DataTextField="Name" DataValueField="Id" ></asp:DropDownList>
                                    <asp:SqlDataSource ID="SqlDataSource4" runat="server" ConnectionString="<%$ ConnectionStrings:SLSU_TransactionConnectionString %>" SelectCommand="SELECT [Id], [Name] FROM [AspNetRoles]"></asp:SqlDataSource>
                                    <asp:RequiredFieldValidator runat="server" ControlToValidate="Department" InitialValue="0" ErrorMessage="The field is required." CssClass="text-danger" />
                                </div>
                            </div>

                            <div class="form-group">
                                    <asp:Label runat="server" AssociatedControlID="Department" CssClass="col-md-2 control-label">Department</asp:Label>
                                <div class="col-md-3">
                                    <asp:DropDownList runat="server" ID="DropDownList2" CssClass="form-control" DataSourceID="SqlDataSource1" DataTextField="Office" DataValueField="Id" ></asp:DropDownList>
                                    <asp:SqlDataSource ID="SqlDataSource5" runat="server" ConnectionString="<%$ ConnectionStrings:SLSU_TransactionConnectionString %>" SelectCommand="SELECT [Id], [Office] FROM [Tbl_Office]"></asp:SqlDataSource>
                                    <asp:RequiredFieldValidator runat="server" ControlToValidate="Department" InitialValue="0" ErrorMessage="The field is required." CssClass="text-danger" />
                                </div>
                            </div>

                                <div class="hidden">
                                    <asp:TextBox runat="server" ID="TextBox3" Text="True" Visible="false"></asp:TextBox>
                                </div>

                            <div class="form-group">
                                    <asp:Label runat="server" AssociatedControlID="Password" CssClass="col-md-2 control-label">Password</asp:Label>
                                <div class="col-md-10">
                                    <asp:TextBox runat="server" ID="TextBox4" TextMode="Password" CssClass="form-control" />
                                    <asp:RequiredFieldValidator runat="server" ControlToValidate="Password" CssClass="text-danger" ErrorMessage="The password field is required." />
                                </div>
                            </div>

                           <div class="form-group">
                                    <asp:Label runat="server" AssociatedControlID="ConfirmPassword" CssClass="col-md-2 control-label">Confirm password</asp:Label>
                                <div class="col-md-10">
                                    <asp:TextBox runat="server" ID="TextBox5" TextMode="Password" CssClass="form-control" />
                                    <asp:RequiredFieldValidator runat="server" ControlToValidate="ConfirmPassword" CssClass="text-danger" Display="Dynamic" ErrorMessage="The confirm password field is required." />
                                    <asp:CompareValidator runat="server" ControlToCompare="Password" ControlToValidate="ConfirmPassword" CssClass="text-danger" Display="Dynamic" ErrorMessage="The password and confirmation password do not match." />
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="col-md-offset-2 col-md-10">
                                    <asp:Button runat="server" OnClick="CreateUser_Click" Text="Add User" CssClass="btn btn-default" />
                                </div>
                            </div>
                        </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
            </div>
        </div>
    </div>

Thanks in advance!

Answer 1

Ok I was able to fix the problem, when I add the code to the modal, the ID of the design got replaced and that is where the conflicts occurs. I manually added each and now everything works.