[研究]ASP.NET,WebForm,TextBox1值自動更新到TextBox2，用jQuery
2024-03-22
環境：Visual Studio 2022 + ASP.NET + WebForm + Web Application + C# + SQL Server 2019 + SQL Server Management Studio (SSMS) 19
********************************************************************************
Default2.aspx，注意，在 FormView1 中或不在，JavaScript 寫法有點不同
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default2.aspx.cs"
Inherits="WebApplication1.Default2" %>
<!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 src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#<%=FormView1.FindControl("TextBox1").ClientID%>').change(function () {
var textBox1Value = $(this).val();
$('#<%=FormView1.FindControl("TextBox2").ClientID%>').val(textBox1Value);
});
});
</script>
<script type="text/javascript">
$(document).ready(function () {
$('#<%=TextBox3.ClientID%>').change(function () {
var textBox1Value = $(this).val();
$('#<%=TextBox4.ClientID%>').val(textBox1Value);
});
});
</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") %>' />
<br />
Field2:<asp:TextBox ID="TextBox2" runat="server" Text='<%# Bind("Field2") %>' Enabled="false" />
<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"></asp:TextBox><br />
<asp:TextBox ID="TextBox4" runat="server"></asp:TextBox>
</form>
</body>
</html>
|
********************************************************************************
如果是在 MasterPage 中，下面實際測試可用
Default5.aspx
<%@ Page Title="" Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true"
CodeBehind="Default5.aspx.cs" Inherits="WebApplication1.Default5" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#<%=FormView1.FindControl("TextBox1").ClientID%>').change(function () {
var textBox1Value = $(this).val();
$('#<%=FormView1.FindControl("TextBox2").ClientID%>').val(textBox1Value);
});
});
</script>
<script type="text/javascript">
$(document).ready(function () {
$('#<%=TextBox3.ClientID%>').change(function () {
var textBox1Value = $(this).val();
$('#<%=TextBox4.ClientID%>').val(textBox1Value);
});
});
</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") %>' />
<br />
Field2:<asp:TextBox ID="TextBox2" runat="server" Text='<%# Bind("Field2") %>' Enabled="false" />
<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"></asp:TextBox><br />
<asp:TextBox ID="TextBox4" runat="server"></asp:TextBox>
</asp:Content>
|
(完)
相關
[研究]ASP.NET, WebForm, 為何下面連 TextBox 輸入框都看不到https://shaurong.blogspot.com/2024/03/aspnet-webform-textbox.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
沒有留言:
張貼留言