How to set default value of textbox in a WebView in Xamarin? - xamarin

I have a simple login webpage which loads up in a WebView in a ContentPage in Xamarin. I have added the JavaScript renderer as shown here (https://www.xamarinhelp.com/xamarin-forms-webview-executing-javascript/) and it works fine. I am able to retrieve the values of the textbox in this way:
var email = await EvaluateJavascript("document.getElementById('Email').value;");
But is there a way in which I can set the default value of the textbox when the WebView loads. Making changes to the html of the WebView is not an option here.
I tried doing this but it doesn't work :
await EvaluateJavascript("document.getElementById('Email').value = 'defaultemail#email.com';");

is there a way in which I can set the default value of the textbox when the WebView loads. Making changes to the html of the WebView is not an option here.
This answer is No, It cannot be achieved. If we want to set the value for textBox from html. This webview This webview must be finished loading.
So when you used await EvaluateJavascript("document.getElementById('Email').value = 'defaultemail#email.com';"); it not worked.
If we use await EvaluateJavascript("document.getElementById('Email').value = 'defaultemail#email.com';"); when webview is finished loading.it will worked.
So we can create webview's custom renderer. Override the OnPageFinished method in MyWebviewClient, if page finshed loading, we can send an messageCenter.
[assembly: ExportRenderer(typeof(WebView), typeof(MyWebview))]
namespace XFormsWebview.Droid
{
class MyWebview : WebViewRenderer
{
public MyWebview(Context context) : base(context)
{
}
protected override void OnElementChanged(ElementChangedEventArgs<WebView> e)
{
base.OnElementChanged(e);
Control.Settings.JavaScriptEnabled = true;
Control.SetWebViewClient(new MyWebviewClient());
}
}
internal class MyWebviewClient : Android.Webkit.WebViewClient
{
public override void OnPageFinished(Android.Webkit.WebView view, string url)
{
base.OnPageFinished(view, url);
MessagingCenter.Send<App, string>(App.Current as App, "OpenPage", "finish");
}
}
}
In the PCL, if we get the message. we can set it value by mywebview.EvaluateJavaScriptAsync("document.getElementById('txt').value= 'my url that I want to copy';");.
namespace XFormsWebview
{
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
mywebview.Source = LoadHTMLFileFromResource();
MessagingCenter.Subscribe<App, string>(App.Current, "OpenPage", (snd, arg) =>
{
Device.BeginInvokeOnMainThread(() => {
mywebview.EvaluateJavaScriptAsync("document.getElementById('Email').value= 'defaultemail#email.com';");
});
});
}
HtmlWebViewSource LoadHTMLFileFromResource()
{
var source = new HtmlWebViewSource();
// Load the HTML file embedded as a resource in the .NET Standard library
var assembly = typeof(MainPage).GetTypeInfo().Assembly;
var stream = assembly.GetManifestResourceStream("XFormsWebview.indexd.html");
using (var reader = new StreamReader(stream))
{
source.Html = reader.ReadToEnd();
}
return source;
}
}
}
Here is my html page.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>www.test.net</title>
</head>
<body>
<script language="javascript">
function c1(myvalue)
{
var t=document.getElementById("Email");
t.value="ttt";
}
</script>
<input type="text" id="Email" value="init content" size="30"/>
<input type="button" value="change" name="btn" onclick="c1();" />
</body>
</html>
Here is running screenshot.

Related

How to integrate svg-edit to ASP.NET MVC application

