Changing Tabs with AspxPageControl - javascript

I have a problem about changing tabs in my AspxPageControl.I use this tool for showing my web pages dynamically. When I change my active tab, the old tab vanishes. I searched a bit and found this problem can be fixed with saving states in cache or session.
However I am really rookie about developing web apps. How can I do that ? I also used jquery ui on my project but it didn't work. So I changed my project with this tool. Also I could take advice about tabpages that have dynamic webpages in.
This button basicly adds a new page on my tab and set active page this tab:
protected void bt_yeniEklenenler_Click(object sender, EventArgs e)
{
YeniEklenen_count= YeniEklenen_count + 1;
TabPage tab = new TabPage();
tab.Text = "Yeni Eklenenler";
tab.Name = "tab_yenieklenenler" + YeniEklenen_count.ToString();
LiteralControl l = new LiteralControl("<iframe src='YeniEklenenler.aspx' runat='client' id='frm2' style='width: 99 %; height: 78vh; margin - top:20px'></ iframe >");
l.ID = "lit_yenieklenenler" + YeniEklenen_count.ToString();
tab.Controls.Add(l);
ASPxPageControl1.TabPages.Add(tab);
ASPxPageControl1.ActiveTabPage = ASPxPageControl1.TabPages.FindByName(tab.Name);
}
And my design source:
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:ScriptManager runat="server" ID="ScriptManager1">
</asp:ScriptManager>
<asp:Button ID="bt_yeniEklenenler" runat="server" OnClick="bt_yeniEklenenler_Click" Text="Yeni Eklenenler" OnClientClick="ButtonClick();" />
<asp:Button ID="bt_kampanya" runat="server" Text="Kampanya" OnClick="bt_kampanya_Click" />
<asp:Button ID="bt_fiyatListesi" runat="server" Text="Fiyat Listesi" OnClick="bt_fiyatListesi_Click" />
<asp:Button ID="bt_sepetim" runat="server" Text="Sepetim" OnClick="bt_sepetim_Click" />
<asp:Button ID="bt_siparisListesi" runat="server" Text="Sipariş Listesi" OnClick="bt_siparisListesi_Click" />
<asp:Button ID="bt_firmaBilgileri" runat="server" Text="Firma Bilgileri" OnClick="bt_firmaBilgileri_Click" />
<asp:Button ID="bt_cariHareket" runat="server" Text="Cari Hareket" OnClick="bt_cariHareket_Click" />
<asp:Button ID="Button2" runat="server" OnClick="Button1_Click" Text="KAPAT" />
<dx:ASPxPageControl runat="server" ActiveTabIndex="0" RenderMode="Lightweight" Width="1146px" Height="555px" ID="ASPxPageControl1" OnActiveTabChanged="ASPxPageControl1_ActiveTabChanged" AutoPostBack="True">
<TabPages>
<dx:TabPage Text="Ana Sayfa">
<ContentCollection>
<dx:ContentControl runat="server" SupportsDisabledAttribute="True">
<h1 style="text-align:center">_____ SİSTEMİNE HOŞGELDİNİZ...</h1>
<h1 style="text-align:center"> </h1>
<h1 style="text-align:center">
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="KAPAT" />
</h1>
</dx:ContentControl>
</ContentCollection>
</dx:TabPage>
</TabPages>
</dx:ASPxPageControl>
</ContentTemplate>
</asp:UpdatePanel>
Note: I tried turn on AutoPostBack also, but then my tab don't change when I click another tab.
Thanks in advance :)

Refer these:
ASPxPageControl - how to add a new page using Client-Side Scripts
ASPxPageControl - How to add tab on client side
AspxPageControl add tabpage dynamically
You can try adding a tab page using the javascript(client side methods) and after that you can set the active tab. Try using the the client side ASPxClientTabControlBase.SetActiveTab method
ASPxPageControl how to ActiveTabChanged event after client side event to get data first
ASPxPageControl clientside event ActiveTabChanged
ASPxPageControl - How to set an active tab on the client-side
Hope these help you to implement the functionality as you want to do.

