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.
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 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
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.
All, I just want to know how does Asp.net Ajax event handle works together with DOM event. Say you have the code like below.
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebAppAjax.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>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div>
<input id="state" type="text" value="" />
<input id="Departments" type="text" runat="server" />
</div>
</form>
</body>
</html>
<script type="text/javascript">
<!--
var departments = null;
Sys.Application.add_load(page_load);
Sys.Application.add_unload(page_unload);
function page_load(sender, e) {
departments = $get("Departments");
$addHandler(departments, "blur", departments_onblur);
}
function page_unload(sender, e) {
$removeHandler(departments, "blur", departments_onblur);
}
function departments_onblur(sender, e) {
$get("state").value = "onblur";
if (typeof (departments.blur) != "undefined") {
departments.blur();
}
else {
alert("underfined");
}
}
function department_jsblur() {
alert('jsblur');
}
//-->
</script>
protected override void OnInit(EventArgs e)
{
Departments.Attributes.Add("onblur", "department_jsblur();");
base.OnInit(e);
}
the event handler $addHandler(departments, "blur", departments_onblur); doesn't overwrite the event handler Departments.Attributes.Add("onblur", "department_jsblur();");.
They both works.
Could anyone please help to explain how Asp.net Ajax make it ? thanks.
Basically when you use the native javascript 'element.addEventListener(...)' method, it doesn't overwrite the older event handler, but simply adds another one. This is also the method that $addHandler(...) uses internally.
Check out the explanation for the W3C event registration model given here.
With this basic information, we can look at the code that you have mentioned:
Departments.Attributes.Add("onblur", "department_jsblur();");
is server side code that is used to create the html. It uses the traditional way of adding event handler resulting in HTML like <textbox onblur='department_jsblur();' />
The $addHandler(departments, "blur", departments_onblur); is the javascript that is executed once the html has been rendered in the browser window and the traditional event handler has been attached. It uses the element.addEventListener('eventType', callbackMethod) API provided by the language to add additional handlers.
Internally, the multiple handlers assigned to an element are stored in an array, and when the event is raised, all the handlers are executed one after the other.