I am about to integrate svg-edit to an ASP.NET MVC project.
Is there anyone who has a recommendation or tutorial on how to begin with?
Thank you.
I am answering my own question.
After a research, I recommend deploying the whole SVG-EDIT lib into mvc architecture, then modify the embed api as following:
This is my Partial View and JS file that call the embed api and put it into the iframe within the partial view:
document.write("<script type='text/javascript' src='~/Scripts/svg-edit/embedapi.js'></script>");
// Make sure to add the embedapi into the html file, becuase the intialization function runs actually in that file, all this call does is basically to take the iframe from html and inialize the api within that tag.
$(document).ready(function () {
// jquery selectro
$("#LoadSVG").click(function () {
$("#svg").append($('<iframe src="/Scripts/svg-edit/svg-editor.html" width="900px" height="600px" id="svgedit"></iframe>'));
});
});
#Scripts.Render("~/bundles/KSage")
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<header>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
</header>
<input id="LoadSVG" type="button" value="LoadSVG" />
<input id="CloseSVG" type="button" value="CloseSVG" />
<input id="save" type="button" value="save" onclick="save()">
<input id="Add" type="button" value="AddNewTag!" onclick="AddNewElemnt()" />
<input id="LoadExample" type="button" value ="LoadExample" onclick="LoadExample()"/>
<body id ="mainBody">
<p id="svg"></p>
<p id="DivData"></p>
<p id="TestId"></p>
<p id="SavedData"></p>
</body>
</html>
Here I have a save and load functions ready for the module: There is so much work to do in order to perfect the algorithm, but since this was just a test project to figure out the possibility of integrating the module into the environment I put enough effort to understand that share the knowledge with the community:
Here is my cshtml file:
#Scripts.Render("~/bundles/KSage")
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<header>
</header>
<input id="LoadSVG" type="button" value="LoadSVG" />
<input id="CloseSVG" type="button" value="CloseSVG" />
<input id="save" type="button" value="save" onclick="save()">
<input id="Add" type="button" value="AddNewTag!" onclick="AddNewElemnt()" />
<input id="LoadExample" type="button" value ="LoadExample" onclick="LoadExample()"/>
<body id ="mainBody">
<p id="svg"></p>
<p id="DivData"></p>
<p id="TestId"></p>
<p id="SavedData"></p>
</body>
</html>
Here is the js file:
document.write("<script type='text/javascript' src='~/Scripts/svg-edit/embedapi.js'></script>");
document.write("<script src='~/Scripts/jquery-1.10.2.js'></script>");
$(document).ready(function () {
// jquery selectro
$("#LoadSVG").click(function () {
$("#svg").append($('<iframe src="/Scripts/svg-edit/svg-editor.html" width="900px" height="600px" id="svgedit"></iframe>'));
});
});
$(document).ready(function () {
// jquery selectro
$("#save1").click(function () {
$("#DivData").append("<b>Appended text</b>");
});
});
$(document).ready(function(){
$("#CloseSVG").click(function () {
$("#svg").hide();
});
});
function HandleSvgData(data,error) {
if (error) {
alert('Error:' + error);
} else {
$('#DivData').append(data);
alert(data);
}
}
function handleSvgData(data, error) {
alert("handling Data");
if (error) {
alert('error ' + error);
} else {
alert('Congratulations. Your SVG string is back in the host page, do with it what you will\n\n' + data);
}
}
function save1() {
alert("saving");
// svgCanvas.getSvgString()(handleSvgData);
$("#svgedit").append($('This is the test classed appended after DivDat'));
}
function AddNewElemnt()
{
var newElement = document.createElement("Test");
var newNode = document.createTextNode("This is my new node!");
newElement.appendChild(newNode);
var referenceElement = document.getElementById("mainBody");
var tagInsert = document.getElementById("TestId");
referenceElement.insertBefore(newElement, tagInsert);
// alert("added");
}
function Postt(data) {
}
function Post(data) {
var mainBody = document.getElementById("mainBody");
var SvgDataId = prompt("give me primary id");
var SvgUser = prompt("give me UserName");
var form = document.createElement("form");
form.setAttribute("id", "PostData");
form.setAttribute("action", "/SvgDatas/Create");
form.setAttribute("method", "post");
mainBody.appendChild(form);
var PostData = document.getElementById("PostData");
var InputSvgDataId = document.createElement("input");
InputSvgDataId.setAttribute("name", "SvgDataId");
InputSvgDataId.setAttribute("value", SvgDataId);
PostData.appendChild(InputSvgDataId);
var InputSvgUser = document.createElement("input");
InputSvgUser.setAttribute("name", "SvgUser");
InputSvgUser.setAttribute("value", SvgUser);
PostData.appendChild(InputSvgUser);
var InputData = document.createElement("input");
InputData.setAttribute("name", "Data");
InputData.setAttribute("value", data);
PostData.appendChild(InputData);
form.submit();
}
function save() {
var doc, mainButton,
frame = document.getElementById('svgedit');
svgCanvas = new EmbeddedSVGEdit(frame);
// Hide main button, as we will be controlling new, load, save, etc. from the host document
doc = frame.contentDocument || frame.contentWindow.document;
mainButton = doc.getElementById('main_button');
mainButton.style.display = 'none';
// get data
svgCanvas.getSvgString()(function handleSvgData(data, error) {
if (error) {
alert('error ' + error);
} else {
alert('Congratulations. Your SVG string is back in the host page, do with it what you will\n\n' + data);
Post(data);
}
});
}
/*
function BuidUrl(SVGUser) {
var uri = prompt("Give me url where the serach function lives, if empty then I will use Razor syntax to call within MVC architescture");
if (uri)
return uri;
else {
var urlHelper = ('http://localhost:53546/SvgDatas/Search?id='+SVGUser);
return urlHelper;
}
}
*/
function returnedData_IntializeEditor(data, status) {
if ((data != null) && (status == "success")) {
var frame = document.getElementById('svgedit');
svgCanvas = new EmbeddedSVGEdit(frame);
doc = frame.contentDocument || frame.contentWindow.document;
mainButton = doc.getElementById('main_button');
tool_Bottum = doc.getElementById("#tool_button");
mainButton.style.display = 'none';
// Open Data into the frame
// var svgexample = '<svg width="640" height="480" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"><g><title>Layer 1<\/title><rect stroke-width="5" stroke="#000000" fill="#FF0000" id="svg_1" height="35" width="51" y="35" x="32"/><ellipse ry="15" rx="24" stroke-width="5" stroke="#000000" fill="#0000ff" id="svg_2" cy="60" cx="66"/><\/g><\/svg>';
svgCanvas.setSvgString(data.Data);
} else {
$("#svg").append("<li>There is not such a data available in the database!</li>");
}
}
function LoadExample() {
var SVGUser = prompt("Enter the SVG ID");
$.getJSON("http://localhost:53546/SvgDatas/Search?id=" + SVGUser, returnedData_IntializeEditor );
}
This is the model:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace IntegrationOfSVG.Models
{
public class SvgData
{
public string SvgDataId { get; set; }
public string SvgUser { get; set; }
public string Data { get; set; }
}
}
Thank you SVG-EDIT community for the great tool.
Next I am planning to add a view mode to this module that opens the data from a sequal server and if the mode is admin, lets the user to edit the existing data. I will keep this posted updated.
1- One way is to remove the tools from the client side, but it has a certain limitation that is the fact that css does not adjust a
function RemoveTools() {
var frame = document.getElementsByClassName("iFrameHtmlTag")[0];
doc = frame.contentWindow.document;
if (doc != null) {
var Tools = [
'tools_top', 'tools_left', 'tools_bottom', 'sidepanels', 'main_icon', 'rulers', 'sidepanels', 'canvashadow'];
for (i=0; i<Tools.length;i++)
{
doc.getElementById(Tools[i]).style.display = "none";
}
} else
alert("Doc was null");
};
$(document).ready(function () {
$("#hide").click(function () {
RemoveTools();
});
});
It is an effective way, but there should be a better method to view the object with few parameters also to readjust the size of the window. I will continue with that topic too.