Related

How to get client side value from server side using VB.NET?

I have an ASPX page where I set data with JS but I am having a bad time trying to get this data from VB.
This is a simplified version of what I have...
ASPX:
<body onload="DoStuff();">
<script>
function DoStuff() {
var myvalue = document.getElementById('lblValue');
myvalue.textContent = "blah";
console.log (myvalue.textContent); // just to be sure that the value IS there
}
</script>
<div style="display:block">
<asp:label id="lblText" visible="true" runat="server">Text: </asp:label><asp:label id="lblValue" runat="server" visible="true" ></asp:label><br /><br />
<asp:label id="lblMsg" visible="true" runat="server" >Message: </asp:label><asp:label id="lblMsgValue" runat="server" visible="true" >Click button...</asp:label><br /><br />
<asp:Button id="btnGo" Text="Go" OnClick="btnGo_Click" runat="server"/>
</div>
</body>
ASPX.VB:
Protected Sub btnGo_Click(sender As Object, e As EventArgs)
lblMsgValue.Text = "The value is *" & lblValue.Text & "*"
End Sub
I am always getting nothing as output. Any idea?
How interesting. I had NEVER noticed that a label set client side does NOT persist.
Note that if you use code behind, set a label.Text, then the label DOES persist and survive a round trip. However, setting the label in JS? Well, you see the browser udpate instant, but when you post back, you lose that text.
This means you need to use say a text box - they DO persist, and even when changed client side.
So, for example this code:
<asp:Button ID="Button2" runat="server"
Text="Js Code" Width="114px"
OnClientClick="setlabel();return false" />
<br />
<asp:Label ID="Label1" runat="server" Text="a" ClientIDMode="Static" ViewStateMode="Enabled"></asp:Label>
<br />
<asp:TextBox ID="TextBox1" runat="server" ClientIDMode="Static"></asp:TextBox>
<script>
function setlabel() {
vlable = document.getElementById("Label1");
vlable.innerHTML = 'Hello how are you';
vtextBox = document.getElementById("TextBox1")
vtextBox.value = "Js setup text box"
}
</script>
So, after we run the above button (js), then both the text box, and the label will update and you see the results in the browser.
However, now drop in another button like this:
<asp:Button ID="Button1" runat="server" Height="26px" Text="Set Lable" Width="129px" />
And code behind:
Protected Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click
Debug.Print(Label1.Text)
Debug.Print("Text box = " & TextBox1.Text)
End Sub
Output (after running client side js button).
a
Text box = Js setup text box
So we see the Text="a" of the label, while it did change in the browser, when we post back, it does not survive WHEN changed client side.
As noted, if code behind changes a label - it does persist, and does survive around trips. But the label does not.
However, a text box, or hidden field and most controls that show/have the ability to hold data or a value will survive - labels are just not one of those controls.

Populating existing dropdownlist using AsyncPostBackTrigger, not populate a new dropdownlist

