【已解决】用户控件中如何正确使用JavaScript代码

牙膏人 · 发表于 2014-7-4 16:20:28

背景：使用了两个一样的自定义控件（自定义控件类：WebUserControl1），且自定义控件内部设置了回车自动跳到下一个控件的功能；
用按钮通过javascript对自定义控件内部的隐藏表单进行赋值。

总共两个问题：
1、页面上的第二个自定义控件当在4的位置敲回车就到第一个自定义控件里面去了。
2、点击”给值“之后能看到隐藏表单域里面的值，但在页面上点”取值“按钮获取不到。

牙膏人 · 发表于 2014-7-4 16:47:24

随后的截图

牙膏人 · 发表于 2014-7-4 16:48:22

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="WebUserControl1.ascx.cs" Inherits="EmptyProjectNet20_FineUI.WebUserControl1" %>
<f:Form ID="Form3" runat="server" BodyPadding="10px" ShowHeader="false" LabelWidth="120px" ShowBorder="false">
<Rows>
<f:FormRow ID="FormRow1" runat="server" ColumnWidths="26% 26% 26%">
<Items>
<f:NumberBox ID="nm1" runat="server" Label="项1" Required="true" NextFocusControl="nm2">
</f:NumberBox>
<f:NumberBox ID="nm2" runat="server" Label="项2" MaxValue="100" MinValue="0" Required="true" DecimalPrecision="4" NextFocusControl="nm3">
</f:NumberBox>
<f:NumberBox ID="nm3" runat="server" Label="项3" MaxValue="100" MinValue="0" Required="true" DecimalPrecision="4">
</f:NumberBox>
<f:HiddenField runat="server" ID="hf001"></f:HiddenField>
<f:Button runat="server" EnablePostBack="false" Text="给值" OnClientClick="SetV();"></f:Button>
</Items>
</f:FormRow>
</Rows>
</f:Form>
<script type="text/javascript" >
function SetV() {
var id = '<%=hf001.ClientID %>';
document.getElementById(id).value = "123";
alert(document.getElementById(id).value);
}
</script>

复制代码

牙膏人 · 发表于 2014-7-4 16:48:48

using System;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace EmptyProjectNet20_FineUI
{
public partial class WebUserControl1 : System.Web.UI.UserControl
{
protected void Page_Load(object sender, EventArgs e)
{
}
public string GetValue()
{
return this.hf001.Text;
}
}
}

复制代码

牙膏人 · 发表于 2014-7-4 16:49:08

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Test.aspx.cs" Inherits="EmptyProjectNet20_FineUI.Test" %>
<%@ Register Src="~/WebUserControl1.ascx" TagPrefix="uc1" TagName="WebUserControl1" %>
<!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>
</head>
<body>
<f:PageManager runat="server" />
<form id="form1" runat="server">
<f:Panel runat="server">
<Items>
<f:UserControlConnector runat="server">
<uc1:WebUserControl1 runat="server" id="WebUserControl1" />
<uc1:WebUserControl1 runat="server" id="WebUserControl2" />
</f:UserControlConnector>
<f:Button runat="server" ID="btnA" Text="取我" OnClick="btnA_Click"></f:Button>
</Items>
</f:Panel>
</form>
</body>
</html>

复制代码

牙膏人 · 发表于 2014-7-4 16:49:28

using System;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace EmptyProjectNet20_FineUI
{
public partial class Test : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void btnA_Click(object sender, EventArgs e)
{
string strA = this.WebUserControl1.GetValue();
FineUI.Alert.Show(strA);
}
}
}

复制代码

sanshi · 发表于 2014-7-4 17:05:00

给个ZIP包，也好调试

牙膏人 · 发表于 2014-7-4 17:15:16

sanshi 发表于 2014-7-4 17:05
给个ZIP包，也好调试

在群里面有，这边太大放不上来

sanshi · 发表于 2014-7-5 10:30:08

第一个问题是FineUI的BUG。

第二个问题是自身代码问题：由于页面包含两个相同的用户控件，所以生成的HTML代码也是两份，如下所示：

<div id="ctl04_wrapper">
<script type="text/javascript" >
function SetV() {
var id = 'ctl04_ctl00_WebUserControl1_Form3_FormRow1_hf001';
document.getElementById(id).value = "123";
alert(document.getElementById(id).value);
}
</script>
<script type="text/javascript" >
function SetV() {
var id = 'ctl04_ctl00_WebUserControl2_Form3_FormRow1_hf001';
document.getElementById(id).value = "123";
alert(document.getElementById(id).value);
}
</script>
</div>

复制代码

很明显，可以看出，第二个 SetV 的定义覆盖了第一个 SetV 的定义，所以页面上对 SetV 的调用只会对第二个控件中的隐藏字段赋值，当然在后台无法取到第一个用户控件中的隐藏字段值。

正确的做法是：
1. 把 SetV 移动到页面中（test.aspx）：

<script type="text/javascript">
function setV(id) {
document.getElementById(id).value = "123";
alert(document.getElementById(id).value);
}
</script>

复制代码

2. 把用户控件中的 SetV 删除，然后在后台代码中：

protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
btnGeizhi.OnClientClick = String.Format("setV('{0}-inputEl');", hf001.ClientID);
}
}

复制代码

还要注意一点：这里只所以在 hf001.ClientID 后面又加个 -inputEl ，是由 HiddenField 生成 HTML 决定的（可以用浏览器调试工具看下生成的HTML结构）。

		自动登录	找回密码
密码			立即注册

【已解决】用户控件中如何正确使用JavaScript代码

本帖子中包含更多资源

本帖子中包含更多资源