Simple Form Submission With Bootstrap Modal – ASP.NET WebForm

• Download source code - 9 MB

Introduction

This is a small project where we submit a form in a bootstrap modal window using update panel Ajax and close it.

Code

Add a Webform project with .NET 4.5.2. By default, Bootstrap template is created with bootstrap CSS and bootstrap JS files.

Let us consider a situation where we add a category from a bootstrap modal to a dropdown.

Create a Modal Window at the bottom of aspx page.

<div class="modal   " 
id="sample_modal" role="dialog" tabindex="-1" >
<div class="modal-dialog ">
<div class=" modal-content">
<div class="modal-header">Modal Heading</div>
<div class="modal-body col-sm-12">
<div class="form-group ">
<label class="col-sm-4 control-label">New Category</label>
<div class="col-sm-8">
<asp:TextBox ID="txtCat"  CssClass="form-control"  
runat="server" ></asp:TextBox>
<asp:RequiredFieldValidator ID="rfv1" CssClass="alert-danger" 
ControlToValidate="txtCat" ValidationGroup="save-modal" 
SetFocusOnError="true" Display="Dynamic" runat="server" 
ErrorMessage="Please Enter category!!!"></asp:RequiredFieldValidator>
</div>
</div>
</div>
<div class="modal-footer">
<asp:Button ID="btn_save"  runat="server" 
CssClass="btn btn-primary" Text="Add" 
OnClick="btn_save_Click" ValidationGroup="save-modal"   />
<button type="button" class="btn btn-default pull-right" 
data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

Add Update panel to implement Ajax with bootstrap modal. Modal will look like below:

<div class="modal   " id="sample_modal" 
role="dialog" tabindex="-1" >
<div class="modal-dialog ">
<asp:UpdatePanel ID="UpdatePanel2" 
runat="server" EnableViewState="true">
<ContentTemplate>
<div class=" modal-content">
<div class="modal-header">Modal Heading</div>
<div class="modal-body col-sm-12">
<div class="form-group ">
<label class="col-sm-4 control-label">New Category</label>
<div class="col-sm-8">

<asp:TextBox ID="txtCat"  CssClass="form-control"  
runat="server" ></asp:TextBox>
<asp:RequiredFieldValidator ID="rfv1" CssClass="alert-danger" 
ControlToValidate="txtCat" ValidationGroup="save-modal" 
SetFocusOnError="true" Display="Dynamic" runat="server" 
ErrorMessage="Please Enter category!!!"></asp:RequiredFieldValidator>
</div>
</div>
</div>
<div class="modal-footer">
<asp:Button ID="btn_save"  runat="server" 
CssClass="btn btn-primary" Text="Add" 
OnClick="btn_save_Click" ValidationGroup="save-modal"   />
<button type="button" class="btn btn-default pull-right" 
data-dismiss="modal">Close</button>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</div>

Write a function to handle server side click event of save button. Something like below:

protected void btn_save_Click(object sender, EventArgs e)
        {
            if (IsValid)
            {
                ddlCat.Items.Insert(3, txtCat.Text);
                lblmsg.Text = "Item successfully added to category dropdown ";
                lblmsg.CssClass = "alert alert-success pull-right";
                string strJsSuccess = new StringBuilder
                ("$('#sample_modal').modal('hide');").ToString();
                ScriptManager.RegisterClientScriptBlock
                (this, this.GetType(), "Hide", strJsSuccess, true);               
            }
        }

So, now your modal window is ready. Add a button to open modal window as below:

<button type="button" id="btn_open_modal" 
class="btn btn-primary btn-lg ">Add New Category</button>

Add JavaScript(jquery) to open modal:

<script>
$(document).ready(function () {
$("#btn_open_modal").click(function (event) {
$('#sample_modal').modal('show');
})
});
</script>

To position Modal window, we add an extra line before showing modal.

<script>
$(document).ready(function () {
$("#btn_open_modal").click(function (event) {
$(".modal-dialog").css({ position: "absolute", top: event.pageY });
$('#sample_modal').modal('show');
})
});
</script>

Now add little animation effect. Add animate.css in content folder and add reference in bundle.config.

To download animate.css, refer to the link https://github.com/daneden/animate.css/.

In modal html, add this class zoomIn:

<div class="modal-dialog animated zoomIn ">

To download project, visit the original location.

Points of Interest

Making bootstrap modal work with form submission using update panel in ASP.NET webform.

History

• 24^th July, 2016: Initial version