ASP.NET Bootstrap Modal - asp.net

I am quite new to ASP.NET so forgive me if I have the functionality wrong.
I am working with Bootstrap and have a button within a tab and UpdatePanel which fires a Modal.
The Modal sits behind the screen and blacks out and I can't quite work out why.
If I take the UpdatePanel out, it works. I need the UpdatePanel because it is in a tab with an action CheckBox which without the UpdatePanel sends the user back to the first tab.
<div class="tab-pane fade" id="neworder">
<asp:UpdatePanel ID="up_New_Order" runat="server">
<ContentTemplate>
<div class="checkbox">
<asp:CheckBox ID="cb_Auto_Fill" runat="server" Text="Auto fill last order" CssClass="checkbox" AutoPostBack="true" OnCheckedChanged="cb_Auto_Fill_CheckedChanged"></asp:CheckBox>
</div>
<div class="col-md-6">
<!-- New Order -->
<asp:panel class="row form-group has-feedback" id="Panel2" runat="server">
<label for="inputName" class="col-lg-4 control-label">Ordered By</label>
<div class="col-lg-8">
<asp:Label ID="Label1" runat="server"></asp:Label>
<asp:TextBox CssClass="form-control" ID="tb_Ordered_By" placeholder="Customer name" runat="server"></asp:TextBox>
</div>
</asp:panel>
<asp:panel class="row form-group has-feedback" id="Panel5" runat="server">
<label for="inputSubject" class="col-lg-4 control-label">PO No/Agency</label>
<div class="col-lg-8">
<asp:TextBox CssClass="form-control" ID="tb_Po_Number" placeholder="PO No/Agency Ref" runat="server"></asp:TextBox>
</div>
</asp:panel>
<asp:panel class="row form-group has-feedback" id="Panel13" runat="server">
<label for="inputSubject" class="col-lg-4 control-label">Payment Type</label>
<div class="col-lg-8">
<asp:DropDownList ID="ddl_Payment_Type" runat="server" CssClass="form-control dropdown"></asp:DropDownList>
</div>
</asp:panel>
<asp:panel class="row form-group has-feedback" id="Panel14" runat="server" Visible="false">
<label for="inputSubject" class="col-lg-4 control-label">Upload</label>
<div class="col-lg-8">
<input type="file"
style="visibility:hidden; width: 1px;height:1px"
id='${multipartFilePath}' name='${multipartFilePath}'
onchange="$(this).parent().find('span').html($(this).val().replace('C:\\fakepath\\', ''))" /> <!-- Chrome security returns 'C:\fakepath\' -->
<input class="btn btn-primary" type="button" value="Upload File.." onclick="$(this).parent().find('input[type=file]').click();"/> <!-- on button click fire the file click event -->
<span class="badge badge-important" ></span>
</div>
</asp:panel>
<asp:panel class="row form-group has-feedback" id="Panel11" runat="server">
<label for="inputSubject" class="col-lg-4 control-label">Order Notes</label>
<div class="col-lg-8">
<asp:TextBox id="tb_Order_Notes" cssClass="form-control" TextMode="multiline" Columns="50" Rows="3" runat="server" />
</div>
</asp:panel>
</div>
<div class="col-md-6">
<!-- New Order -->
<asp:panel class="row form-group has-feedback" id="Panel7" runat="server">
<label for="inputName" class="col-lg-4 control-label">Copy Contact</label>
<div class="col-lg-8">
<asp:Label ID="Label2" runat="server"></asp:Label>
<asp:TextBox CssClass="form-control" ID="tb_Copy_Contact" runat="server"></asp:TextBox>
</div>
</asp:panel>
<asp:panel class="row form-group has-feedback" id="Panel8" runat="server">
<label for="inputName" class="col-lg-4 control-label">Copy Supply</label>
<div class="col-lg-8">
<asp:TextBox CssClass="form-control" ID="tb_Copy_Supply" runat="server"></asp:TextBox>
</div>
</asp:panel>
<asp:panel class="row form-group has-feedback" id="Panel9" runat="server">
<label for="inputEmail" class="col-lg-4 control-label">Copy Tel</label>
<div class="col-lg-8">
<asp:TextBox CssClass="form-control" ID="tb_Copy_Tel" runat="server"></asp:TextBox>
</div>
</asp:panel>
<asp:panel class="row form-group has-feedback" id="Panel10" runat="server">
<label for="inputSubject" class="col-lg-4 control-label">Copy Email</label>
<div class="col-lg-8">
<asp:TextBox CssClass="form-control" ID="tb_Copy_Email" runat="server"></asp:TextBox>
</div>
</asp:panel>
<div class="row form-group">
</div>
<div class="row form-group">
<div class="col-lg-12">
<asp:Button Text="Create Order" ID="btn_Create_Order" CssClass="btn btn-primary btn-block" OnClick="btn_Create_Order_Click" runat="server" />
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
The modal sits just above my closing tag for Content and I call it with:
protected void btn_Create_Order_Click(object sender, EventArgs e)
{
lblModalTitle.Text = "Modal Title";
lblModalBody.Text = "Modal Body.";
ScriptManager.RegisterStartupScript(Page, Page.GetType(), "myModal", "$('#myModal').modal().appendTo('body');", true);
upModal.Update();
//pnlAlertBox.Visible = true;
}
Here is the modal (I am reusing it so I know it does work).
<!-- Bootstrap Modal Dialog -->
<div class="modal fade" id="myModal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<asp:UpdatePanel ID="upModal" runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional">
<ContentTemplate>
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title"><asp:Label ID="lblModalTitle" runat="server" Text=""></asp:Label></h4>
</div>
<div class="modal-body">
<asp:Label ID="lblModalBody" runat="server" Text=""></asp:Label>
</div>
<div class="modal-footer">
<button class="btn btn-info" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</div>