For my web app, I tried to populate dropdownlist (DDL) based on what client click on the calendar extender ( I have this declared in codebehind vb.net to load it from database) using AsyncPostBackTrigger (because I dont want the page to autopostback). I have the button to fire the date selected and it did worked to populate the DDL except not really the way I wanted it to. Instead of updating it in the existing DDL, it creates a new DDL besides the existing ones. I tried looking for solution but did not managed to find any. Anyone can help me figure out why this happens and how to fix this?
Here's my asp.net & javascript code
<asp:Label ID="label16" runat = "server" Text="Select the date"></asp:Label></td>
<td id="Td29" style="width:290px;" runat="server">
<asp:TextBox ID="tbPostingDt" runat="server" style ="width:174px;"></asp:TextBox>
<asp:Button ID="ClickBtn" runat="server" Text="Click" style="display:none" OnClick="ClickBtn_Click" />
<asp:ImageButton ID="CalendarBtnPostingDt" runat="server" ImageUrl="~/Images/Calendar_scheduleHS.png" AlternateText="Click to display calendar"/>
<cc1:CalendarExtender ID="calPost" runat="server" PopupButtonID="CalendarBtnPostingDt"
TargetControlID="tbPostingDt" OnClientDateSelectionChanged="dateSelectionChanged" Format="dd-MMM-yyyy" Enabled="True"></cc1:CalendarExtender></td>
<asp:UpdatePanel ID="UpdatePanel" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Label ID="label18" runat = "server" Text="Post Cycle No"></asp:Label></td>
<td id="Td33" style="width:290px;" runat="server">
<asp:DropDownList ID = "ddlPostCycleNo" runat = "server" style ="width:180px;">
<asp:ListItem>ALL</asp:ListItem>
</asp:DropDownList> </td>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ClickBtn" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
function dateSelectionChanged(sender, args) {
var PostingDt = document.getElementById('<%= tbPostingDt.ClientID%>').value.trim();
var clickButton = document.getElementById("<%= ClickBtn.ClientID %>");
clickButton.click();
}
nevermind I figured it out already. I used the ontextChanged for the textbox when user select the date from calendar, and removed OnClientDateSelectionChanged, triggers and dummy button. I keep the UpdatePanel and it works just the way I wanted.

Button click event in aspx

I'm using Page with tabs, In 3rd tab i have search functionality But whenever i click search button page will reload and it will move to first tab.
I need tab should stay constant after button click, How can i do that?
<body class='default'>
<div id='jqxWidget'>
<div id='jqxTabs'>
<ul>
<li style="margin-left: 30px;">UserTickets</li>
<li>JavaServer Pages</li>
<li>Active Server Pages</li>
<li>Python</li>
<li>Perl</li>
</ul>
<div>
</div>
<div>
</div>
<div>
<form runat="server">
<asp:Button ID="button" runat="server" OnClientClick="javascript:search()" Text="search" />
<asp:Label ID="label" Text="" runat="server"></asp:Label>
</form>
</div>
<div>
</div>
<div>
</div>
</div>
</div>
Thank you
Ajax is probably the best bet in the situation you are in. The best way to describe it is that it will just refresh content on the page that you have wrapped the AJAX around. The problem your having it that on button click it is causing the page to reload therefore going back to the 'Starter' tab.
Here is a small snippet of code I have put together for you and I will explain what to do.
You need to add Nugent Package to your project and add the 'Ajax Control Toolkit'.
At the top of your code you need to add this line. (Think of it as saying 'I want to use the toolkit on this page and i will call it using AjaxControlToolkit')
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="AjaxControlToolkit" %>
Then you need to add the line below to your page.
<AjaxControlToolkit:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></AjaxControlToolkit:ToolkitScriptManager>
Then wrap the lines of code for that tab with these lines of code.
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
</ContentTemplate>
</asp:UpdatePanel>
Make sure that you wrap all the information that tab inside the .
This is a very basic way of using AJAX and it can be used more advanced but this will work.
You can set Tab on Page Load conditionally. Look at this code might it will help you.
var TabNum=(Your Tab Number)
function selecttabs() {
$('[id$="dvInvoiceTab"]').tabs("select", TabNum);
}
You can use update panel. In the third add update panel, below is the sample:
<div id="third-tab">
<form>
<asp:ScriptManager runat="server" ID="ScriptMng"></asp:ScriptManager>
<asp:Button ID="button" runat="server" Text="search" />
<asp:UpdatePanel runat="server">
<ContentTemplate>
<asp:Label ID="label" Text="" runat="server"></asp:Label>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlId="button" />
</Triggers>
</asp:UpdatePanel>
</form>
</div>
In the code behind try test below code
protected void button_Click(object sender, EventArgs e){
label.Text = "Searching without full reload";
}
Hope it's help

