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?
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 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);
}
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.