I tried your code in my sample project and the bootstrap modal works correctly. I am using jquery 2.1.3
It could be that the jquery version you are using is causing the problem.

Related

I want to open bootstrap modal .net webform on button click

I had written code for modal popup but its not working, I am new to .net so i don't know how its work so please help me in that.. On clicking add button i want to open modal popup but its not working.
<script type="text/javascript">
$(function () {
$("#btn_add_new").click(function () {
$('#UsersModal').modal('show');
});
});
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<asp:Button ID="btn_add_new" runat="server" Text="Add New" CausesValidation="False" CssClass="button" data-target="#UsersModal"
/>
<div class="modal fade" id="UsersModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×</button>
<h4 class="modal-title" id="ModalTitle">
New User</h4>
</div>
<div class="modal-body">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div class="col-sm-3">
<asp:Label ID="lbluname" Font-Size="Large" runat="server" Text="Username"></asp:Label>
</div>
<div class="col-sm-5">
<asp:TextBox ID="txtname" runat="server"></asp:TextBox>
</div>
<br />
<div class="col-sm-3">
<asp:Label ID="Label1" Font-Size="Large" runat="server" Text="Username"></asp:Label>
</div>
<div class="col-sm-5">
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</div>
<asp:CheckBox ID="chkRememberMe" Text="Remember Me" runat="server" />
<asp:Button ID="Button2" runat="server" CssClass="btn btn-primary" Text="Save" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
</div>
</div>
</asp:Content>
You could just use a html button like this:
<button type="button" class="btn btn-primary" CssClass="button"
data-toggle="modal" data-target="#UsersModal">Add New</button>
Your javascript is not required to open the modal.
The modal opens fine on my test page using your modal code.

Modal box not showing asp.net

I am trying to get a modal box to show. Whenever I click the button, it fades but the modal box does not show. Does anyone know the problem with my code?
asp:Button ID="searchMRF" UseSubmitBehavior="false" runat="server" CssClass="btn-primary active" Text="Search MRF No." Height="31px" Width="139px" data-toggle="modal" data-target="#TestModal" />
<%-- MODAL --%>
<div id="TestModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<%-- MODAL CONTENT --%>
<div class="modal-content">
<div class="modal-header">
<asp:Button ID="close1" class="close" Text="x" runat="server" />
<asp:Label class="modal-title" runat="server" Text="TESTING"></asp:Label>
</div>
<div class="modal-body">
<asp:Label runat="server" class="modal-lg"></asp:Label>
</div>
<div class="modal-footer">
<asp:Button ID="close2" runat="server" Text="Close" />
</div>
</div>
</div>
</div>

Page is not postback on button click event with required field validation control

