I have code html bootstrap, but when display incorrect.enter image description here
code bootstrap
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="../Content/bootstrap.min.js" rel="stylesheet" />
<script src="../Scripts/bootstrap.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div class="btn-group btn-group-justified">
<div class="btn-group">
<asp:Button runat="server" CssClass="btn btn-default" Text="Home" />
</div>
<div class="btn-group">
<asp:Button runat="server" CssClass="btn btn-default" Text="Cart" />
</div>
<div class="btn-group">
<asp:Button runat="server" CssClass="btn btn-default" Text="Products" />
</div>
<div class="btn-group">
<asp:Button runat="server" CssClass="btn btn-default" Text="Contact Us" />
</div>
</div>
</form>
</body>
</html>
when display on browser
It appears your bootstrap css is either not being included or you have some other css overriding it.
Translated from Google:
Nó xuất hiện "bootstrap.css" hoặc là không được bao gồm hoặc bạn có một số css khác ghi đè lên nó.
ASPX Markup:
<div class="btn-group btn-group-justified">
<div class="btn-group">
<asp:Button runat="server" CssClass="btn btn-default" Text="Home" />
</div>
<div class="btn-group">
<asp:Button runat="server" CssClass="btn btn-default" Text="Cart" />
</div>
<div class="btn-group">
<asp:Button runat="server" CssClass="btn btn-default" Text="Products" />
</div>
<div class="btn-group">
<asp:Button runat="server" CssClass="btn btn-default" Text="Contact Us" />
</div>
</div>
Renders HTML:
<div class="btn-group btn-group-justified">
<div class="btn-group">
<input type="submit" name="ctl00$MainContent$ctl00" value="Home" class="btn btn-default" />
</div>
<div class="btn-group">
<input type="submit" name="ctl00$MainContent$ctl01" value="Cart" class="btn btn-default" />
</div>
<div class="btn-group">
<input type="submit" name="ctl00$MainContent$ctl02" value="Products" class="btn btn-default" />
</div>
<div class="btn-group">
<input type="submit" name="ctl00$MainContent$ctl03" value="Contact Us" class="btn btn-default" />
</div>
</div>
Run the snippet and you can see it works.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
<div class="btn-group btn-group-justified">
<div class="btn-group">
<input type="submit" name="ctl00$MainContent$ctl00" value="Home" class="btn btn-default" />
</div>
<div class="btn-group">
<input type="submit" name="ctl00$MainContent$ctl01" value="Cart" class="btn btn-default" />
</div>
<div class="btn-group">
<input type="submit" name="ctl00$MainContent$ctl02" value="Products" class="btn btn-default" />
</div>
<div class="btn-group">
<input type="submit" name="ctl00$MainContent$ctl03" value="Contact Us" class="btn btn-default" />
</div>
</div>
Related
I have little problem. I am going to implement Bootstrap modal with loading some data from database on click, but i am stuck at this:
-> this works just fine and catches click:
<div class="card-body">
<p class="card-text">
<b>Id:</b> #post.Id <br />
<b>Title:</b> #post.Title<br />
<b>Description:</b> #post.Description<br />
<b>Nick:</b> #post.Author<br />
<b>Category:</b> #post.Category<br />
<b>Creation Time:</b> #post.CreationTime</p>
<hr />
<form method="post">
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Your comment" name="comment">
<span class="input-group-text"></span>
<input type="text" class="form-control" placeholder="Your nick" name="author">
<button class="btn btn-success" asp-route-postid="#post.Id" asp-route-comment="comment" asp-route-author="author"> Add comment </button>
</div>
</form>
<form method="get">
<div class="py-2">
<button type="submit" name="Id" value="#post.Id" class="btn btn-primary">Load</button>
</div>
</form>
#foreach(var comment in Model.Comments.Where(x=>x.PostId == #post.Id))
{
<b>Comment: </b>#comment.CommentDescription <b>Author: </b>#comment.CommentAuthor <b>Creation Time: </b>#comment.CreationTime<br />
}
</div>
but after implementing Modal it wont work anymore. My front-end looks like this:
<div class="card-header">
<center> <b>Post</b></center>
</div>
<div class="card-body">
<p class="card-text">
<b>Id:</b> #post.Id <br />
<b>Title:</b> #post.Title<br />
<b>Description:</b> #post.Description<br />
<b>Nick:</b> #post.Author<br />
<b>Category:</b> #post.Category<br />
<b>Creation Time:</b> #post.CreationTime</p>
<hr />
<form method="post">
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Your comment" name="comment">
<span class="input-group-text"></span>
<input type="text" class="form-control" placeholder="Your nick" name="author">
<button class="btn btn-success" asp-route-postid="#post.Id" asp-route-comment="comment" asp-route-author="author"> Add comment </button>
</div>
</form>
<!-- Modal -->
<form method="get">
<div class="py-2">
<button type="button" name="Id" value="#post.Id" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">Show comments</button>
<button type="submit" name="Id" value="#post.Id" class="btn btn-primary">Load</button>
</div>
</form>
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Comments</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
#foreach(var comment in Model.Comments.Where(x=>x.PostId == #post.Id))
{
<b>Comment: </b>#comment.CommentDescription <b>Author: </b>#comment.CommentAuthor <b>Creation Time: </b>#comment.CreationTime<br />
}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
This is my OnGetAsync:
public async Task OnGetAsync(string category, int id)
{
//do something
}
Have you ever had similar problem or know workflow to fix it?
//update
After some work i found this:
<div class="card-body">
<p class="card-text">
<b>Id:</b> #post.Id <br />
<b>Title:</b> #post.Title<br />
<b>Description:</b> #post.Description<br />
<b>Nick:</b> #post.Author<br />
<b>Category:</b> #post.Category<br />
<b>Creation Time:</b> #post.CreationTime</p>
<hr />
<form method="post">
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Your comment" name="comment">
<span class="input-group-text"></span>
<input type="text" class="form-control" placeholder="Your nick" name="author">
<button class="btn btn-success" asp-route-postid="#post.Id" asp-route-comment="comment" asp-route-author="author"> Add comment </button>
</div>
</form>
<!-- Modal -->
<form method="get">
<div class="py-2">
<button type="button" name="Id" value="#post.Id" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">Show comments</button>
<button type="submit" name="Id" value="#post.Id" class="btn btn-primary">Load</button>
</div>
</form>
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Comments</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
#foreach(var comment in Model.Comments.Where(x=>x.PostId == #post.Id))
{
<b>Comment: </b>#comment.CommentDescription <b>Author: </b>#comment.CommentAuthor <b>Creation Time: </b>#comment.CreationTime<br />
}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
When clicking Load my comments are loaded and "Show comments" button actually shows them, but for every button it show the same comment.
In best way this should work like this:
After clicking "Show comments" its loading comments for single post.
In best way this should work like this: After clicking "Show comments"
its loading comments for single post.
That is because data-bs-target value are all the same so that it will trigger the same modal. You need specify it by adding suffix. Change your code to data-bs-target="#exampleModal_#post.Id" and id="exampleModal_#post.Id".
Whole code below:
//more code.....
<!-- Modal -->
<form method="get">
<div class="py-2">
//change here......
<button type="button" data-bs-target="#exampleModal_#post.Id" name="Id" value="#post.Id" class="btn btn-primary" data-bs-toggle="modal">Show comments</button>
<button type="submit" name="Id" value="#post.Id" class="btn btn-primary">Load</button>
</div>
</form>
//change here.........
<div class="modal fade" id="exampleModal_#post.Id" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Comments</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
#foreach(var comment in Model.Comments.Where(x=>x.PostId == #post.Id))
{
<b>Comment: </b>#comment.CommentDescription <b>Author: </b>#comment.CommentAuthor <b>Creation Time: </b>#comment.CreationTime<br />
}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
ASP.NET
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.19.custom.min.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="#loginModal" />
<div class="container">
<div class = "row">
<div class="modal fade" tabindex="-1" id="loginModal"
data-keyboard="false" data-backdrop="static">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
×
</button>
<h4 class="modal-title">Login</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="inputUserName">Username</label>
<input class="form-control" placeholder="Login Username"
type="text" id="inputUserName" />
</div>
<div class="form-group">
<label for="inputPassword">Password</label>
<input class="form-control" placeholder="Login Password"
type="password" id="inputPassword" />
</div>
</form>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Login</button>
<button type="button" class="btn btn-primary"
data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
Don't know why the above code is not working form me.
You need to change the button a bit, by adding data-toggle="modal" and data-target="#loginModal", and changing the value of OnClientClick to "return false" to prevent re-loading of page due to postback
<asp:Button ID="Button1" runat="server" Text="Button" data-toggle="modal" data-target="#loginModal" OnClientClick="return false" />
More on Bootstrap Modals (although the documentation uses a normal button)
I'm having trouble finding the right code to allign my div element to the right of the page.
Now I have this:
I want to have this:
Here is my code:
<h1 class="pb-2 mt-4 mb-2 border-bottom">Producten</h1>
<button type="button" name="button" class="btn btn-warning" *ngIf="!newProduct" (click)="newProductForm()">Nieuwe productvraag</button>
<button [disabled]="loading" type="button" name="button" class="btn btn-default" *ngIf="!newProduct" (click)="reload()"><i class="fas fa-sync-alt"></i> Reload</button>
<form name="searchForm" (submit)="search()" class="form-check-inline">
<div class="float-right">
<input type="text" name="title" class="form-control" placeholder="*Zoek product" aria-label="Search"/>
<button type="submit" style="display:none;">Hidden</button>
</div>
</form>
The 2 buttons (yellow and grey) don't have anything to do with the form. The form is a search function of my page. I use bootstrap for styling.
I have resolved your problem please check following code
<h1 class="pb-2 mt-4 mb-2 border-bottom">Producten</h1>
<div class="clearfix">
<button type="button" name="button" class="btn btn-warning" *ngIf="!newProduct" (click)="newProductForm()">Nieuwe productvraag</button>
<button [disabled]="loading" type="button" name="button" class="btn btn-default" *ngIf="!newProduct" (click)="reload()"><i class="fas fa-sync-alt"></i> Reload</button>
<form name="searchForm" (submit)="search()" class="form-check-inline float-right">
<input type="text" name="title" class="form-control" placeholder="*Zoek product" aria-label="Search"/>
<button type="submit" style="display:none;">Hidden</button>
</div>
</form>
</div>
add class to you input tag like search-input
then in your css file
.search-input {
float: right
}
If you are using bootstrap 4 then you can do something like this. wrap your buttons and form into one div and give him class d-flex and ml-auto class to form tag
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<h1 class="pb-2 mt-4 mb-2 border-bottom">Producten</h1>
<div class="d-flex">
<button type="button" name="button" class="btn btn-warning" *ngIf="!newProduct" (click)="newProductForm()">Nieuwe productvraag</button>
<button [disabled]="loading" type="button" name="button" class="btn btn-default" *ngIf="!newProduct" (click)="reload()"><i class="fas fa-sync-alt"></i> Reload</button>
<form name="searchForm" (submit)="search()" class="form-check-inline ml-auto">
<div>
<input type="text" name="title" class="form-control" placeholder="*Zoek product" aria-label="Search"/>
<button type="submit" style="display:none;">Hidden</button>
</div>
</form>
<div>
How would you let bootstrap self-spread buttons to 100% width of their parent, without adjusting each of the button's width separately ?
for example if i have 8 buttons, 100% containers width / 8 buttons = 12% width for each button.
i would like to:
avoid specifying each button's width (today i got 8 tomorrow i'll
have 20).
adjusting the whole .btn-group's child buttons to the center (if you pay close attention you'll see the buttons inside the container are left-aligned for some reason).
.btn-group {
width: 100%;
}
.btn-group>input.btn {
width: 12%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container panel panel-default">
<div class="btn-group">
<input type="button" class="btn btn-primary btn-responsive" value="A" />
<input type="button" class="btn btn-primary btn-responsive" value="AB" />
<input type="button" class="btn btn-primary btn-responsive" value="ABC" />
<input type="button" class="btn btn-primary btn-responsive" value="ABCD" />
<input type="button" class="btn btn-primary btn-responsive" value="ABCDE" />
<input type="button" class="btn btn-primary btn-responsive" value="ABCD" />
<input type="button" class="btn btn-primary btn-responsive" value="ABC" />
<input type="button" class="btn btn-primary btn-responsive" value="AB" />
</div>
<br/>
<br/>
<br/>
<p>the buttons above don't take full width of the container</p>
</div>
Example CSS:
.btn-group {
width: 100%;
}
.btn-group>input.btn {
width: 12%;
}
Codepen
This effect is easiest achieved with flexbox.
.btn-group {
display: flex;
justify-content: center;
}
.btn-group > input.btn {
flex-grow: 1;
}
Depending on your what browers you target you might want to prefix
HTML added .row inside grid which will allow you to reach 100%.
no I have added .col-xs-12 inside .row which might not be necessary but i have tried to follow what bootstrap gives ie container > row > column.
additions .. make .btn-group to be .btn-block too, it spans it 100%.
<div class="container panel panel-default">
<div class="row">
<div class="col-xs-12 no-padding">
<div class="btn-group btn-block my-btn-group">
<input type="button" class="btn btn-primary btn-responsive" value="A"/>
<input type="button" class="btn btn-primary btn-responsive" value="AB"/>
<input type="button" class="btn btn-primary btn-responsive" value="ABC"/>
<input type="button" class="btn btn-primary btn-responsive" value="ABCD"/>
<input type="button" class="btn btn-primary btn-responsive" value="ABCDE"/>
<input type="button" class="btn btn-primary btn-responsive" value="ABCD"/>
<input type="button" class="btn btn-primary btn-responsive" value="ABC"/>
<input type="button" class="btn btn-primary btn-responsive" value="AB"/>
</div>
</div>
</div>
<br/>
<br/>
<br/>
<p>the buttons above don't take full width of the container</p>
</div>
CSS : i have removed padding from 'column' and removed margin from buttons insided button group
.btn-group>input.btn {
width:12.5%;
}
.no-padding {
padding-left: 0 !important;
padding-right: 0 !important;
}
.my-btn-group .btn+.btn {
margin-left: 0px;
}
If using Flexbox isn't the best option for your use case then you can use a table layout. Another advantage is the control you have with regard to responsive behavior since the default btn-group doesn't offer much in this regard.
These elements behave like <table> HTML elements. It defines a
block-level box.
Basic Example: Run with FullPage
/*Basic Rules*/
.panel-btn {
width: 100%;
display: table;
}
.panel-btn div {
display: table-cell;
}
.panel-btn div .btn {
float: none;
width: 100%;
border-radius: 0;
}
/*Rounded Corner Rules*/
.panel-btn div:first-of-type .btn {
border-bottom-left-radius: 4px;
border-top-left-radius: 4px;
}
.panel-btn div:last-of-type .btn {
border-bottom-right-radius: 4px;
border-top-right-radius: 4px;
}
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
<h2>11 Buttons</h2>
<div class="panel panel-default panel-btn">
<div>
<input type="button" class="btn btn-primary" value="A" />
</div>
<div>
<input type="button" class="btn btn-primary" value="AB" />
</div>
<div>
<input type="button" class="btn btn-primary" value="ABC" />
</div>
<div>
<input type="button" class="btn btn-primary" value="ABCD" />
</div>
<div>
<input type="button" class="btn btn-primary" value="ABCDEF" />
</div>
<div>
<input type="button" class="btn btn-primary" value="ABCDEFG" />
</div>
<div>
<input type="button" class="btn btn-primary" value="ABCDEFGH" />
</div>
<div>
<input type="button" class="btn btn-primary" value="ABCDEFGHI" />
</div>
<div>
<input type="button" class="btn btn-primary" value="1" />
</div>
<div>
<input type="button" class="btn btn-primary" value="12" />
</div>
<div>
<input type="button" class="btn btn-primary" value="123" />
</div>
</div>
</div>
Responsive Example: Run with FullPage and reduce the browser window
/*Basic Rules*/
.panel-btn {
width: 100%;
display: table;
}
.panel-btn div {
display: table-cell;
}
.panel-btn div .btn {
float: none;
width: 100%;
border-radius: 0;
}
/*Rounded Corner Rules*/
.panel-btn div:first-of-type .btn {
border-bottom-left-radius: 4px;
border-top-left-radius: 4px;
}
.panel-btn div:last-of-type .btn {
border-bottom-right-radius: 4px;
border-top-right-radius: 4px;
}
/*Responsive CSS*/
#media screen and (max-width: 850px) {
.panel-btn div {
width: 50%;
}
.panel-btn div:nth-child(even) {
float: right;
}
.panel-btn div:nth-child(odd) {
float: left;
}
.panel-btn div:last-child:not(:nth-child(even)) {
width: 100%;
display: block;
}
/*Rounded Corner Rules*/
.panel-btn div:first-of-type .btn {
border-bottom-left-radius: 0px;
border-top-left-radius: 4px;
}
.panel-btn div:nth-child(2) .btn {
border-top-right-radius: 4px;
}
.panel-btn div:last-of-type .btn {
border-bottom-right-radius: 4px;
border-top-right-radius: 0px;
}
.panel-btn div:last-child:not(:nth-child(even)) .btn {
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
}
.panel-btn div:nth-last-child(2):not(:nth-child(even)) .btn {
border-bottom-left-radius: 4px;
}
}
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container-fluid">
<h2>11 Buttons</h2>
<div class="panel panel-default panel-btn">
<div>
<input type="button" class="btn btn-primary" value="A" />
</div>
<div>
<input type="button" class="btn btn-primary" value="AB" />
</div>
<div>
<input type="button" class="btn btn-primary" value="ABC" />
</div>
<div>
<input type="button" class="btn btn-primary" value="ABCD" />
</div>
<div>
<input type="button" class="btn btn-primary" value="ABCDEF" />
</div>
<div>
<input type="button" class="btn btn-primary" value="ABCDEFG" />
</div>
<div>
<input type="button" class="btn btn-primary" value="ABCDEFGH" />
</div>
<div>
<input type="button" class="btn btn-primary" value="ABCDEFGHI" />
</div>
<div>
<input type="button" class="btn btn-primary" value="1" />
</div>
<div>
<input type="button" class="btn btn-primary" value="12" />
</div>
<div>
<input type="button" class="btn btn-primary" value="123" />
</div>
</div>
<br/>
<h2>10 Buttons</h2>
<div class="panel panel-default panel-btn">
<div>
<input type="button" class="btn btn-danger" value="123456789" />
</div>
<div>
<input type="button" class="btn btn-danger" value="12345678" />
</div>
<div>
<input type="button" class="btn btn-danger" value="1234567" />
</div>
<div>
<input type="button" class="btn btn-danger" value="123456" />
</div>
<div>
<input type="button" class="btn btn-danger" value="12345" />
</div>
<div>
<input type="button" class="btn btn-danger" value="1234" />
</div>
<div>
<input type="button" class="btn btn-danger" value="123" />
</div>
<div>
<input type="button" class="btn btn-danger" value="12" />
</div>
<div>
<input type="button" class="btn btn-danger" value="1" />
</div>
<div>
<input type="button" class="btn btn-danger" value="A" />
</div>
</div>
<br/>
<h2>9 Buttons</h2>
<div class="panel panel-default panel-btn">
<div>
<input type="button" class="btn btn-success" value="A" />
</div>
<div>
<input type="button" class="btn btn-success" value="AB" />
</div>
<div>
<input type="button" class="btn btn-success" value="ABC" />
</div>
<div>
<input type="button" class="btn btn-success" value="ABCD" />
</div>
<div>
<input type="button" class="btn btn-success" value="ABCDEF" />
</div>
<div>
<input type="button" class="btn btn-success" value="ABCDEFG" />
</div>
<div>
<input type="button" class="btn btn-success" value="ABCDEFGH" />
</div>
<div>
<input type="button" class="btn btn-success" value="ABCDEFGHI" />
</div>
<div>
<input type="button" class="btn btn-success" value="1" />
</div>
</div>
<br/>
<h2>20 Buttons</h2>
<div class="panel panel-default panel-btn">
<div>
<input type="button" class="btn btn-warning" value="1" />
</div>
<div>
<input type="button" class="btn btn-warning" value="2" />
</div>
<div>
<input type="button" class="btn btn-warning" value="3" />
</div>
<div>
<input type="button" class="btn btn-warning" value="4" />
</div>
<div>
<input type="button" class="btn btn-warning" value="5" />
</div>
<div>
<input type="button" class="btn btn-warning" value="6" />
</div>
<div>
<input type="button" class="btn btn-warning" value="7" />
</div>
<div>
<input type="button" class="btn btn-warning" value="8" />
</div>
<div>
<input type="button" class="btn btn-warning" value="9" />
</div>
<div>
<input type="button" class="btn btn-warning" value="10" />
</div>
<div>
<input type="button" class="btn btn-warning" value="11" />
</div>
<div>
<input type="button" class="btn btn-warning" value="12" />
</div>
<div>
<input type="button" class="btn btn-warning" value="13" />
</div>
<div>
<input type="button" class="btn btn-warning" value="14" />
</div>
<div>
<input type="button" class="btn btn-warning" value="15" />
</div>
<div>
<input type="button" class="btn btn-warning" value="16" />
</div>
<div>
<input type="button" class="btn btn-warning" value="17" />
</div>
<div>
<input type="button" class="btn btn-warning" value="18" />
</div>
<div>
<input type="button" class="btn btn-warning" value="19" />
</div>
<div>
<input type="button" class="btn btn-warning" value="20" />
</div>
</div>
</div>
I am struggling to make this to work.
All I want is to open a bootstrap modal to open on the click of a button without refreshing the page.
Following is the modal
<div class="modal fade" id="myModal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<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"><asp:Label ID="lblModalTitle" runat="server" Text="Send Confirmation"></asp:Label></h4>
</div>
<div class="modal-body">
<asp:Label ID="lblModalBody" runat="server" Text="Are you sure?"></asp:Label>
</div>
<div class="modal-footer">
<asp:Button ID="SendToBillingBtn" runat="server" CssClass="btn btn-primary" Text="Yes" OnClick="SendToBillingBtn_Click" />
<button class="btn btn-primary" data-dismiss="modal" aria-hidden="true">No</button>
</div>
</div>
</div>
The button is
<asp:Button ID="TransferFileBtn" runat="server" CssClass="btn btn-primary" Text="Transfer file" OnClick="TransferFileBtn_Click" />
and in codebehind I have
protected void TransferFileBtn_Click(object sender, EventArgs e)
{
ScriptManager.RegisterStartupScript(Page, Page.GetType(), "myModal", "$('#myModal').modal();", true);
}
I have used the following link as a reference Display Bootstrap Modal from Asp.Net Webforms
On the button click, I do see the modal popup but the page reloads. How can I avoid page to reload?
Thank you
If you do not need to postback to server, you can simply use standard input or button tag.
<button type="button" class="btn btn-primary"
data-toggle="modal" data-target="#myModal"> Launch demo modal </button>
Or just return false in client click event.
<asp:Button ID="TransferFileBtn" runat="server"
CssClass="btn btn-primary" Text="Transfer file"
OnClientClick="$('#myModal').modal(); return false;" />
How I tested
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="DemoWebForm.Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
</head>
<body>
<form id="form1" runat="server">
<button type="button" class="btn btn-primary"
data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<asp:Button ID="TransferFileBtn" runat="server"
CssClass="btn btn-primary" Text="Transfer file"
OnClientClick="$('#myModal').modal(); return false;" />
<div class="modal fade" id="myModal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<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">
<asp:Label ID="lblModalTitle" runat="server" Text="Send Confirmation"></asp:Label></h4>
</div>
<div class="modal-body">
<asp:Label ID="lblModalBody" runat="server" Text="Are you sure?"></asp:Label>
</div>
<div class="modal-footer">
<asp:Button ID="SendToBillingBtn" runat="server" CssClass="btn btn-primary"
Text="Yes" OnClick="SendToBillingBtn_Click" />
<button class="btn btn-primary" data-dismiss="modal" aria-hidden="true">No</button>
</div>
</div>
</div>
</div>
</form>
</body>
</html>
As I'm not an expert on ASP. so im not sure about this but try removing runat="server" from your button.
Please find the code,Hope this will help you.
**//Button**
<asp:Button ID="TransferFileBtn" runat="server" CssClass="btn btn-primary" Text="Transfer file" OnClientClick="onTest();return false;" />
**//Popup code:**
<div class="modal fade" id="modalTest" tabindex="-1" role="dialog"
aria-labelledby="exampleModalLabel" aria-hidden="true" style="width: 100%; height: 100%;">
<div class="modal-dialog">
<div class="modal-content" style="height: 700px">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="H2">
<asp:Label runat="server" ID="lblRSF" Text=""></asp:Label></h4>
</div>
<div class="modal-body">
**//Used Iframe**
<iframe runat="server" frameborder="0" id="frmExample" runat="server" style="width: 100%; height: 600px; overflow: hidden;"></iframe>
</div>
</div>
</div>
</div>
**//Js function
function onTest() {
$("#<%=lblRSF.ClientID%>").text("Demo");
//Admin/Example.aspx (write whatever you want to show in the popup)
$("#<%=frmMapExample.ClientID%>").attr("src", "../Admin/Example.aspx);
$('#modalTest').modal('show');
}