Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles
(untagged)

Simple Form Submission With Bootstrap Modal – ASP.NET WebForm

0.00/5 (No votes)
24 Jul 2016 2  
Adding dropdown item using bootstrap modal window and Ajax in ASP.NET webform and postioning the modal window

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.

asp.net webform bootstrap

Points of Interest

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

History

  • 24th July, 2016: Initial version

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here