FineUI 官方论坛

标题: 【已解决】用户控件中如何正确使用JavaScript代码 [打印本页]
作者: 牙膏人    时间: 2014-7-4 16:20
标题: 【已解决】用户控件中如何正确使用JavaScript代码
背景：使用了两个一样的自定义控件（自定义控件类：WebUserControl1），且自定义控件内部设置了回车自动跳到下一个控件的功能；
           用按钮通过javascript对自定义控件内部的隐藏表单进行赋值。

总共两个问题：
1、页面上的第二个自定义控件当在4的位置敲回车就到第一个自定义控件里面去了。
2、点击”给值“之后能看到隐藏表单域里面的值，但在页面上点”取值“按钮获取不到。
作者: 牙膏人    时间: 2014-7-4 16:47
随后的截图
作者: 牙膏人    时间: 2014-7-4 16:48
  1. <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="WebUserControl1.ascx.cs" Inherits="EmptyProjectNet20_FineUI.WebUserControl1" %>

  3. <f:Form ID="Form3" runat="server" BodyPadding="10px" ShowHeader="false" LabelWidth="120px" ShowBorder="false">
  4.     <Rows>
  5.         <f:FormRow ID="FormRow1" runat="server" ColumnWidths="26% 26% 26%">
  6.             <Items>
  7.                 <f:NumberBox ID="nm1" runat="server" Label="项1" Required="true" NextFocusControl="nm2">
  8.                 </f:NumberBox>
  9.                 <f:NumberBox ID="nm2" runat="server" Label="项2" MaxValue="100" MinValue="0" Required="true" DecimalPrecision="4" NextFocusControl="nm3">
  10.                 </f:NumberBox>
  11.                 <f:NumberBox ID="nm3" runat="server" Label="项3" MaxValue="100" MinValue="0" Required="true" DecimalPrecision="4">
  12.                 </f:NumberBox>
  13.                 <f:HiddenField runat="server" ID="hf001"></f:HiddenField>
  14.                 <f:Button runat="server" EnablePostBack="false" Text="给值" OnClientClick="SetV();"></f:Button>
  15.             </Items>
  16.         </f:FormRow>
  17.     </Rows>
  18. </f:Form>
  19. <script type="text/javascript" >
  20.     function SetV() {
  21.         var id = '<%=hf001.ClientID %>';
  22.         document.getElementById(id).value = "123";
  23.         alert(document.getElementById(id).value);
  24.     }
  25. </script>
复制代码
作者: 牙膏人    时间: 2014-7-4 16:48
  1. using System;
  2. using System.Collections.Generic;
  3. using System.Web;
  4. using System.Web.UI;
  5. using System.Web.UI.WebControls;

  7. namespace EmptyProjectNet20_FineUI
  8. {
  9.     public partial class WebUserControl1 : System.Web.UI.UserControl
  10.     {
  11.         protected void Page_Load(object sender, EventArgs e)
  12.         {

  14.         }

  16.         public string GetValue()
  17.         {
  18.             return this.hf001.Text;
  19.         }
  20.     }
  21. }
复制代码
作者: 牙膏人    时间: 2014-7-4 16:49
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Test.aspx.cs" Inherits="EmptyProjectNet20_FineUI.Test" %>

  3. <%@ Register Src="~/WebUserControl1.ascx" TagPrefix="uc1" TagName="WebUserControl1" %>
  4. <!DOCTYPE html>

  6. <html xmlns="http://www.w3.org/1999/xhtml">
  7. <head runat="server">
  8. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  9.     <title></title>
  10. </head>
  11. <body>
  12.     <f:PageManager runat="server" />
  13.     <form id="form1" runat="server">
  14.     <f:Panel runat="server">
  15.         <Items>
  16.             <f:UserControlConnector runat="server">
  17.                 <uc1:WebUserControl1 runat="server" id="WebUserControl1" />
  18.                 <uc1:WebUserControl1 runat="server" id="WebUserControl2" />
  19.             </f:UserControlConnector>
  20.             <f:Button runat="server" ID="btnA" Text="取我" OnClick="btnA_Click"></f:Button>
  21.         </Items>
  22.     </f:Panel>
  23.     </form>
  24. </body>
  25. </html>
复制代码
作者: 牙膏人    时间: 2014-7-4 16:49
  1. using System;
  2. using System.Collections.Generic;

  4. using System.Web;
  5. using System.Web.UI;
  6. using System.Web.UI.WebControls;

  8. namespace EmptyProjectNet20_FineUI
  9. {
  10.     public partial class Test : System.Web.UI.Page
  11.     {
  12.         protected void Page_Load(object sender, EventArgs e)
  13.         {

  15.         }

  17.         protected void btnA_Click(object sender, EventArgs e)
  18.         {
  19.             string strA = this.WebUserControl1.GetValue();
  20.             FineUI.Alert.Show(strA);
  21.         }
  22.     }
  23. }
复制代码
作者: sanshi    时间: 2014-7-4 17:05
给个ZIP包，也好调试
作者: 牙膏人    时间: 2014-7-4 17:15
sanshi 发表于 2014-7-4 17:05
给个ZIP包，也好调试

在群里面有，这边太大放不上来
作者: sanshi    时间: 2014-7-5 10:30
第一个问题是FineUI的BUG。

第二个问题是自身代码问题：由于页面包含两个相同的用户控件，所以生成的HTML代码也是两份，如下所示：
  1.     <div id="ctl04_wrapper">
  2.                
  3. <script type="text/javascript" >
  4.     function SetV() {
  5.         var id = 'ctl04_ctl00_WebUserControl1_Form3_FormRow1_hf001';
  6.         document.getElementById(id).value = "123";
  7.         alert(document.getElementById(id).value);
  8.     }
  9. </script>

  11.                
  12. <script type="text/javascript" >
  13.     function SetV() {
  14.         var id = 'ctl04_ctl00_WebUserControl2_Form3_FormRow1_hf001';
  15.         document.getElementById(id).value = "123";
  16.         alert(document.getElementById(id).value);
  17.     }
  18. </script>

  20.             </div>
复制代码

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

正确的做法是：
1. 把 SetV 移动到 页面中（test.aspx）：
  1. <script type="text/javascript">
  2.         function setV(id) {
  3.             document.getElementById(id).value = "123";
  4.             alert(document.getElementById(id).value);
  5.         }
  6.     </script>
复制代码

2. 把用户控件中的 SetV 删除，然后在后台代码中：
  1. protected void Page_Load(object sender, EventArgs e)
  2.         {
  3.             if (!IsPostBack)
  4.             {
  5.                 btnGeizhi.OnClientClick = String.Format("setV('{0}-inputEl');", hf001.ClientID);
  6.             }
  7.         }
复制代码

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







欢迎光临 FineUI 官方论坛 (https://fineui.com/bbs/) Powered by Discuz! X3.4