用户控件中的 JavaScript 验证
2.40/5 (9投票s)
本文介绍了如何在用户控件中实现 JavaScript 块。
引言
我一直在互联网上寻找从用户控件调用 JavaScript 验证代码的方法，但未能找到任何方法。然后，我的一个朋友帮助我完成了这项任务。本文将帮助遇到我所遇到情况的初学者和开发人员。在我们的用户控件中，有一个下拉列表框，其中动态加载了数据。发生的情况是，我们需要在下拉列表框的更改处理程序上设置焦点到提交按钮，甚至希望在其中加入一些验证。一旦用户更改了下拉列表框中的一个选项并按下 Enter 按钮，它应该调用提交按钮的事件处理程序函数。在我带您了解这个示例的过程中，这一点将会变得清晰。
关键场景
- 创建一个 Web 表单：Main.aspx
- 创建一个用户控件：UserJs.ascx
用户控件的实现
我们可以使用 VS.NET 2003 通过在“解决方案资源管理器”项目视图中选择一个新项目来创建用户控件。在创建用户控件时，我们在代码隐藏中添加以下代码。在页面加载时，我们注册 JavaScript 函数以便从代码隐藏中调用它。
'Put user code to initialize the page here
'<summary>
'This function will check whether selected index is 0
'</summary>
Dim strScript1 As String = "< script language" & _
"=JavaScript > function CodeBehindButtonJs() {"
strScript1 += "if (document.forms[0]." & uCtrlId & _
"_ddlItem.selectedIndex == 0){alert('Validation:" & _
"Please Select Item');return false;};}"
strScript1 += "<"
strScript1 += "/"
strScript1 += "script >"
'<summary>
'This function will set focus on submit
'button on dropdownlist change event.
'</summary>
Dim strScript2 As String = "< script language=" & _
"JavaScript > function CodeBehindDDlJs(me) {"
strScript2 += "document.forms[0]." & uCtrlId & "_btnSubmit.focus();}"
'Here you can achieve id's by passinf this pointer too.
strScript2 += "alert('You selected '+ me.value)}"
strScript2 += "<"
strScript2 += "/"
strScript2 += "script>"
'<summary>
'Register javascript block to server control event.
'</summary>
If (Not Page.IsStartupScriptRegistered("Startup1")) Then
Page.RegisterStartupScript("Startup1", strScript1)
End If
If (Not Page.IsStartupScriptRegistered("Startup2")) Then
Page.RegisterStartupScript("Startup2", strScript2)
End If
'<summary>
'Call javascript function on controls event
'</summary>
ddlItem.Attributes.Add("onchange", "return CodeBehindDDlJs(this);")
btnSubmit.Attributes.Add("onClick", "return CodeBehindButtonJs();")
如果我们查看任何包含用户控件的 aspx 页面的源代码，我们将发现下拉列表框的源代码将如下所示
<select name="UserJs1:ddlItem" id="UserJs1_ddlItem"
onchange="return CodeBehindDDlJs();" style="width:120px;" >
在上述情况下，下拉列表框 ID 在用户控件中为 ddlItem，在 Main.apsx 中为 "UserJs1_ddlItem"。为了捕获用户控件中的 HTML 元素，我们需要使用 document.form[0].elementId。因此，用户控件需要知道这个元素 ID。为此，我们在用户控件中定义属性，这些属性将在 Main.aspx 中使用。
Public uCtrlId As String = ""
Main.aspx 的实现
现在我们创建 Main.aspx。在 Main.aspx 中，拖动并注册用户控件。在 HTML 部分中，包含以下属性，如所示。这将设置用户控件 ID 的值，并在用户控件中检索该值以进行 JavaScript 验证。
<body MS_POSITIONING="GridLayout">
<form id="Form1" method="post" runat="server">
<uc1:userJs id="UserJs1" runat="server" uCtrlId="UserJs1"> </uc1:userJs>
</form>
< /body>
我们可以看到我们的情况有所不同。如果我们必须通过自身来控制任何 Web 控件，例如在更改事件处理程序上，我们必须捕获选定的索引，然后上述过程就不会很困难。在这种情况下，我们必须将 'CodeBehindDDlJs(this)' 指针传递给 JavaScript 函数。该指针实际上是指向对象的指针。我演示的情况是，控件操作对另一个控件有影响，在这种情况下，我们在用户控件 JavaScript 中没有其他控件的 ID。因此，我们必须设置一个变量属性来存储用户控件 ID。这将是 document.form[0].usercontolId_ddlItem.selectedIndex。事情就是这样运作的。可能有很多方法可以实现这一点。我找到了一个并且喜欢分享它。希望这会有所帮助。
注意：我试图使用上述方法捕获 LinkButton 对象，但在 alert 语句中，我总是将其作为“未定义”获取。