Simple Form Submission With Bootstrap Modal – asp.net WebForm

Facebooktwittergoogle_pluslinkedinmail

 download  project

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 impliment 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 successfullyy 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 the link https://github.com/daneden/animate.css/

In modal html add this class zoomIn

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

download project

asp.net webform bootstrap

Facebooktwittergoogle_pluslinkedinmail

Leave a Reply

Your email address will not be published. Required fields are marked *