I am using required field validation control on all textboxes and drop down list. When I press button page is not post back but if any textbox or drop down list is empty it will show error message on button click.
If I use CausesValidation="false" property in button control it will disable all validation control and page will post back on button click.
I want that page will post back on button click and required field validation controls will also work on button click.
<div class="row" id="question">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<div class="form-group">
<asp:TextBox ID="questions" runat="server" class="form-control input-sm floatlabel" placeholder="Question" TextMode="MultiLine"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" CssClass="textalignment" ErrorMessage="Question is required" ControlToValidate="questions" ForeColor="Red"></asp:RequiredFieldValidator>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<img id="imgprvw" class="img-responsive" />
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<input type="file" name="filUpload" id="filUpload" onchange="showimagepreview(this)" />
</div>
</div>
</div>
</div>
<!-- End Question and Question type Selection -->
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="form-group">
<div class="form-group">
<asp:DropDownList ID="ddlanswers" runat="server" class="form-control input-sm floatlabel" OnChange="showDiv(this)">
<asp:ListItem Text="Answer Type" Value="0"></asp:ListItem>
<asp:ListItem Text="Multiple Choices" Value="1"></asp:ListItem>
<asp:ListItem Text="Fill In The Blacks" Value="2"></asp:ListItem>
<asp:ListItem Text="Multi Select Choices" Value="3"></asp:ListItem>
<asp:ListItem Text="Descriptive Answer" Value="4"></asp:ListItem>
</asp:DropDownList>
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" InitialValue="0" CssClass="textalignment" runat="server" ErrorMessage="Answer Type is required" ControlToValidate="ddlanswers" ForeColor="Red">
</asp:RequiredFieldValidator>
</div>
</div>
</div>
</div>
<div class="row" id="row1">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<div class="form-group">
<asp:TextBox ID="multichoice1" runat="server" class="form-control input-sm floatlabel" placeholder="Multiple Choice 1"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" CssClass="textalignment" ErrorMessage="Multiple choice is required" ControlToValidate="multichoice1" ForeColor="Red"></asp:RequiredFieldValidator>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<div class="form-group">
<asp:TextBox ID="multichoice2" runat="server" class="form-control input-sm floatlabel" placeholder="Multiple Choice 2"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server" CssClass="textalignment" ErrorMessage="Multiple choice is required" ControlToValidate="multichoice2" ForeColor="Red"></asp:RequiredFieldValidator>
</div>
</div>
</div>
<div class="row" id="row2">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<div class="form-group">
<asp:TextBox ID="multichoice3" runat="server" class="form-control input-sm floatlabel" placeholder="Multiple Choice 3"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator5" runat="server" CssClass="textalignment" ErrorMessage="Multiple choice is required" ControlToValidate="multichoice3" ForeColor="Red"></asp:RequiredFieldValidator>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<div class="form-group">
<asp:TextBox ID="multichoice4" runat="server" class="form-control input-sm floatlabel" placeholder="Multiple Choice 4"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator6" runat="server" CssClass="textalignment" ErrorMessage="Multiple choice is required" ControlToValidate="multichoice4" ForeColor="Red"></asp:RequiredFieldValidator>
</div>
</div>
</div>
<div class="row" id="row3">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<div class="form-group">
<asp:TextBox ID="TextBox1" runat="server" class="form-control input-sm floatlabel" placeholder="Multiple Choice 5"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator7" runat="server" CssClass="textalignment" ErrorMessage="Multiple choice is required" ControlToValidate="multichoice4" ForeColor="Red"></asp:RequiredFieldValidator>
</div>
</div>
</div>
<asp:Button ID="Button1" runat="server" Text="Button" UseSubmitBehavior="false" CssClass="btn btn-default" OnClick="Button1_Click1" />
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</div>
</div>
In button property, remove UseSubmitBehavior="false" or Set UseSubmitBehavior="true".
Hope this help you.
I think it is possible to do this in code-behind in one line of code. Put this in Button1_Click1 method.
ScriptManager.GetCurrent(this).RegisterPostBackControl(Button1);

RadTabStrip don't work after post back occurs