Rendering Partial View in a div dynamically in mvc3

I have a list of link buttons(l1,l2,l3..etc) and a fixed div area.when I click l1 for example partialview1 will populate within div and when I click l2 for example partialview2 will populate within the same div replacing existing partialview1.Each partial view has different model.
My Code is given below: SettingsMaster.cshtml
#{
ViewBag.Title = "ManageSettings";
Layout = "~/Views/Shared/_AdminLayout.cshtml";
}
#section JavaScript
{
<script type="text/javascript" src="#Url.Content("/Scripts/SettingsCustomScript.js")"></script>
}
<h2>ManageSettings</h2>
#Html.ActionLink("Area", null, null, null, new {#id="Area", #style = "text-transform:capitalize;" })
#Html.ActionLink("Subarea", null, null, null, new {#id="SubArea", #style = "text-transform:capitalize;" })
<div id="Datadisplay"></div>
Java Script Code:Custom Javascript file
/// <reference path="jquery-1.8.3.js" />
/// <reference path="jquery-1.5.1-vsdoc.js" />
$(document).ready(function () {
$("#Area").click(function () {
$("#Datadisplay").load('/Settings/GetArea', null, function (response, status, xhr) {
if (status == "error") {
alert("An error occured");
}
return false;
});
});
$("#Subarea").click(function () {
alert("hello");
}
);
Controller Method:
public class SettingsController : Controller { // // GET: /Settings/
[HttpGet]
public ActionResult ManageSettings()
{
return View();
}
[HttpGet]
public ActionResult GetArea()
{
return PartialView("GetArea");
}
}
But when it is rendering it is calling ManageSettings() this is why it is not showing. Plz help me what to do
I read this in another post in stack overflow and it worked for me
in the View:
#model Tuple<IEnumerable<Model1name>,Model2name>
#foreach (var item in Model.Item1)
{
#item.Name
}
In the Controller:
var tuple = new Tuple<IEnumerable<Model1name>, Model2name>(context.Model1name.ToList(), new Model2name());
return View(tuple);
Use a simple jquery call.
On the click of your link buttons you do a $.Get(...) and render the partialview returned by your controller

Fine Uploader- Server side code saves uploaded file but client displays 'Upload failed' message

I have an MVC2 application where I am trying to use the Fine-Uploader plugin. When I run through my code behind, it saves the file that I uploaded. However, what get's displayed back in the browser is Upload Failed. I'm not sure what I'm missing here. My code is below:
Code behind:
public void UploadFiles()
{
try
{
if (Request.Files.Count > 0)
{
foreach (string file in Request.Files)
{
HttpPostedFileBase hpf = Request.Files[file] as HttpPostedFileBase;
if (hpf.ContentLength == 0)
{
continue;
}
string filename = Path.GetFileName(hpf.FileName);
string path = Path.Combine(Server.MapPath(ConfigurationManager.AppSettings["AttachmentPath"]), filename);
hpf.SaveAs(path);
}
}
}
catch (Exception e)
{
//Do something
}
}
Master page:
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script src="<%=Url.Content("~/Scripts/jquery.fineuploader-3.5.0.js") %>" type="text/javascript"></script>
<script src="<%=Url.Content("~/Scripts/jquery.fineuploader-3.5.0.min.js") %>" type="text/javascript"></script>
Markup page:
<div id="manual-fine-uploader"></div>
<div id="triggerUpload" class="btn btn-primary" style="margin-top: 10px;">
<i class="icon-upload icon-white"></i> Upload now
</div>
<script type="text/javascript">
$(document).ready(function () {
var manualuploader = new qq.FineUploader({
element: $('#manual-fine-uploader')[0],
request: {
endpoint: 'Home/UploadFiles'
},
autoUpload: false,
text: {
uploadButton: '<i class="icon-plus icon-white"></i> Select Files'
}
});
$('#triggerUpload').click(function () {
manualuploader.uploadStoredFiles();
});enter code here
});
</script>
Fine Uploader expects a valid JSON response indicating whether the upload succeeded or not.
A successful upload response must have:
{ "success": true }
for Fine Uploader to know that it worked. You can add whatever else you want to your response, but without indicating 'success' Fine Uploader will think that the upload failed.
What I would do is add a return to your UploadFiles function. Somewhat like:
public UploadResult UploadFiles()
{
try
{
// ... save file and other things
}
catch (Exception ex)
{
// failsauce :(
return new UploadResult(false);
}
// success :)
return new UploadResult(true);
}
Where UploadResult is much like:
public class UploadResult
{
// This is important!
public const string ResponseContentType = "text/plain";
public FineUploaderResult(bool success)
{
_success = success;
}
public override void ExecuteResult(ControllerContext context)
{
// Here we create the JSON Response object,
// set the correct content-type, and finally
// it gets built with the correct success flag.
var response = context.HttpContext.Response;
response.ContentType = ResponseContentType;
response.Write(BuildResponse());
}
public string BuildResponse()
{
var response = new JObject();
response["success"] = _success;
// ... maybe set some other data in the response JSON
return response.ToString();
}
}
There is an example using ASP.NET MVC C# up on the server examples repository that may provide some assistance.
Also, on the development branch there is a server-side README which indicates exactly what constitutes a valid JSON response for Fine Uploader.

How to Show The image from one view to other view in Asp.Net WebApi MVC4?

HI all i have some images which i am retrieving dynamically and displaying in a view like this
here is my controller
private ProductEntities products = new ProductEntities();
public List<ProductItems> GetAllProducts()
{
var items = new List<ProductItems>();
var records = products.Products.ToList();
foreach (var item in records)
{
ProductItems model = new ProductItems();
model.ProductID = item.ProductId;
model.ProductName = item.ProductName;
model.ImageURL = item.ImageURL;
items.Add(model);
}
return items;
}
and this is my index page view
<script type="text/javascript">
$(document).ready(function () {
$.getJSON("/api/ProductDetails", function (data) {
$.each(data, function (idx, ele) {
$("<img/>").attr({ src: ele.ImageURL }).appendTo("#makeMeScrollable");
$("#makeMeScrollable").append('<h4>' + ele.ProductName + '</h4>');
});
});
});
</script>
</head>
<body>
<h1>Products</h1>
<div class="rightsection_main">
<div class="img_main" id="makeMeScrollable">
</div>
</div>
</body>
now what i want is when ever an user clicks on a image i have to pass the ID of the image to my method in my apicontroller and i have to display that image in another view ..how do i pass my image to another view and Id to my api/controller action
i have to pass my ProductID to this method
public IEnumerable<ProductItems> ProductDeatils(long ProductID)
{
var productdeatils = products.ExecuteStoreQuery<ProductItems>("GetProductDetail #ProductID ", new SqlParameter("#ProductID", ProductID));
return productdeatils ;
}
The thing is that API actions do not return views. They are used to serialize models using some format such as JSON or XML. So when you are saying that you want to use the ProductDeatils API action to display a view, this doesn't make much sense. Views are returned by standard ASP.NET MVC controller actions returning ActionResults. So let's see how to set this up.
Let's suppose that you have the following API controllers:
public class ProductsController : ApiController
{
private ProductEntities products = new ProductEntities();
public IEnumerable<ProductItems> Get()
{
return products.Products.ToList().Select(item => new ProductItems
{
ProductID = item.ProductId,
ProductName = item.ProductName,
ImageURL = item.ImageURL
});
}
}
public class ProductDetailsController : ApiController
{
private ProductEntities products = new ProductEntities();
public ProductItems Get(long id)
{
return products.ExecuteStoreQuery<ProductItems>(
"GetProductDetail #ProductID ",
new SqlParameter("#ProductID", id)
);
}
}
Alright, now we will need standard ASP.NET MVC controller that will serve the views:
public class HomeController : Controller
{
public ActionResult Products()
{
return View();
}
public ActionResult ProductDetail(long id)
{
using (var client = new HttpClient())
{
var productDetailUrl = Url.RouteUrl(
"DefaultApi",
new { httproute = "", controller = "productdetails", id = id },
Request.Url.Scheme
);
var model = client
.GetAsync(productDetailUrl)
.Result
.Content
.ReadAsAsync<ProductItems>()
.Result;
return View(model);
}
}
}
and the respective view for showing the list of products and the detail of a product when a link is clicked:
~/Views/Home/Products.cshtml:
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<h1>Products</h1>
<div class="rightsection_main">
<div class="img_main" id="makeMeScrollable">
</div>
</div>
<script type="text/javascript" src="~/scripts/jquery-1.8.2.js"></script>
<script type="text/javascript">
var productsUrl = '#Url.RouteUrl("DefaultApi", new { httproute = "", controller = "products" })';
var productDetailUrl = '#Url.Action("productdetail", "home", new { id = "__id__" })';
$.getJSON(productsUrl, function (data) {
$.each(data, function (idx, product) {
$('<img/>').attr({ src: product.ImageURL }).appendTo('#makeMeScrollable');
$('#makeMeScrollable').append(
$('<h4/>').html(
$('<a/>', {
href: productDetailUrl.replace('__id__', product.ProductID),
text: product.ProductName
})
)
);
});
});
</script>
</body>
</html>
and ~/Views/Home/ProductDetail.cshtml:
#model ProductItems
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>ProductDetail</title>
</head>
<body>
<h4>#Html.DisplayFor(x => x.ProductName)</h4>
<img src="#Model.ImageURL">
</body>
</html>

how will I call the on change event of the ajax dropdownlist?

In my MVC application I am using an ajax dropdownlist and an ajax Cascading dropdownlist I want to write the onChange event of the cascading dropdownlist please tell me what shall I do.
I am posting the view page that I am using and the js file that creates the cascading dropdownlist.Please tell me where all the places I need to do the changes.
The view Page is as follows
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Index1</title>
<script src="../../Scripts/MicrosoftAjax.js" type="text/javascript"></script>
<script type="text/javascript" src="../../Scripts/MicrosoftMvcAjax.js"></script>
<script type="text/javascript" src="../../Scripts/CascadingDropDownList.js"></script>
</head>
<body>
<div>
<label for="Makes">Car Make:</label>
<%= Html.DropDownList("Makes")%>
<label for="Makes">Car Model:</label>
<%= Html.CascadingDropDownList("Models", "Makes")%>
<br />
<%=Html.TextBox ("id",ViewData ["id"]) %>
</div>
</body>
</html>
The javascript where the cascading dropdown list is being formed:
public static class JavaScriptExtensions
{
public static string CascadingDropDownList(this HtmlHelper helper, string name, string associatedDropDownList)
{
var sb = new StringBuilder();
// render select tag
sb.AppendFormat("<select name='{0}' id='{0}'></select>", name);
sb.AppendLine();
// render data array
sb.AppendLine("<script type='text/javascript'>");
var data = (CascadingSelectList)helper.ViewDataContainer.ViewData[name];
var listItems = data.GetListItems();
var colArray = new List<string>();
foreach (var item in listItems)
colArray.Add(String.Format("{{key:'{0}',value:'{1}',text:'{2}'}}", item.Key, item.Value, item.Text));
var jsArray = String.Join(",", colArray.ToArray());
sb.AppendFormat("$get('{0}').allOptions=[{1}];", name, jsArray);
sb.AppendLine();
sb.AppendFormat("$addHandler($get('{0}'), 'change', Function.createCallback(bindDropDownList, $get('{1}')));", associatedDropDownList, name);
sb.AppendLine();
sb.AppendLine("</script>");
return sb.ToString();
}
}
public class CascadingSelectList
{
private IEnumerable _items;
private string _dataKeyField;
private string _dataValueField;
private string _dataTextField;
public CascadingSelectList(IEnumerable items, string dataKeyField, string dataValueField, string dataTextField)
{
_items = items;
_dataKeyField = dataKeyField;
_dataValueField = dataValueField;
_dataTextField = dataTextField;
}
public List<CascadingListItem> GetListItems()
{
var listItems = new List<CascadingListItem>();
foreach (var item in _items)
{
var key = DataBinder.GetPropertyValue(item, _dataKeyField).ToString();
var value = DataBinder.GetPropertyValue(item, _dataValueField).ToString();
var text = DataBinder.GetPropertyValue(item, _dataTextField).ToString();
listItems.Add(new CascadingListItem(key, value, text));
}
return listItems;
}
}
public class CascadingListItem
{
public CascadingListItem(string key, string value, string text)
{
this.Key = key;
this.Value = value;
this.Text = text;
}
public string Key { get; set; }
public string Value { get; set; }
public string Text { get; set; }
}
You should register the control during the application initialization. It's what you have to render in the page via CascadingDropDownList extension method.
Sys.Application.add_init(function() {
$create(NameSpace.ClassName, null, null, null, $get("id"));
});
Type.registerNamespace("NameSpace");
NameSpace.ClassName = function(element) {
NameSpace.ClassName.initializeBase(this, [element]);
}
NameSpace.ClassName.prototype = {
initialize: function() {
NameSpace.ClassName.callBaseMethod(this, "initialize");
$addHandler(this.get_element(), "change", Function.createDelegate(this, onChange));
},
dispose: function() {
NameSpace.ClassName.callBaseMethod(this, "dispose");
$removeHandler(this.get_element(), "change", Function.createDelegate(this, onChange));
},
onChange: function() {
// Do somethings...
}
}
NameSpace.ClassName.registerClass(NameSpace.ClassName, Sys.UI.Control);
The above code snippet illustrates how to add an handler for change event.

Resources