SagSD

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