I have a Web user control named UserControl.ascx and a JavaScript function 'GetValues()' to return some value is embedded in that ascx page. I've compiled the ascx page into a dll and used that in another web application.But now the problem is when I tried to call the user control JavaScript function from web application, JS Debugger showing 'GetValues' is undefined
error. Is there any way solve this issue ?
in ASCX File:
<%# Control Language="C#" AutoEventWireup="true" CodeFile="ICEImage.ascx.cs" Inherits="ICEImage" %>
<div>
<asp:TextBox ID="txtValue" runat="server" BackColor="#FFFFC0" ReadOnly="True" Width="150px"
</div>
<script type="text/javascript">
function GetValue()
{
return parseInt(document.getElementById('<%=txtValue.ClientID%>').value);
}
</script>
ASPX File:
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%# Register TagPrefix="ASP" Assembly="App_Web_iceimage.ascx.cdcab7d2" Namespace="ASP" %>
<!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>Sample Page</title>
</head>
<body style="background-color: #383838">
<form id="form1" runat="server">
<ASP:iceimage_ascx ID="ICEImage1" runat="server"></ASP:iceimage_ascx>
<button id="btnSave" style="width: 85px; height: 29px" type="button" onclick="GetValue()">Save</button>
</form>
</body>
</html>
You can define your function from server code like this and add this on Page_PreRender for example
if (!Page.ClientScript.IsClientScriptBlockRegistered("FunctionGetValue"))
{
string script = #"function GetValue() {
return parseInt(document.getElementById('"+txtValue.ClientID+"').value);
}";
ScriptManager.RegisterClientScriptBlock(this.Page, this.Page.GetType(), "FunctionGetValue", script, true);
}
Related
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);"
I have the fallowing code that is working but my question is how do you get to pass the value of the textbox every time you type on the textbox? Maybe Using Javascript or JQuery ? If anyone could help me it would be great.
SearchProducstController:
public class SearchProducstController: Controller
{
public ActionResult searchmain(string name)
{
var result = name;
return View();
}
site.master
<%# Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
<link href="../../Content/Site.css" rel="stylesheet" type="text/css" runat="server" />
</head>
<body>
<div class="page">
<% using (Html.BeginForm("searchmain", "SearchProducstController")) { %>
<%: Html.TextBox("name") %>
<input type="submit" value="searchmain" />
<% } %>
</div>
</body>
</html>
Use AJAX(Asynchronous JavaScript and XML).
AJAX is the art of exchanging data with a server, and updating parts of a web page - without reloading the whole page.
AJAX was invented for this feature only.
Google ajax autocomplete textbox and you will find what i am talking about.
I just started using ASP.NET. Here is what I tried to do:
Create a WebUserControl which basically contains a ListBox and which offers a public AddValue(int value) method. This method just adds the value to the ListBox.
Create a WebForm which contains an instance of my WebUserControl and which should call AddValue on my WebUserControl whenever some JavaScript event happens (in my first example this would be the WheelEvent.
I tried the following:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>
<%# Register assembly="System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" namespace="System.Web.UI.DataVisualization.Charting" tagprefix="asp" %>
<%# Register src="WebUserControl1.ascx" tagname="WebUserControl1" tagprefix="uc1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>test</title>
<script>
if (window.WheelEvent) {
window.addEventListener('wheel', mouseWheelHandler, false);
}
else {
alert("WheelEvent is not supported");
}
function mouseWheelHandler(eventData) {
document.form1.WebUserControl11.AddValue(eventData.deltaY);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<uc1:WebUserControl1 ID="WebUserControl11" runat="server" />
</form>
</body>
</html>
But AddValue on my WebUserControl never gets called.
I also tried to implement the IPostBackDataHandler interface by the WebUserControl and using __doPostBack in the JavaScript mouseWheelHandler, but LoadPostData never got called either.
What is the simplest way to get the data from the JavaScript event handler to my server control?
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 wondering why the following code does not create two of my activex object. When the object tag is directly in the HTML it works fine, but for the life of me I can't dynamically create the object item. Is this a security issue or something? I am finding a difficult time finding documentation on this problem.
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="InkWebForm._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 language="javascript">
window.onload = function() {
var s = '<OBJECT id="inkImage" classid="InkControls.dll#InkControls.ResizableInk" VIEWASTEXT></OBJECT>';
document.getElementById("inkHolder").innerHTML = s;
};
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<!-- This one gets created -->
<OBJECT id="inkImage2" classid="InkControls.dll#InkControls.ResizableInk" VIEWASTEXT>
</OBJECT>
<!-- this one should get inserted but never gets created -->
<div id="inkHolder"></div>
</div>
</form>
</body>
</html>
Well when I explore the dom the object explorer does show the item but IE renders a little square box and not the activex control.
Here goes the second attempt based on casablanca's suggestion. I think there might be a security issue going on here as per your suggestion this should work but does not. Same problem.
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="InkWebForm._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">
<script language="javascript">
window.onload = function() {
var obj = document.createElement('object');
obj.setAttribute('id', 'inkImage');
obj.setAttribute('classid', 'InkControls.dll#InkControls.ResizableInk');
document.getElementById('inkHolder').appendChild(obj);
};
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<OBJECT id="inkImage2" classid="InkControls.dll#InkControls.ResizableInk">
</OBJECT>
<div id="inkHolder"></div>
</div>
</form>
</body>
</html>
You shouldn't be using innerHTML to create new elements. If you use document.createElement then it should work fine:
var obj = document.createElement('object');
// set object properties here
document.getElementById('inkHolder').appendChild(obj);
Edit:
I just noticed that the objects you are dealing with are ASP server-side objects, which are instantiated on the server rather than on the client. In this case, JavaScript won't help you since it's executed on the client. You could look at the HTML source in your browser to see exactly what code is generated by ASP and if you replicate that in JavaScript, it might work.