I have the following Web Form in my ASP.NET Website
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" ValidateRequest="false" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
function SetTextBoxValues() {
TextBox1.value = "Textbox can be set without calling document.getElementById()";
TextBox2.value = "Textbox can be set without calling document.getElementById()";
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:TextBox ID="TextBox1" runat="server" Height="210px" TextMode="MultiLine" Width="725px"></asp:TextBox>
<br/>
<textarea rows="4" cols="50" id="TextBox2" runat="server" />
<br/>
<button onclick="SetTextBoxValues()">Set Text Box Value</button>
</form>
</body>
</html>
The page works as I can click the button and set values in both TextBox1 and Textbox2. What I don't understand is the way the Textbox value is set in the javascript function.
<script type="text/javascript">
function SetTextBoxValues() {
TextBox1.value = "Textbox can be set without calling document.getElementById()";
TextBox2.value = "Textbox can be set without calling document.getElementById()";
}
Normally we need to use the following JS code:
document.getElementById('<%=txtTextBox.ClientID %>').value = "Some values";
But it looks like we can set the value without the use of document.getElementById(). May I know why it is working this way? Is this a valid way of setting textbox value using javascript?
You use component "runat server" so you should use code behing:
TextBox2.Text = yourvalue;
And create a method server side to manage your inputs.
I think it's like this post:
textarea control, asp.net c#
quoting answer provided as comment from ConnorsFan.
It does work, indeed. I think the explanation is given here:
stackoverflow.com/questions/3434278/…. – ConnorsFan Jun 3 '16 at 12:29
Related
I've a web form with a text box and RequiredFieldValidator Control.
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication2.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
Name : <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate ="TextBox1" ErrorMessage="RequiredFieldValidator">
</asp:RequiredFieldValidator>
<asp:button runat="server" text="Button" />
</div>
</form>
</body>
</html>
When I load the page and click on the button, I get an error saying
Error:
[InvalidOperationException: WebForms UnobtrusiveValidationMode requires a ScriptResourceMapping for 'jquery'. Please add a ScriptResourceMapping named jquery(case-sensitive).]
System.Web.UI.ClientScriptManager.EnsureJqueryRegistered() +145
System.Web.UI.WebControls.BaseValidator.RegisterUnobtrusiveScript() +11
System.Web.UI.WebControls.BaseValidator.OnPreRender(EventArgs e) +88
System.Web.UI.Control.PreRenderRecursiveInternal() +166
System.Web.UI.Control.PreRenderRecursiveInternal() +236
System.Web.UI.Control.PreRenderRecursiveInternal() +236
System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint) +4682
I did some googling and found some solutions like changing the target version to 4.0 in web.config, using jquery in the global.asax file and changing the property of UnobtrusiveValidationMode to none.
I even read about unobtrusive javascript at https://en.wikipedia.org/wiki/Unobtrusive_JavaScript. But I could not make any relation with the content given there and the error I encountered
Most of the answers said to refer http://connect.microsoft.com/VisualStudio/feedback/details/735928/in-asp-net-web-application-visual-basic-the-requiredfieldvalidator-doest-work
But this link no longer exists.
When I viewed the source of the web page after changing the target version to 4.0, I found some extra inline javascripts(I guess that's called obtrusive javascripts). What's wrong in using inline codes?
I'm pretty new to ASP.net, so little brevity appreciated.
I'm trying to use several instances of an ascx control on a single page. Only the last control on the page works. I understand from this post [Asp.Net User Control does not work correctly when multiple are added to one form that the problem is related to the IDs; somehow I'm trying to reuse the IDs and the specific control being edited is not referenced correctly. However, the code on that page is complex and I don't understand the answers. I created a small example of my problem to demonstrate.
Here is my user control:
<%# Control Language="vb" AutoEventWireup="false" CodeBehind="testControl.ascx.vb" Inherits="Tempusforms.testControl" %>
<script type="text/javascript">
function getValue() {
document.getElementById("<%=Label1.ClientID %>").innerHTML = getIndex();
}
function getIndex() {
return document.getElementById("<%=droppit.ClientID %>").selectedIndex;
}
</script>
<span>
<asp:DropDownList ID="droppit" runat="server" OnChange="getValue();" >
<asp:ListItem Value="Select a Value"></asp:ListItem>
<asp:ListItem Value="one"></asp:ListItem>
<asp:ListItem Value="two"></asp:ListItem>
<asp:ListItem Value="three"></asp:ListItem>
</asp:DropDownList>
</span> Index Value =
<span>
<asp:label ID="Label1" runat="server" Text="mylabel" ></asp:label>
</span>
Here is the page that uses the controls:
<%# Page Language="vb" AutoEventWireup="false" CodeBehind="userControlTest.aspx.vb" Inherits="Tempusforms.userControlTest" %>
<%# Register src="../Common/testControl.ascx" tagname="testControl" tagprefix="uc1" %>
<!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>
</head>
<body>
<form id="form1" runat="server">
<div>
<uc1:testControl ID="testControl1" runat="server" />
<br /><br />
<uc1:testControl ID="testControl2" runat="server" />
</div>
</form>
</body>
</html>
Can you show me how to make this work?
Thanks for your help.
ASP.NET generates different IDs which include the UserControl ID so IDs aren't the issue here.
However the problem is with the JS code that you are including in the User Control. This gets repeated and bad things happen because of that obviously.
You should get those scripts outside the User Control and change them to use parameters.
Something like:
<script type="text/javascript">
function getValue(ctrlID) {
document.getElementById(ctrlID).innerHTML = getIndex(ctrlID);
}
function getIndex(ctrlID) {
return document.getElementById(ctrlID).selectedIndex;
}
</script>
And you can call these functions from the User Control like this: OnChange="getValue(this.id);"
This is my first encounter with User Controls.
I have a user control that contains a jQuery function called Animate(). I want to call that function from an aspx page that contains the user control. Is that possible?
When I click the button in the following code the function is not fired and no error. What am I missing?
Upload_Animation.ascx
<head>
<script>
function AnimateGif() {
// do some stuff
}
</script>
</head>
<body>User Control</body>
aspx page
<head runat="server">
<uc:UploadAnimation ID="uc1" runat="server"/>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Button OnClientClick="AnimateGif();" runat="server" Text="Do stuff" OnClick="btn_Click"/>
</div>
</form>
</body>
web.config
<controls>
<add tagPrefix="uc" src="~/UserControls/Upload_Animation.ascx" tagName="UploadAnimation" />
</controls>
First of all, I cannot see any JQuery code in your source example. As I can see (correct me if I'm wrong), you are trying to call client Javascript function that is declared as Animate() and you are calling as AnimateGif(); Try to correct the name of the calling function to match the declared name.
In my application i just want to alert the value in the text box using javascript .
aspx page code
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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>
<script type="text/javascript">
alert("hi");
alert(document.getElementById('<%=textbox1.ClientID%>').value);
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox runat="server" ID="textbox1" Text="asdsad">
</asp:TextBox>
</div>
</form>
</body>
</html>
I only get alert 'hi' ..after that i get an error " object required" . whats the reason?
Your code is running before the element has been displayed on the screen. Try -
window.onload = function() {
alert("hi");
alert(document.getElementById('<%=textbox1.ClientID%>').value);
}
Or move your script to the bottom of the page as suggested by Tejs in the comments below.
The page is not loaded yet. You have to put the code in a function and then trigger with
onload=yourfunction;
Please change the script location, put the script code on bottom of the page.Just After the complete with form tag.
The ID you are trying to get is a server side id and not the html id of the element, if you checked using firebug you will notice that the id has loads of extra letters and numbers inserted by asp.net, i'd recommend using jquery instead to walk into the dom to select the specific element.
You could also add a name and getByName.
i am learning javascript client side scripting language and i am using js in ASP.. i dont know when i compile the code, it shows
COMPILATION ERROR:Compiler Error
Message: CS1061: 'ASP.default_aspx'
does not contain a definition for
'popup' and no extension method
'popup' accepting a first argument of
type 'ASP.default_aspx' could be found
(are you missing a using directive or
an assembly reference?)
here is my code :
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WEB_test_app._Default" %>
<!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>Shuraat Web ki</title>
<script type ="text/javascript">
function popup()
{
alert("popup!!");
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Button ID="Button1" runat="server" Text="Button" OnClick ="popup()"/>
<script type ="text/javascript">
document.write("Abid");
</script>
</div>
</form>
</body>
</html>
You're confusing client-side and server-side events. The popup() function is written in Javascript and runs on the client, but OnClick is a server-side event, so its handler runs on the server and has to be written in the language of your page (C#). popup() has no meaning in that context.
You can use the ClientClick event in order to handle the button click client-side. Note that you probably should return false from the handler in order to avoid a postback to the server:
<asp:Button ID="Button1" runat="server" Text="Button"
OnClientClick ="popup(); return false;" />
You have to assign popup() to the event OnClientClick instead of Click like this:
<asp:Button ID="Button1" runat="server" Text="Button" OnClientClick ="popup()"/>
The reasoning behind your problem is that when the run-time saw OnClick it tried to attatch that event with a C#/VB.Net (Code-Behind) method (which obviously does not exist) and we solved that by attaching the event OnClientClick to your Javascript method.
OnClick - is click handler on server side. If you want to call javascript function, use OnClientClick.