2024年4月5日 星期五

[研究]ASP.NET,WebForm,TextBox1值自動更新到TextBox2，用JavaScript

[研究]ASP.NET,WebForm,TextBox1值自動更新到TextBox2，用JavaScript

2024-04-05

環境：Visual Studio 2022 + ASP.NET + WebForm + Web Application + C# + SQL Server 2019 + SQL Server Management Studio (SSMS) 19

********************************************************************************

TextBox1 輸入，TextBox2 自動更新成 TextBox1 ，用前端 JavaScript 做

Default11.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default11.aspx.cs"
    Inherits="WebApplication1.Default11" %>

<!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>
</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") %>' oninput="TextBox1UpdateTextBox2(this.value)" />
                <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="更新" />
                &nbsp;<asp:LinkButton ID="UpdateCancelButton" runat="server" CausesValidation="False" CommandName="Cancel" Text="取消" />
            </EditItemTemplate>
        </asp:FormView>

        <asp:TextBox ID="TextBox3" runat="server" oninput="TextBox3UpdateTextBox4(this.value)"></asp:TextBox><br />
        <asp:TextBox ID="TextBox4" runat="server"></asp:TextBox>
    </form>
<script>
    function TextBox1UpdateTextBox2() {
        var textBox1Value = document.getElementById("<%= FormView1.FindControl("TextBox1").ClientID %>").value;
        document.getElementById("<%= FormView1.FindControl("TextBox2").ClientID %>").value = textBox1Value;
    }
</script>
    <script>
        function TextBox3UpdateTextBox4() {
            var textBox1Value = document.getElementById("<%= TextBox3.ClientID %>").value;
    document.getElementById("<%= TextBox4.ClientID %>").value = textBox1Value;
        }
    </script>
</body>
</html>

測試正常





********************************************************************************

在 MasterPage 中，

Default12.aspx


<%@ Page Title="" Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true"
    CodeBehind="Default12.aspx.cs" Inherits="WebApplication1.Default12" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <script>
        function TextBox1UpdateTextBox2() {
            var textBox1Value = document.getElementById("<%= FormView1.FindControl("TextBox1").ClientID %>").value;
            document.getElementById("<%= FormView1.FindControl("TextBox2").ClientID %>").value = textBox1Value;
        }
    </script>
    <script>
        function TextBox3UpdateTextBox4() {
            var textBox1Value = document.getElementById("<%= TextBox3.ClientID %>").value;
            document.getElementById("<%= TextBox4.ClientID %>").value = 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") %>' oninput="TextBox1UpdateTextBox2(this.value)" />
            <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="更新" />
            &nbsp;<asp:LinkButton ID="UpdateCancelButton" runat="server" CausesValidation="False" CommandName="Cancel" Text="取消" />
        </EditItemTemplate>
    </asp:FormView>

    <asp:TextBox ID="TextBox3" runat="server" oninput="TextBox3UpdateTextBox4(this.value)"></asp:TextBox><br />
    <asp:TextBox ID="TextBox4" runat="server"></asp:TextBox>
</asp:Content>

實際測試正常。

(完)

相關

[研究]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

張貼者： 於
標籤： , ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)