如何在ASP.NET中使用JavaScript

ASP.NET中JavaScript

在ASP.NET页面中使用JavaScript可以使您的应用程序看起来运行更快，并防止对服务器的不必要调用。 JavaScript可用于在用户浏览器中执行客户端功能，而无需回叫服务器。 从而节省资源。

下面的示例演示如何使用ASP.NET按钮来触发修改ASP.NET TextBoxJavaScript调用。

例

以下示例将向您显示：

• 如何向页面动态添加JavaScript
• 用户单击按钮时如何调用JavaScript函数
• 如何允许或阻止按钮回发到服务器

首先，您将必须创建一个ASP.NET项目。 本示例使用一个MasterPage，因此在创建ASP.NET项目时，请确保将MasterPage添加到其中，然后将Web Content Form（aspx页面）添加到项目中，并确保在添加Content Form时选择MasterPage 。

在您的ASPX页面（您的内容表单）中，您需要添加一个TextBox。 此文本框将用于显示文本“ hello world”。

您还需要添加一个ASP.NET按钮。 这个ASP.NET按钮将触发一个JavaScript函数，该函数询问用户是否要插入文本“ hello world！”。 使用JavaScript代码进入ASP.NET TextBox ...我们将在一分钟内进入JavaScript函数。

请记住，一旦为浏览器呈现了ASP.NET按钮和文本框，它们就是可以通过JavaScript修改的简单html对象。

您的页面应类似于以下内容：

<%@ Page Language="VB" MasterPageFile="~/MasterPage.master" AutoEventWireup="false" CodeFile="CTest.aspx.vb" Inherits="Test" title="Untitled Page" %> 
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server"> 
         <asp:TextBox id="MyTextbox" runat="server"></asp:Textbox>
         <asp:Button id="HelloWorldButton" runat="server" text="Say Hi" /> 
</asp:Content> 

请注意，ASP.NET按钮有两个单击事件：

• JavaScript onclick事件，该事件在将页面提交到服务器之前在浏览器中执行
• .NET OnClick事件，该事件在服务器上执行并由您的VB.NET或C＃代码处理。

为了调用JavaScript函数，我们必须分配按钮JavaScript“ onclick”事件来调用该方法。 可以通过两种方式设置JavaScript“ onclick”事件：使用按钮的OnClientClick属性在asp代码中声明性地设置； 或动态使用VB.NET或C＃代码中按钮的“属性”属性。

要声明性地提供一种在JavaScript“ onclick”事件期间调用的方法，您可以修改按钮声明，并为其提供OnClientClick属性的值：

<asp:Button id="HelloWorldButton" runat="server" text="Say Hi" OnClientClick="return DisplayHelloWorld();" />

请注意，如果设置ASP.NET按钮的OnClick属性，它将尝试回发到服务器并执行具有您提供的名称的方法：

<!-- The following will postback to the server and attempt to execute a method named DisplayHelloWorld -->
<asp:Button id="HelloWorldButton" runat="server" text="Say Hi" OnClick="return DisplayHelloWorld();" />

在此示例中，我将向您展示如何使用按钮的“属性”属性动态设置JavaScript“ onclick”事件。 在Page PeRender事件（或者如果您喜欢Page Load事件）期间，需要配置按钮以在单击JavaScript函数时调用它。

以下代码将按钮JavaScript“ onclick”事件分配给一个名为“ DisplayHelloWorld”JavaScript方法。 它向方法传递一个参数，该参数是TextBox在浏览器中呈现后的ID：

