Simple ASP.NET application.
I have two drop-down controls. On the first-drop down I have a JavaScript onChange event. The JavaScript enables the second drop-down and removes a value from it (the value selected in the first drop-down). If they click the blank first value of the drop-down, then the second drop-down will be disabled (and the options reset).
I also have code in the OnPreRender method that will enable or disable the second drop-down based on the value of the first drop-down. This is so that the value of the first drop-down can be selected in code (loading user settings).
My problem is:
The user selects something in the first drop-down. The second drop-down will become enabled through JavaScript.
They then change a third drop-down that initiates a post back. After the post back the drop-downs are in the correct state (first value selected, second drop-down enabled).
If they then click the back button, the second drop-down will no longer be enabled although it should be since there's something selected in the first drop-down.
I've tried adding a startup script (that will set the correct state of the second-drop down) through ClientScript.RegisterStartupScript, however when this gets called the first drop-down has a selectedIndex of 0, not what it actually is. My guess is that the value of the selection gets set after my start script (but still doesn't call the onChange script).
Any ideas on what to try?
If the second dropdown is initially enabled through javascript (I'm assuming this is during a javascript onchange, since you didn't specify), then clicking the back button to reload the previous postback will never enable it.
Mixing ASP.NET with classic javascript can be hairy. You might want to have a look at ASP.NET's Ajax implementation (or the third-party AjaxPanel control if you're forced to use an older ASP.NET version). Those will give you the behaviour that you want through pure C#, without forcing you to resort to javascript hackery-pokery.
<%# Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
protected void indexChanged(object sender, EventArgs e)
{
Label1.Text = " I did something! ";
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Test Page</title>
</head>
<body>
<script type="text/javascript">
function firstChanged() {
if(document.getElementById("firstSelect").selectedIndex != 0)
document.getElementById("secondSelect").disabled = false;
else
document.getElementById("secondSelect").disabled = true;
}
</script>
<form id="form1" runat="server">
<div>
<select id="firstSelect" onchange="firstChanged()">
<option value="0"></option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<select id="secondSelect" disabled="disabled">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<asp:DropDownList ID="DropDownList1" AutoPostBack="true" OnSelectedIndexChanged="indexChanged" runat="server">
<asp:ListItem Text="One" Value="1"></asp:ListItem>
<asp:ListItem Text="Two" Value="2"></asp:ListItem>
</asp:DropDownList>
<asp:Label ID="Label1" runat="server"></asp:Label>
</div>
</form>
<script type="text/javascript">
window.onload = function() {firstChanged();}
</script>
</body>
</html>
Edit: Replaced the whole code. This should work even in your user control.
I believe that Register.ClientScriptBlock is not working because the code you write in that block is executed before window.onload is called. And, I assume (I am not sure of this point) that the DOM objects do not have their values set at that time. And, this is why you are getting selectedIndex as always 0.
Related
The pagemethod works, however when I use the webmethod it refreshes the page destroying the reason to use angular 2 in the first place.
How do I prevent the form from refreshing the page?
index.aspx
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManagerMain"
runat="server"
EnablePageMethods="true" >
</asp:ScriptManager>
<my-app>Loading...</my-app>
</form>
</body>
index.aspx.cs
[WebMethod]
public static string getString()
{
return "Test";
}
app.component.html
<div>
<Button (click)="btnSubmit_Click">test</Button>
</div>
app.component.ts
btnSubmit_Click()
{
var test = window['PageMethods'].getString(this.onSucces, this.onError);
}
note:
At this moment I'm trying to use angular 2 with aspx for the company if it works it might become a standaard for small frontend api's and since its quite limited on information I appreciate any help.
You should make button type as button, because by default button type is submit. button with type submit may lead to post back a page.
<div>
<Button type="button" (click)="btnSubmit_Click()">test</Button>
</div>
Is there any way to bind a datasource to an html select tag with runat=server attribute.
<select runat="server" onchange="showdistrict();" class="textbox" id="DpCity" name="DpCity">
<option value="0">unknow</option>
</select>
I found the answer myself so I'll share it.
by using runat="server" attribute and assigning an id to control it will be accessible in code behind.
for example DpCity is my html select tag so I can use below code for binding datasource:
DpCity.DataTextField = "title";
DpCity.DataValueField = "val";
DpCity.DataSource = SrCity;
DpCity.DataBind();
as like as an asp dropdown list box
I am developing my app in asp.net web forms. The textbox is set like this
<asp:TextBox ID="txt1" runat="server" Enabled="false" ></asp:TextBox>
and this is the corresponding HTML markup
<input name="txt1" type="text" value="1.0" id="txt1" disabled="disabled" />
It is not editable upto this point.
I enable Caret browsing in IE8 (press F7) and then this field becomes editable, though the text is grayed out and consequently gives a wrong feeling to the user that the field is editable. This does not happen if I mark the textbox as readonly, but I do not want to mark it as a readonly field. Any suggestions on how to have the textbox in disabled mode when in Caret Browsing.
Edit1: I am not looking for a solution which would change IE settings/registry, am looking for a programmatic solution as my site is a public facing website
Edit2: View states are enabled for the page and for the controls
I can get you started quickly with this script:
<script> document.onkeyup = KeyCheck;
function KeyCheck() { alert(document.getElementById("txt1").value); } </script> </script>
Put this all the way on top of the html.
Now you get hold of the keypress.
When in caret mode, IE seems to ignore the text's javascript events
Alright. I gave you a Hint to build up on. (Thanks for the -1)
Here is the HTML code that you are looking for. Make sure to populate the initialVal using ASP code.
<script>
document.onkeyup = KeyCheck;
var initialVal="1.0"
function KeyCheck()
{
if(document.getElementById("txt1").value != initialVal) {
document.getElementById("txt1").value = initialVal;
return false;
}
}
</script>
<input name="txt1" type="text" value="1.0" id="txt1" disabled="disabled" />
I have a set of websites that basically do the exact same thing in terms of functionality, the only thing that varies is the css and how the html is laid out.
Is there a way to generate the html from a database (ie retreiving the html from a table) and then catching the controls (like buttons, textboxes etc) from the code behind?
UPDATE:
Here is an example of what I want to acheive:
<html>
<div id="generatedContent" runat="server">
<!-- the following content has been generated from the database on the page load event -->
<div>
This is a textbox <input id="tb1" runat="server" type="text" />
This is a button <input type="submit" id="btn1" runat="server" value="My Button" />
</div>
</div>
</html>
This is the code behind
var tb1 = new HtmlControls.HtmlInputText();
tb1 = FindControl("tb1");
var btn1 = new New HtmlControls.HtmlInputSubmit();
btn1 = FindControl("btn1");
Now obviously since the html has been generated from the database (ie after the page has already been initialised) the FindControl method will return null.
For static HTML content, you can easily add your content to your form by using LiteralControl like that :
Page.Controls.Add(new LiteralControl("<b>content from db</b>"));
EDIT : Your code-behind code (FindControl) should work if you put them in a form tag with runat=server attribute. But beware, your content should be added in every postback. Also you can get the values of your form elements by Request["FormElementId"].
My javascript code modifies some properties, visibility included. After postback, some properties stuck, others are "forgotten". Here I try to change the Text property of a textbox and the visibility property of a label to 'hidden'. After postback, the text is preserved, but the label is shown. I would very much like to keep the label hidden after the postback. The same occurs with the 'display' CSS property. Or, if I try to hide a <div>. Any help would be very much appreciated:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="ShowHide.aspx.cs" Inherits="WebApplication1.ShowHide" %>
<!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>Untitled Page</title>
<script type="text/javascript" language="javascript">
function ShowHide()
{
debugger;
var txt = document.getElementById('txtNumber');
txt.value='4';
var lbl = document.getElementById('lblShowHide');
if(lbl.style.visibility == 'hidden')
{
lbl.style.visibility = '';
}
else
{
lbl.style.visibility = 'hidden';
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Label ID="lblNumber" runat="server" Text="Enter Number" />
<asp:TextBox ID="txtNumber" runat="server" Text="5" />
<asp:Label ID="lblShowHide" runat="server" Text="Show" />
<input id="btnChangeByJS" type="button" value="HTML Change by JavaScript" onclick="ShowHide();" />
<asp:Button ID="cmdSubmit" runat="server" Text="ASP Submit" />
<asp:HiddenField ID="hfShowHide" runat="server" />
</div>
</form>
</body>
</html>
Thank you!
A postback is just another way of saying the html form was submitted. When you submit a form, the only things sent to the server are the value and name properties of the input and select elements in the form. That's why your "text" is preserved: it's the value attribute of that element. If you want to also preserve your visibility changes, or any other changes, you need to add an element to your form that can hold these changes somehow in it's value attribute.
That's essentially what ViewState is; an extra hidden element whose value property holds the current state of controls. But ViewState works for maintaining state between server instances of your page. It's not for moving new changes from the client to the server.
Hook on the client side pageLoad event and hide the text box there. Example:
function pageLoad() {
var txt = document.getElementById('txtNumber');
txt.value='4';
var lbl = document.getElementById('lblShowHide');
if(lbl.style.visibility == 'hidden')
{
lbl.style.visibility = '';
}
else
{
lbl.style.visibility = 'hidden';
}
}