I write a custom server control with javascript
the javascript is as the following and is tested , which can use "Enter" key to go to the next textbox
------ test0205.html ------------------
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(':input').keydown(function(e){
if (e.keyCode == 13 ){
$(':input').eq($(':input').index($(this)) + 1).trigger('focus');
}
});
});
</script>
</head>
<body>
<input type="text" name="firstname"><br>
Last name:<br>
<input type="text" name="lastname">
</body>
</html>
--------------------------------------------------------------------
But after I put it into my server contro project (ServerControl6)
and use the control in the web page (Default4.aspx) , the code as follows
-------------------- ServerControl6.cs -------------------
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace ServerControl6
{
[DefaultProperty("Text")]
[ToolboxData("<{0}:ServerControl6 runat=server></{0}:ServerControl6>")]
public class ServerControl6 : System.Web.UI.WebControls.TextBox
{
[Bindable(true)]
[Category("Appearance")]
[DefaultValue("")]
[Localizable(true)]
public string Text
{
get
{
String s = (String)ViewState["Text"];
return ((s == null)? "[" + this.ID + "]" : s);
}
set
{
ViewState["Text"] = value;
}
}
protected override void OnPreRender(EventArgs e)
{
base.OnPreRender(e);
string scriptKey = "TextBoxEnter" + this.UniqueID;
ClientScriptManager cs = Page.ClientScript;
Type cstype = this.GetType();
if (!cs.IsClientScriptBlockRegistered(scriptKey))
{
string scriptBlock =
@"<script language=""JavaScript"">
<!--
$(document).ready(function(){
$(':input').keydown(function(e){
if (e.keyCode == 13 ){
$(':input').eq($(':input').index($(this)) + 1).trigger('focus');
}
});
});
// -->
</script>";
cs.RegisterClientScriptBlock(cstype, scriptKey, scriptBlock);
}
}
}
}
-------------------- AssemblyInfo.cs -----------------------
using System.Reflection;
using System.Runtime.CompilerServices;
using System.Runtime.InteropServices;
using System.Web.UI;
[assembly: AssemblyTitle("ServerControl6")]
[assembly: AssemblyDescription("")]
[assembly: AssemblyConfiguration("")]
[assembly: AssemblyCompany("")]
[assembly: AssemblyProduct("ServerControl6")]
[assembly: AssemblyCopyright("Copyright © 2016")]
[assembly: AssemblyTrademark("")]
[assembly: AssemblyCulture("")]
[assembly: ComVisible(false)]
[assembly: Guid("02a2c0e8-68f5-4df3-b8c2-97f433584357")]
[assembly: AssemblyVersion("1.0.0.0")]
[assembly: AssemblyFileVersion("1.0.0.0")]
[assembly: TagPrefix("ServerControl6", "aspSample")]
-------- Default4.aspx ------------------------------
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default4.aspx.cs" Inherits="Default4" %>
<%@ Register assembly="ServerControl6" namespace="ServerControl6" tagprefix="aspSample" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
#form1 {
height: 579px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div style="height: 525px">
<br />
<aspSample:ServerControl6 ID="ServerControl61" runat="server"></aspSample:ServerControl6>
<br />
<br />
<aspSample:ServerControl6 ID="ServerControl62" runat="server"></aspSample:ServerControl6>
<br />
<br />
<br />
<asp:Button ID="Button1" runat="server" Text="Button" />
</div>
</form>
</body>
</html>
---------------------------------------------------------------------
I tried to save the html code generated by asp.net as a html file(render2016-1.html) which is the following
---------------- render2016-1.html ------------------
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>
</title>
<style type="text/css">
#form1 {
height: 579px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<form method="post" action="Default4.aspx" id="form1">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="CoCWzO/vWYkNRBCpFbIQ3IPvm7ueZdcg7gaDU3S4YPnnHh6YhLHAUgVDIaTSe9kaEwNqnlScnHq/YYOhf5gw+s7Wu6bUynanqupEJH8WIzNkDwKd6PYNgPGXNfkR6Mgk" />
<script language="JavaScript">
<!--
$(document).ready(function(){
$(':input').keydown(function(e){
if (e.keyCode == 13 ){
$(':input').eq($(':input').index($(this)) + 1).trigger('focus');
}
});
});
// -->
</script><script language="JavaScript">
<!--
$(document).ready(function(){
$(':input').keydown(function(e){
if (e.keyCode == 13 ){
$(':input').eq($(':input').index($(this)) + 1).trigger('focus');
}
});
});
// -->
</script>
<input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="44C02278" />
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="U2n4TbuH4IvEG/Bsq9RE7wS5fX5d/+Qb6Mh7sWlT0q4BldcSVq6R7yngmv2WKGXiMAOpblFJWUaqnXayL+azyfmb/UwOyyH57eegvf6lOVxY9j4GXrBoz8wSRk82espsW3DJ0rCLi48RAmK9xboMgunbb+oWfe6ScP1QWMsabqU=" />
<input name="ServerControl61" type="text" value="123" id="ServerControl61" />
<input name="ServerControl62" type="text" id="ServerControl62" />
<input type="submit" name="Button1" value="Button" id="Button1" />
</form>
</body>
</html>
---------------------------------------------------------------------
while I use the browser debug tool to run the code , there is a error message as below
---------------------------------------------------------------------
This page contains the following errors:
error on line 1 at column 2: StartTag: invalid element name
Below is a rendering of the page up to the first error.
---------------------------------------------------------------------
Is there anybody can tell me where is the problem ?
the javascript is as the following and is tested , which can use "Enter" key to go to the next textbox
------ test0205.html ------------------
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(':input').keydown(function(e){
if (e.keyCode == 13 ){
$(':input').eq($(':input').index($(this)) + 1).trigger('focus');
}
});
});
</script>
</head>
<body>
<input type="text" name="firstname"><br>
Last name:<br>
<input type="text" name="lastname">
</body>
</html>
--------------------------------------------------------------------
But after I put it into my server contro project (ServerControl6)
and use the control in the web page (Default4.aspx) , the code as follows
-------------------- ServerControl6.cs -------------------
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace ServerControl6
{
[DefaultProperty("Text")]
[ToolboxData("<{0}:ServerControl6 runat=server></{0}:ServerControl6>")]
public class ServerControl6 : System.Web.UI.WebControls.TextBox
{
[Bindable(true)]
[Category("Appearance")]
[DefaultValue("")]
[Localizable(true)]
public string Text
{
get
{
String s = (String)ViewState["Text"];
return ((s == null)? "[" + this.ID + "]" : s);
}
set
{
ViewState["Text"] = value;
}
}
protected override void OnPreRender(EventArgs e)
{
base.OnPreRender(e);
string scriptKey = "TextBoxEnter" + this.UniqueID;
ClientScriptManager cs = Page.ClientScript;
Type cstype = this.GetType();
if (!cs.IsClientScriptBlockRegistered(scriptKey))
{
string scriptBlock =
@"<script language=""JavaScript"">
<!--
$(document).ready(function(){
$(':input').keydown(function(e){
if (e.keyCode == 13 ){
$(':input').eq($(':input').index($(this)) + 1).trigger('focus');
}
});
});
// -->
</script>";
cs.RegisterClientScriptBlock(cstype, scriptKey, scriptBlock);
}
}
}
}
-------------------- AssemblyInfo.cs -----------------------
using System.Reflection;
using System.Runtime.CompilerServices;
using System.Runtime.InteropServices;
using System.Web.UI;
[assembly: AssemblyTitle("ServerControl6")]
[assembly: AssemblyDescription("")]
[assembly: AssemblyConfiguration("")]
[assembly: AssemblyCompany("")]
[assembly: AssemblyProduct("ServerControl6")]
[assembly: AssemblyCopyright("Copyright © 2016")]
[assembly: AssemblyTrademark("")]
[assembly: AssemblyCulture("")]
[assembly: ComVisible(false)]
[assembly: Guid("02a2c0e8-68f5-4df3-b8c2-97f433584357")]
[assembly: AssemblyVersion("1.0.0.0")]
[assembly: AssemblyFileVersion("1.0.0.0")]
[assembly: TagPrefix("ServerControl6", "aspSample")]
-------- Default4.aspx ------------------------------
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default4.aspx.cs" Inherits="Default4" %>
<%@ Register assembly="ServerControl6" namespace="ServerControl6" tagprefix="aspSample" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
#form1 {
height: 579px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div style="height: 525px">
<br />
<aspSample:ServerControl6 ID="ServerControl61" runat="server"></aspSample:ServerControl6>
<br />
<br />
<aspSample:ServerControl6 ID="ServerControl62" runat="server"></aspSample:ServerControl6>
<br />
<br />
<br />
<asp:Button ID="Button1" runat="server" Text="Button" />
</div>
</form>
</body>
</html>
---------------------------------------------------------------------
I tried to save the html code generated by asp.net as a html file(render2016-1.html) which is the following
---------------- render2016-1.html ------------------
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>
</title>
<style type="text/css">
#form1 {
height: 579px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<form method="post" action="Default4.aspx" id="form1">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="CoCWzO/vWYkNRBCpFbIQ3IPvm7ueZdcg7gaDU3S4YPnnHh6YhLHAUgVDIaTSe9kaEwNqnlScnHq/YYOhf5gw+s7Wu6bUynanqupEJH8WIzNkDwKd6PYNgPGXNfkR6Mgk" />
<script language="JavaScript">
<!--
$(document).ready(function(){
$(':input').keydown(function(e){
if (e.keyCode == 13 ){
$(':input').eq($(':input').index($(this)) + 1).trigger('focus');
}
});
});
// -->
</script><script language="JavaScript">
<!--
$(document).ready(function(){
$(':input').keydown(function(e){
if (e.keyCode == 13 ){
$(':input').eq($(':input').index($(this)) + 1).trigger('focus');
}
});
});
// -->
</script>
<input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="44C02278" />
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="U2n4TbuH4IvEG/Bsq9RE7wS5fX5d/+Qb6Mh7sWlT0q4BldcSVq6R7yngmv2WKGXiMAOpblFJWUaqnXayL+azyfmb/UwOyyH57eegvf6lOVxY9j4GXrBoz8wSRk82espsW3DJ0rCLi48RAmK9xboMgunbb+oWfe6ScP1QWMsabqU=" />
<input name="ServerControl61" type="text" value="123" id="ServerControl61" />
<input name="ServerControl62" type="text" id="ServerControl62" />
<input type="submit" name="Button1" value="Button" id="Button1" />
</body>
</html>
---------------------------------------------------------------------
while I use the browser debug tool to run the code , there is a error message as below
---------------------------------------------------------------------
This page contains the following errors:
error on line 1 at column 2: StartTag: invalid element name
Below is a rendering of the page up to the first error.
---------------------------------------------------------------------
Is there anybody can tell me where is the problem ?