[研究]ASP.NET,WebForm,TextBox1值自動更新到TextBox2，用CssClass
2024-04-06
環境：Visual Studio 2022 + ASP.NET + WebForm + Web Application + C# + SQL Server 2019 + SQL Server Management Studio (SSMS) 19
********************************************************************************
TextBox1 輸入，TextBox2 自動更新成 TextBox1 ，用前端 JavaScript 做
Default31.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default31.aspx.cs"
Inherits="WebApplication1.Default31" %>
<!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>
<script>
document.addEventListener("DOMContentLoaded", function () {
var textBox1 = document.querySelector(".textBox1");
var textBox2 = document.querySelector(".textBox2");
var textBox3 = document.querySelector(".textBox3");
var textBox4 = document.querySelector(".textBox4");
textBox1.addEventListener("input", function () {
textBox2.value = this.value;
});
textBox3.addEventListener("input", function () {
textBox4.value = this.value;
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:MyDBConnectionString %>"
SelectCommand="SELECT * FROM [MyTable]"
UpdateCommand="UPDATE [MyTable] SET [Field1] = @Field1, [Field2] = @Field2 WHERE [SN] = @SN">
<UpdateParameters>
<asp:Parameter Name="Field1" Type="String" />
<asp:Parameter Name="Field2" Type="String" />
<asp:Parameter Name="SN" Type="Int32" />
</UpdateParameters>
</asp:SqlDataSource>
<asp:FormView ID="FormView1" runat="server" DataSourceID="SqlDataSource1"
DefaultMode="Edit"
AllowPaging="True" DataKeyNames="SN"
>
<EditItemTemplate>
SN:<asp:Label ID="SNLabel1" runat="server" Text='<%# Eval("SN") %>' />
<br />
Field1:<asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("Field1") %>' CssClass="textBox1" />
<br />
Field2:<asp:TextBox ID="TextBox2" runat="server" Text='<%# Bind("Field2") %>' Enabled="false" CssClass="textBox2" />
<br />
<asp:LinkButton ID="UpdateButton" runat="server" CausesValidation="True" CommandName="Update" Text="更新" />
<asp:LinkButton ID="UpdateCancelButton" runat="server" CausesValidation="False" CommandName="Cancel" Text="取消" />
</EditItemTemplate>
</asp:FormView>
<asp:TextBox ID="TextBox3" runat="server" CssClass="textBox3"></asp:TextBox><br />
<asp:TextBox ID="TextBox4" runat="server" CssClass="textBox4"></asp:TextBox>
</form>
</body>
</html>
|
********************************************************************************
在 MasterPage 中，程式碼同上，實際測試正常。
Default32.aspx
<%@ Page Title="" Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true"
CodeBehind="Default32.aspx.cs" Inherits="WebApplication1.Default32" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<script>
document.addEventListener("DOMContentLoaded", function () {
var textBox1 = document.querySelector(".textBox1");
var textBox2 = document.querySelector(".textBox2");
var textBox3 = document.querySelector(".textBox3");
var textBox4 = document.querySelector(".textBox4");
textBox1.addEventListener("input", function () {
textBox2.value = this.value;
});
textBox3.addEventListener("input", function () {
textBox4.value = this.value;
});
});
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:MyDBConnectionString %>"
SelectCommand="SELECT * FROM [MyTable]"
UpdateCommand="UPDATE [MyTable] SET [Field1] = @Field1, [Field2] = @Field2 WHERE [SN] = @SN">
<UpdateParameters>
<asp:Parameter Name="Field1" Type="String" />
<asp:Parameter Name="Field2" Type="String" />
<asp:Parameter Name="SN" Type="Int32" />
</UpdateParameters>
</asp:SqlDataSource>
<asp:FormView ID="FormView1" runat="server" DataSourceID="SqlDataSource1"
DefaultMode="Edit"
AllowPaging="True" DataKeyNames="SN"
>
<EditItemTemplate>
SN:<asp:Label ID="SNLabel1" runat="server" Text='<%# Eval("SN") %>' />
<br />
Field1:<asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("Field1") %>' CssClass="textBox1" />
<br />
Field2:<asp:TextBox ID="TextBox2" runat="server" Text='<%# Bind("Field2") %>' Enabled="false" CssClass="textBox2" />
<br />
<asp:LinkButton ID="UpdateButton" runat="server" CausesValidation="True" CommandName="Update" Text="更新" />
<asp:LinkButton ID="UpdateCancelButton" runat="server" CausesValidation="False" CommandName="Cancel" Text="取消" />
</EditItemTemplate>
</asp:FormView>
<asp:TextBox ID="TextBox3" runat="server" CssClass="textBox3"></asp:TextBox><br />
<asp:TextBox ID="TextBox4" runat="server" CssClass="textBox4"></asp:TextBox>
</asp:Content>
|
(完)
相關
[研究]ASP.NET,WebForm,TextBox1值自動更新到TextBox2，用CssClass
https://shaurong.blogspot.com/2024/04/aspnetwebformtextbox1textbox2cssclass.html
[研究]ASP.NET,WebForm,TextBox1值自動更新到TextBox2，用OnTextChanged
https://shaurong.blogspot.com/2024/04/aspnetwebformtextbox1textbox2ontextchan.html
[研究]ASP.NET,WebForm,TextBox1值自動更新到TextBox2，用JavaScript
https://shaurong.blogspot.com/2024/04/aspnetwebformtextbox1textbox2javascript.html
[研究]ASP.NET,WebForm,TextBox1值自動更新到TextBox2，用jQuery
https://shaurong.blogspot.com/2024/03/aspnetwebformtextbox1textbox2jquery.html
沒有留言:
張貼留言