Private Sub Test_PreRender(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.PreRender 
      CreateHelloWorldJavaScript() 
     ' Please note that here we are providing the DisplayHelloWorld function with 
     ' the MyTextBox.ClientID.  The reason we use the ClientID is because when 
     ' the TextBox is rendered in the browser it is given a special "ClientID" ...it's name
     ' changes from "MyTextBox" to something like "ctl00_ContentPlaceHolder1_MyTextBox"
     ' when using MasterPage.  Therefore, in order for the JavaScript to know what the
     ' TextBox's id is in the page, we pass it the TextBox's ClientID
     If IsPostBack = False Then
       'note the "return", if you set a button to return False it will not postback to the server.
         HelloWorldButton.Attributes.Add("onclick","return DisplayHelloWorld('" + MyTextbox.ClientID + "');")
    End If 
End Sub  

注意，有一个名为“ CreateHelloWorldJavaScript”的Sub的调用。

此子负责动态创建JavaScript并将其注册在页面中：

Private Sub CreateHelloWorldJavaScript() 
  If Not Page.ClientScript.IsStartupScritRegistered("HelloWorldScript") Then
     Dim script As New Text.StringBuilder
     script.Append("function DisplayHelloWorld(textboxID)" + vblf)
     script.Append("{" +vblf)
     script.Append("     if(confirm("Do you want to use JavaScript code to display the text?")==true)" + vblf)
     script.Append("     {     document.getElementById(textboxID).value = 'Hello World! From JavaScript!';"+ vblf)
     script.Append("           return false;"+ vblf)
     script.Append("     }" +vblf)
     script.Append("     else"+ vblf)
     script.Append("     {     return true;}"+ vblf)
     script.Append("}" +vblf) 
     Page.ClientScript.RegisterStartupScript(page.GetType,"HelloWorldScript",script.ToString()) 
  End If
End Sub  

上面的函数使用StringBuilder来动态创建JavaScript函数来保存代码。 创建脚本后，它将使用“ Page.ClientScript.RegisterStartupScript”方法在页面上注册JavaScript并使其在浏览器中可用。

现在，JavaScript在浏览器中可用，因此可以在Web浏览器中单击按钮时执行它，因为我们已将按钮设置为在JavaScript“ onclick”事件期间调用它。

上面代码中动态生成JavaScript函数显示一个确认框，询问用户是否要使用JavaScript代码显示文本。 如果用户单击“是”，则JavaScript将找到TextBox，将其文本设置为“ Hello World！From JavaScript！”，然后返回false。 如果用户单击“否”，则JavaScript函数将返回true，这允许页面将其回发到服务器，以便可以调用服务器端代码。

重要的是要注意我之前快速跳过的一些内容。

在PreRender事件中，当我们将JavaScript“ onclick”事件设置为调用JavaScript方法时，我们告诉它返回JavaScript“ DisplayHelloWorld”方法返回的值：

 HelloWorldButton.Attributes.Add("onclick","return DisplayHelloWorld('" + MyTextbox.ClientID + "');")

现在，如果JavaScript方法返回false，则“ onclick”事件将返回false，并且将取消向服务器的回发。 如果JavaScript方法返回true，则“ onclick”事件将返回true，并且发回服务器的操作将照常继续。 这样，您可以防止发生不必要的回发到服务器。

哦，还有最后一件事要做：实现在文本框中写“ Hello World”的服务器代码：

Protected Sub HelloWorldButton_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles HelloWorldButton.Click
    MyTextBox.Text = "Hello World! From the server!"     
End Sub

仅当允许该按钮回发到服务器时，才会执行此方法。 概括

• 您有一个.NET按钮，该按钮将调用名为“ DisplayHelloWorld”JavaScript函数以显示文本“ Hello World！”。 在.NET TextBox中。
  DisplayHelloWorld函数采用一个参数：.NET TextBox的ID。 传递到DisplayHelloWorld函数的TextBox ID是TextBox的ClientID。 我们使用ClientID的原因是因为（当使用MasterPages或Web用户控件时）.NET TextBox在浏览器中呈现时与.NET变量名称不匹配时，将被赋予一个特殊的ID。
  
• 您已将JavaScript调用分配给Button，以便在触发按钮的（JavaScript）“ onclick”事件时，它将调用JavaScript函数“ DisplayHelloWorld”。
  
• 页面中已经注册了“ DisplayHelloWorld” JavaScript函数
• JavaScript函数询问用户是否要从JavaScript代码或从服务器代码显示“ Hello World”。 如果用户要显示来自JavaScript的文本，则该函数通过使用document.getElementById（）函数从页面中检索TextBox来将文本“ Hello World！From JavaScript”插入TextBox中。 否则，该函数返回true，从而允许回发。

From: https://bytes.com/topic/asp-net/insights/817824-how-use-javascript-asp-net