Unable to call Javascript function onload a asp:button using ASP.NET4

I am unable to call a Javascript function on the OnLoad event of a asp:button
HTML
<asp:Button ID="btnFromCalOpen" runat="server" Text=" > " onLoad = "AllHide()" OnClientClick ="ShowCal()" />
Javascript
function AllHide() {
alert("Hello");
}
Please Help
You will need to use JavaScript to toggle styles like you are trying
<asp:Button ID="btnFromCalOpen" runat="server" Text="" OnClientClick ="ShowCal()" style="display:none;visiblity:hidden;" />
Original Comment You can't do onLoad with JavaScript for any button. What are you hoping to accomplish? We can help figure out that solution.
You can do it at the page level. The page has a javascript onload event.
You can't do that.
Here's why. The OnLoad event in ASP.NET for a control is fired while the server is building the page (on the web server), but before it sends it to the browser (running on the user's machine).
Code on the web server can't directly call code on the browser computer (which hasn't even got the page yet).
If you just want to hide the control, just do this in your markup:
<asp:Button ID="btnFromCalOpen" runat="server" Text=" > " visible="false" OnClientClick ="ShowCal()" />
Another approach (hidden control doesn't takes up space):
<asp:Button ID="btnFromCalOpen" runat="server" Text=" > " style="display:none;" OnClientClick ="ShowCal()" />
Another approach (hidden control takes up space)
<asp:Button ID="btnFromCalOpen" runat="server" Text=" > " style="visibility:hidden;" OnClientClick ="ShowCal()" />

AjaxControlToolkit:TabPanel

This control has a property Enabled that acts exactly as Visible behaves i.e. ?.Enabled = false hides the control.
I need to be able to keep all the tabs visible but some to be disabled under code control.
Any hints as to how I can achieve this? Thanks.
Try to set Enabled property for TabPanel.
<ajaxToolkit:TabContainer
ID="TabContainer1" runat="server" ActiveTabIndex="0">
<ajaxToolkit:TabPanel ID="TabPanel1" runat="server" HeaderText="TabPanel1"></ajaxToolkit:TabPanel>
<ajaxToolkit:TabPanel ID="TabPanel2" runat="server" HeaderText="TabPanel2"></ajaxToolkit:TabPanel>
<ajaxToolkit:TabPanel ID="TabPanel3" Enabled="False" runat="server" HeaderText="TabPanel3"></ajaxToolkit:TabPanel>
</ajaxToolkit:TabContainer>
Or in code-behind,
TabContainer1.Tabs[0].Enabled = false;
Here is one possible solution using client-side scripting. Basically, handle the OnClientActiveTabChanged event for the TabContainer (which fires whenever the active tab is changed). Then, if the tab is one that you don't want the user to use, change the ActiveTabIndex property of the TabContainer back to one that is acceptable.
Tab Container:
<asp:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="1"
Height="126px" Width="400px" ClientIDMode="Predictable"
onclientactivetabchanged="tabClickCheck" >
<asp:TabPanel ID="TabPanel1" runat="server" HeaderText="TabPanel1">
</asp:TabPanel>
<asp:TabPanel ID="TabPanel2" runat="server" HeaderText="TabPanel2">
</asp:TabPanel>
<asp:TabPanel ID="TabPanel3" runat="server" HeaderText="TabPanel3">
</asp:TabPanel>
</asp:TabContainer>
Javascript handler:
<script type="text/javascript">
function tabClickCheck() {
var tabCont = document.getElementById("<%=TabContainer1.ClientID %>").control;
var tabInd = tabCont.get_activeTabIndex();
tabCont.set_activeTabIndex(2);
}
</script>
This function just sets the ActiveTabIndex to 2, regardless of which tab you clicked (you'll notice I'm also getting the current ActiveTabIndex, but I don't do anything with it - that's just to show you how). Obviously, use whatever logic makes sense for your app =)

Categories