i have a master page and a content page. i have placed my content page inside update panel like this...
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Always">
<Triggers></Triggers>
<ContentTemplate>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server" />
</ContentTemplate>
</asp:UpdatePanel>
in my content page i have a RadTabStrip with three tabs and on each tab i have placed button like this...
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<telerik:RadScriptManager ID="scriptManager" runat="server"></telerik:RadScriptManager>
<div id="main-content">
<telerik:RadTabStrip runat="server" ID="RadTabStrip1" MultiPageID="RadMultiPage1" SelectedIndex="2" OnClientTabSelecting="onTabSelecting" Skin="Forest" CausesValidation="false">
<Tabs>
<telerik:RadTab Text="Manage Users" Width="200px" Value="0"></telerik:RadTab>
<telerik:RadTab Text="Role Editor" Width="200px" Value="1"></telerik:RadTab>
<telerik:RadTab Text="Create User" Width="200px" Value="2" Selected="True"></telerik:RadTab>
</Tabs>
</telerik:RadTabStrip>
<telerik:RadMultiPage runat="server" ID="RadMultiPage1" SelectedIndex="1" CssClass="outerMultiPage">
<telerik:RadPageView runat="server" ID="RadPageView1" Skin="Sunset">
<!--<div class="exampleWrapper">-->
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-body">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<br />
<div id="form2" role="form" parsley-validate class="icon-validation">
<button class="btn btn-primary m-b-10" onclick="javascript:$('#formMaster').parsley('validate');">Submit</button>
</div>
</div>
<div class="col-sm-9 col-sm-offset-3">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--</div>-->
</telerik:RadPageView>
<telerik:RadPageView runat="server" ID="RadPageView2">
<!--<div class="exampleWrapper">-->
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-body">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<telerik:RadButton ID="btnFind" runat="server"></telerik:RadButton>
<telerik:RadButton ID="RadButton1" runat="server"></telerik:RadButton>
<telerik:RadButton ID="RadButton2" runat="server"></telerik:RadButton>
</div>
</div>
</div>
</div>
</div>
</div>
<!--</div>-->
</telerik:RadPageView>
</telerik:RadMultiPage>
</div>
The Tabs works normally, loads respective page view before any post back occurs...whenever a post back occurs (I does it with button for testing) the tabs don't load their page view and just halted.
plz post some solution.

Showing Bootstrap Modal Pop-up on clicking Asp Button control

I am trying to show pop-up on clicking Button named "Lunch Break", it works fine when am using normal Bootstrap button button control.
But i want use asp:Button control to show same pop-up but pop-up does appears on clicking on that button, it just refresh the page.
aspx code :
<asp:Button ID="btnLunchBreak" runat="server" Text="Lunch Break" CssClass="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" />
<div class="modal fade panel panel-primary" id="myModal" tabindex="-1" runat="server" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false" >
<div class="modal-dialog panel panel-primary ">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h2 class="modal-title" id="gridSystemModalLabel" style="color: red">Lunch Break</h2>
</div>
<div class="modal-body">
<div class="container-fluid">
<br />
<br />
<asp:UpdatePanel ID="UpdatePanel3" runat="server">
<ContentTemplate>
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4">
<asp:Button ID="btnLunchStart" runat="server" CssClass="btn btn-success" Text="Start" OnClick="btnLunchStart_Click" />
<asp:Button ID="btnLunchStop" runat="server" CssClass="btn btn-success" Text="Stop" OnClick="btnLunchStop_Click" />
</div>
<div class="col-md-4"></div>
</div>
<div class="col-md-4"></div>
<div class="col-md-4">
<asp:Label ID="lbl_LTimer" runat="server" CssClass="h3" ForeColor="Blue"></asp:Label><br />
<asp:Label ID="lbl_Lhour" runat="server" Visible="false" CssClass="h4" ForeColor="Black" Text="Hr :"></asp:Label>
<asp:Label ID="lbl_LMin" runat="server" Visible="false" CssClass="h4" ForeColor="Black" Text="Min :"></asp:Label>
<asp:Label ID="lbl_LSec" runat="server" Visible="false" CssClass="h4" ForeColor="Black" Text="sec"></asp:Label>
<br />
<asp:Label ID="lbl_LHr" runat="server" CssClass="h3" Font-Bold="true" Font-Size="20" ForeColor="red"></asp:Label>
<br />
<br /> <br /><br /><br /><br /><br />
<asp:Label ID="lbl_Lbrkresp" runat="server" Visible="false"></asp:Label>
<asp:Timer ID="Timer3" runat="server" Interval="1000000" OnTick="Timer3_Tick">
</asp:Timer>
</div>
<div class="col-md-4"></div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
am not familiar with bootstrap may be am doing it in wrong way. Suggest any solution
You can try to set the attribute UseSubmitBehavior to false.
Thus, ASP will not render a submit, but a simple button instead.
Hope that helps! =)

Resources