Click here to Skip to main content
14,870,621 members
Articles / Web Development / HTML
Tip/Trick
Posted 24 Jul 2016

Stats

38.1K views
2.6K downloads
5 bookmarked

Simple Form Submission With Bootstrap Modal – ASP.NET WebForm

Rate me:
Please Sign up or sign in to vote.
4.56/5 (6 votes)
24 Jul 2016CPOL1 min read
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.

ASP.NET
<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:

ASP.NET
<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:

C#
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:

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

Add JavaScript(jquery) to open modal:

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

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

HTML
<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, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

SagSD
Software Developer
India India
I am a software developer .I mainly work on asp.net webform and SQLServer.But I have also done few projects using PHP , Mysql.

Comments and Discussions

 
-- There are no messages in this forum --