I'm using tabs on Bootstrap: in this example I have 4 tabs and use some ASP.NET WebControls within them, like DropdownLists, Buttons and TextBoxes.
When I select dropdownlist item or click a buttons, lost previous and actual selected tab state and cannot recover it.
<script src="/Scripts/bootstrap-tabs.js" type="text/javascript"></script>
<script>
$(function(){
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
// Get the name of active tab
var activeTab = $(e.target).text();
// Get the name of previous tab
var previousTab = $(e.relatedTarget).text();
$(".active-tab span").html(activeTab);
$(".previous-tab span").html(previousTab);
});
});
</script>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Panel ID="Panel1" runat="server" GroupingText="Selección Fecha">
<ul id="profileTabs2" class="nav nav-tabs">
<li>uno</li>
<li>dos</li>
<li>tres</li>
<li>cuatro</li>
</ul>
<div class="tab-content" id="myTabContent2">
<div id="detallepagosactividad" class="tab-pane fade">
some text
</div>
<div id="detallefacturacion" class="tab-pane fade">
other text
</div>
<div id="detallefacturacion2" class="tab-pane fade">
<asp:Button ID="Button1" runat="server" Text="Button" />
</div>
<div id="detallefacturacion3" class="tab-pane fade">
<asp:Button ID="Button2" runat="server" Text="Button" />
</div>
</div>
<hr>
<p class="active-tab"><strong>Active Tab</strong>: <span></span></p>
<p class="previous-tab"><strong>Previous Tab</strong>: <span></span></p>
<hr>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
Bootstrap TabContainer is a html control and not a asp.net webcontrol. Thus no state is maintained for the tab container. But on a postback the the entire update panel content is replaced with the new content from server. This is what is resetting you tab settings (in fact, the css class "active" is removed from the previously selected tabs)
You have to rethink your update panel arrangement. Instead of wrapping your entire bootstrap tabcontainer into a updatepanel you should break up your update panel into multiple smaller ones. Like so:
<asp:Panel ID="Panel1" runat="server" GroupingText="Selección Fecha">
<ul id="profileTabs2" class="nav nav-tabs">
<li>uno</li>
<li>dos</li>
<li>tres</li>
<li>cuatro</li>
</ul>
<div class="tab-content" id="myTabContent2">
<div id="detallepagosactividad" class="tab-pane fade">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
some text
</ContentTemplate>
</asp:UpdatePanel>
</div>
<div id="detallefacturacion" class="tab-pane fade">
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
some text
</ContentTemplate>
</asp:UpdatePanel>
</div>
<div id="detallefacturacion2" class="tab-pane fade">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Button ID="Button1" runat="server" Text="Button" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
<div id="detallefacturacion3" class="tab-pane fade">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Button ID="Button2" runat="server" Text="Button" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
</div>
<hr>
<p class="active-tab"><strong>Active Tab</strong>: <span></span></p>
<p class="previous-tab"><strong>Previous Tab</strong>: <span></span></p>
<hr>
</asp:Panel>
On this way you gain more control over what content you want to update. Additionally on postbacks your tabs and tabpanes won´t be reset to initial state
First use a hidden control to store the index of the selected tab:
The initial value should be (1) which is the first tab:
User onclick or OnClientClick at the anchor or LinkButtons to set the hidden field value for example:
<li>uno</li>
<li>dos</li>
<script type="text/javascript">
function SelectTab(tab) {
document.getElementById('<%=hdnTab.ClientID %>').value = tab;
}
</script>
Put this javascript at the end of your html and before the < /body> tag
<script type="text/javascript">
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function (s, e) {
FixTabs();
});
</script>
Now place FixTabs javascript function at the begining and will run at every completed postback. In this function just simply get the selected tab and set its class to "active".
<script type="text/javascript">
function FixTabs() {
var tabIndex = document.getElementById('<%=hdnTab.ClientID%>').value;
var t1 = document.getElementById("detallepagosactividad");
var t2 = document.getElementById("detallefacturacion");
//do same for the rest of tabs
t1.setAttribute('class', '');
t2.setAttribute('class', '');
if (tabIndex == "1")
t1.setAttribute('class', 'active');
else if (tabIndex == "2")
t2.setAttribute('class', 'active');
}
</script>
Hope this helps..
Related
I have an asp.net webform and I want to validate the textboxes first
Then after that (after success), go to the behind code cs
but now when I press the button it doesn't work
the jquery code:
...
<script type="text/javascript">
(function () {
'use strict';
window.addEventListener('load', function () {
var form = document.getElementById('needs-validation');
form.addEventListener('submit', function (event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
}, false);
})();
</script>
...
the aspx page:
...
<div class="form-row" style="z-index:1">
<div class="form-group col-md-4" style="z-index:1">
<label for="inputEmail4">Birth Date</label>
<asp:TextBox ID="Birth_Date" class="form-control" runat="server" style="text-align:center" ValidationGroup="check" required></asp:TextBox>
<cc1:CalendarExtender ID="CalendarExtender1" runat="server" Enabled="True" TargetControlID="Birth_Date" Format="dd/MM/yyyy">
</cc1:CalendarExtender>
<div class="invalid-feedback">
enter date
</div>
</div></div>
<div class="form-row">
<div class="form-group col-md-4">
<label for="inputEmail4">phone number</label>
<asp:TextBox ID="Phone" class="form-control" runat="server" style="text-align:center; z-index:-1" ValidationGroup="check" pattern="^\d{10}$" required></asp:TextBox>
<div class="invalid-feedback">
enter phone
</div>
</div>
</div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:LinkButton ID="signup" runat="server" CssClass="btn btn-outline-success my-2 my-sm-0">save</asp:LinkButton>
</ContentTemplate>
</asp:UpdatePanel>
...
the cs code:
...
protected void signup_Click1(object sender, EventArgs e)
{
if(Page.IsValid)
{
Birth_Date.Text = "ُWelcome";
}
}
...
I have more textbox in my aspx page
<script type="text/javascript">
function ftn(){
'use strict';
window.addEventListener('load', function () {
var form = document.getElementById('needs-validation');
form.addEventListener('submit', function (event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
}, false);
}
</script>
and add onclientclick property to asp:button
<asp:LinkButton ID="signup" onclientclick="ftn()" runat="server" CssClass="btn btn-outline-success my-2 my-sm-0">save</asp:LinkButton>
I am trying to stream a file from Azure Media Player within a Modal Popup.
The html for this popup is generated on the GridView's rowcommand to bind the relative .manifest file to the video source
protected string BuildRecordingPlayback(string videoURL)
{
StringBuilder Playback = new StringBuilder();
//FIRST CLOSE ATTEMPT
////Playback.Append("<video id=\"vid1\" class=\"azuremediaplayer amp-flush-skin\" autoplay controls width=\"250\" height=\"100\" data-setup='{\"nativeControlsForTouch\": false}'>");
//FIRST CLOSEST ATTEMPT
Playback.Append("<video id=\"vid1\" class=\"azuremediaplayer amp-flush-skin\" width=\"250\" height=\"100\" autoplay controls>");
Playback.Append("<source src=\"" + videoURL + "\" type=\"audio/mp3\" />");
Playback.Append("<p class=\"amp-no-js\">To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video</p></video>");
return Playback.ToString();
}
Here is the relevant RowCommand event
if (e.CommandName == "InvoiceIncident")
{
divRecording.InnerHtml = BuildRecordingPlayback(drIncident["StreamingUrl"].ToString());
upRecording.Update();
ScriptManager.RegisterStartupScript(Page, Page.GetType(), "modalIncidentRec", "$('#modalIncidentRec').modal();", true);
}
As for the aspx page a standard modal popup
<div class="modal fade" id="modalIncidentRec" role="dialog" aria-labelledby="modalIncidentRec" aria-hidden="true">
<div class="modal-dialog">
<asp:UpdatePanel ID="upRecording" 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="Label1" runat="server" Text=""></asp:Label></h4>
</div>
<div class="modal-body" id="modal-body rec">
<asp:Label ID="Label2" runat="server" Text=""></asp:Label>
<div id="divRecording" runat="server">
<%--video goes here--%>
</div>
</div>
</div>
<div class="modal-footer">
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</div>
I have tried various other ways including
Creating the blank video tags and assigning the source in javascript as per this example changing source on html5 video tag
I have also tried the Documented version (which is filled with syntax errors) http://amp.azure.net/libs/amp/latest/docs/index.html#quick-start
The code for that below
<script type="text/javascript">
function AzureVideoTag(sourceSQL) {
var myOptions = {
"nativeControlsForTouch": false,
controls: true,
autoplay: true,
width: "640",
height: "400",
}
myPlayer = amp("azuremediaplayer", myOptions);
myPlayer.src([
{
"src": sourceSQL,
"type": "audio/mp3"
}
]);
}
</script>
<script type="text/javascript">
function AssignVideoTag(sourceSQL) {
var video = document.getElementById('vid3');
var source = document.createElement('source');
source.setAttribute('src', sourceSQL);
video.appendChild(source);
video.play();
setTimeout(function () {
video.pause();
source.setAttribute('src', 'http://www.tools4movies.com/trailers/1012/Despicable%20Me%202.mp4');
video.load();
video.play();
}, 3000);
}
</script>
...
<div id="divRecording" runat="server">
<%--video goes here--%>
<video id="vid2" autoplay controls width="250" height="200">
<source src="http://amssamples.streaming.mediaservices.windows.net/91492735-c523-432b-ba01-faba6c2206a2/AzureMediaServicesPromo.ism/manifest" type="application/vnd.ms-sstr+xml" />
<p class="amp-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video</p>
</video>
<video id="vid3" width="250" height="200"></video>
Any assistance would be highly appreciated, I have been stuck on this for days now -_-
I am trying to change the css style of the repeater to a different color on different status. The expected output is to print 6 different statuses like: In progress, complete, withdrawn so on.. Currently it has a single color, so it shows one color only. the challenging part here is to change the color dynamically based on the status. how do I achieve this? Currently it pulls the style based on "status noAction text-center" class below. Should I make any changes in the code behind or is it just a front end css change. Can someone provide me an example please.
.aspx code:
<div class="row">
<asp:Repeater ID="rptStatuses" runat="server">
<ItemTemplate>
<div class="col-md-4 col-sm-4">
<div class="status noAction text-center">
<div class="banner">
<asp:Label runat="server"> <%# Eval("ID") %></asp:Label>
</div>
<div class="label"><%# Eval("Name") %></div>
</div>
</div>
</ItemTemplate>
</asp:Repeater>
.cs code relevant part
private void GB()
{
var surveyId = 55;
var stateLabels = _manageDatasets.GetStateLabels(surveyId);
List<Status> statusesList = new List<Status>();
foreach (var sl in stateLabels)
{
if (sl.Key != -1)
statusesList.Add(new Status { ID = sl.Key.ToString(), Name = sl.Value }
);
}
this.rptStatuses.DataSource = statusesList;
this.rptStatuses.DataBind();
}
I think what you want to do is change the class in the your html and just use the embedded code to be able to dynamically change the banner color, etc. based on the status. The embedded code that you want would look something like this -
<div class="col-md-4 col-sm-4">
<% if(status == "noAction") { %>
<div class="status noAction text-center">
<div class="banner">
<asp:Label runat="server"> <%# Eval("ID") %></asp:Label>
</div>
<div class="label"><%# Eval("Name") %></div>
</div>
<% } %>
If you have any column in you table from where repeater is getting datasource then that would be pretty easy to do
something like that
<asp:Repeater ID="rptStatuses" runat="server">
<ItemTemplate>
<div class="col-md-4 col-sm-4">
<div class='<%# Convert.toInt32(eval("ActionColumnName"))==1 ? "status In progress text-center" : Convert.toInt32(eval("ActionColumnName"))==2 ? "status complete text-center" : Convert.toInt32(eval("ActionColumnName"))==3 ? "status withdrawn text-center" : "status noAction text-center" '>
<div class="banner">
<asp:Label runat="server"> <%# Eval("ID") %></asp:Label>
</div>
<div class="label"><%# Eval("Name") %></div>
</div>
</div>
</ItemTemplate>
</asp:Repeater>
I am trying to loop few div's in aspx. This the code I would like to loop:
<div class="col-md-3 product-men">
<div class="men-pro-item simpleCart_shelfItem">
<div class="men-thumb-item">
<img src="uploadImage/3.png" class="pro-image-front" />
<img src="uploadImage/3.png" class="pro-image-back" />
</div>
<div class="item-info-product ">
<h4>Tie Clip</h4>
<div class="info-product-price">
<span class="item_price">RM100</span>
</div>
Add to cart
</div>
</div>
</div>
The page looks like below:
the cart need to loop. I have tried using c# as below:
StringBuilder cart = new StringBuilder();
for (int x = 0; x < 3; x++) {
cart.Append(" <div class=\"col - md - 3 product - men\">");
cart.Append("<div class=\"men - pro - item simpleCart_shelfItem\">");
cart.Append("<div class=\"men - thumb - item\">");
cart.Append("<img src = uploadImage/1.jpg class='pro - image - front />");
cart.Append("<img src = uploadImage/1.jpg class=pro - image - back />");
cart.Append("</div>");
cart.Append(" <div class=\"item - info - product \">");
cart.Append("<h4><a href = \"single.html\" > Tie Clip</a></h4>");
cart.Append("<div class=\"info - product - price\">");
cart.Append("<span class=\"item_price\">RM100</span>");
cart.Append("</div>");
cart.Append("Add to cart");
cart.Append("</div>");
cart.Append("</div>");
cart.Append("</div>");
}
Literal1.Text = cart.ToString();
This don't seem work out.. Any idea how to get this cart loop?
You should use Embedded Code Blocks in the .aspx itself instead of .cs.
You would normally use a asp.net Control for that, like a Repeater.
<asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>
<div class="col-md-3 product-men">
<div class="men-pro-item simpleCart_shelfItem">
<div class="men-thumb-item">
<img src="uploadImage/<%# Eval("product_image_front") %>" class="pro-image-front" />
<img src="uploadImage/<%# Eval("product_image_back") %>" class="pro-image-back" />
</div>
<div class="item-info-product ">
<h4><%# Eval("product_name") %></h4>
<div class="info-product-price">
<span class="item_price"><%# Eval("product_price") %></span>
</div>
<asp:LinkButton ID="LinkButton1" CommandArgument='<%# Eval("product_id") %>' runat="server" CssClass="item_add single-item hvr-outline-out button2">Add to cart</asp:LinkButton>
</div>
</div>
</div>
</ItemTemplate>
</asp:Repeater>
Then in code behind you would assign a DataSource to the Repeater.
Repeater1.DataSource = source;
Repeater1.DataBind();
Code in aspx Page
<asp:Literal ID="ltrMessage" runat="server"></asp:Literal>
Code Snippet in cs page.
for(int i=0;i<limit;i++)
{
ltrMessage.Text+=#"<div class='col-md-3 product-men'>
<div class='men-pro-item simpleCart_shelfItem'>
<div class='men-thumb-item'>
<img src='uploadImage/3.png' class='pro-image-front' />
<img src='uploadImage/3.png' class='pro-image-back' />
</div>
<div class='item-info-product '>
<h4><a href='single.html'>Tie Clip</a></h4>
<div class=''info-product-price'>
<span class='item_price'>RM100</span>
</div>
<a href='#' class='item_add single-item hvr-outline-out button2'>Add to cart</a>
</div>
</div>
</div>";
}
I have a Products page which displays a list of products. When i click Details button, i want to show product details in a bootstrap modal popup.
I want to get one of the product detail but this code gets all products details.
how can i fix this query:
.aspx code:
<asp:Repeater ID="rpProducts" runat="server">
<ItemTemplate>
<td> <div class="btn-ud" ><a href="<%#Eval("ProductID") %>" data-toggle="modal" data-target="#myModal2" class="btn btn-custom-3 btn-sm"/ >Details</a> </div> </td>
</ItemTemplate>
</asp:Repeater>
modal popup code:
<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-hidden="true">
<asp:Repeater ID="rpProductDetails" runat="server">
<ItemTemplate>
<tbody>
<td height="100px"> <%#Eval("ProductDetails")%> </td>
<td height="100px"> <%#Eval("ProductDetails")%> </td>
</tbody>
</ItemTemplate>
</asp:Repeater>
</div>
c# code:
DataTable dtProductsDetails = system.GetDataTable("Select ProductDetails,TechDetails,Standards, ApplicationArea from TBLPRODUCTS where ProductID = ProductID");
if (dtProductsDetails.Rows.Count > 0)
{
rpProductDetails.DataSource = dtProductsDetails;
rpProductDetails.DataBind();
}
<script type="text/javascript">
function openModal() {
$('#myModal').modal('show');
}
</script>
In your c# code add an event for linkbutton like
protected void lbEdit_Click(object sender, EventArgs e) {
ScriptManager.RegisterStartupScript(this,this.GetType(),"Pop","openModal();", true);
}
You have to use jQuery for this:
$("a").click(function(){
$("#myModal2").modal("show");
});