使用从数据库中获取的数据填充 HTML 文本区域

Question

我提出我的案例研究：我正在 ASP.NET 中开发一个表格，其中显示从数据库中获取的字段（在本例中为 Nome、Cognome、Azienda、Provincia）我发现自己管理三个功能：添加、删除和更新。 前两个解决没有问题，但我在更新时遇到问题。为了管理它，我在后端开发了一个函数（随后由客户端的 AJAX 调用），除了使用 SELECT 查询来选择考虑到行（基于 ID）并通过阅读器检查它是否存在于数据库中。完成此操作后，我想我会检索该行字段的值并将它们插入相应的文本区域。 我找不到完成该功能的解决方案。我试过name.InnerHTML（关于名称字段），但它说名称字段没有参考。

C#代码：

        [WebMethod]
        public static void Popoladati(string ch)
        {
            int chiavInt = Convert.ToInt32(ch);
            string queryString = "SELECT * FROM Elenco WHERE Id_Identificazione = @chiavInt";
            int i = 0;

            using (SqlConnection connection = new SqlConnection(ConfigurationManager.ConnectionStrings["coso"].ConnectionString))
            {
                connection.Open();

                using (SqlCommand command = new SqlCommand(queryString, connection))
                {                 
                    SqlParameter parameter = new SqlParameter("chiavInt" , chiavInt);
                    command.Parameters.Add(parameter);

                    SqlDataReader reader = command.ExecuteReader();
                                       
                    while (reader.Read())
                    {
                        i++;
                    }
                    reader.Close();
               }
        }

AJAX 请求：

     function edit(chiav) {
     
        let param = { ch: chiav };

         $.ajax({
             type: "POST",
             url: "Update.aspx/Popoladati",
             data: JSON.stringify(param),
             contentType: "application/json; charset=utf-8",
             dataType: "json",
             global: false,
             async: false,
             function(a) {
                 return a.d;
             }
         });

         window.location.href = "Update.aspx?Id_Identificazione=" + chiav;
     }

我不知道我是否说清楚了，以防让我知道我会尝试更好地解释自己

Answer 1

嗯，你首先应该展示你是如何显示那个表格的。

您可以使用gridview、listview 或repeater。我强烈建议您使用其中一种来显示数据（这样您就可以相对轻松地将编辑后的数据发送回数据库）。

所以这是一个例子——我使用了列表视图。我在页面上拖动列表视图。点击listview，使用builder构建数据库查询和连接。

然后我删除编辑模板、交替模板，并删除将被放置在页面上的数据源控件。 （并删除列表视图控件属性表中的数据源设置。我这样做是因为这会为我生成所有标记，因此只需要不到 5 分钟的时间。

所以，现在我们有了这个标记：

   <asp:ListView ID="ListView1" runat="server" DataKeyNames="ID">
        <ItemTemplate>
            <tr style="">
                <td><asp:TextBox ID="FirstName" runat="server" Text='<%# Eval("FirstName") %>' /></td>
                <td><asp:TextBox ID="LastName" runat="server" Text='<%# Eval("LastName") %>' /></td>
                <td><asp:TextBox ID="HotelName" runat="server" Text='<%# Eval("HotelName") %>' /></td>
                <td><asp:TextBox ID="City" runat="server" Text='<%# Eval("City") %>' /></td>
                <td><asp:CheckBox ID="Active" runat="server" Checked='<%# Eval("Active") %>' /></td>
            </tr>
        </ItemTemplate>
        <LayoutTemplate>
            <table id="itemPlaceholderContainer" runat="server" border="0" style="">
                <tr runat="server" style="">
                    <th runat="server">FirstName</th>
                    <th runat="server">LastName</th>
                    <th runat="server">HotelName</th>
                    <th runat="server">City</th>
                    <th runat="server">Active</th>
                </tr>
                <tr id="itemPlaceholder" runat="server"></tr>
            </table>
        </LayoutTemplate>
    </asp:ListView>
    <br />
    <asp:Button ID="cmdSave" runat="server" Text="Save" />

好的，没有太多的标记。填充此视图的代码？我们有这个：

private DataTable rstTable = new DataTable();

protected void Page_Load(object sender, System.EventArgs e)
{
    if (IsPostBack == false)
    {
        LoadGrid();
        ViewState("MyTable") = rstTable;
    }
    else
        rstTable = ViewState("MyTable");
}

public void LoadGrid()
{
    string strSQL;

    strSQL = "SELECT ID, FirstName, LastName, HotelName, City, Active from tblHotels ORDER BY HotelName";

    using (SqlCommand cmdSQL = new SqlCommand(strSQL,
                               new SqlConnection(My.Settings.TEST3)))
    {
        cmdSQL.Connection.Open();
        rstTable.Load(cmdSQL.ExecuteReader);

        ListView1.DataSource = rstTable;
        ListView1.DataBind();
    }
}
}

注意我们如何拥有一个类（表单级别）表变量 - 我们将它持久保存在视图状态中（您也可以使用 session()。

好的，现在，到目前为止，代码非常少。当我们运行上面的代码时，我们得到了：

好的，现在我们需要保存按钮的代码。用户可以编辑、更改 - 实际上标签几乎就像电子表格一样。要保存编辑，用户可以点击保存按钮。保存按钮的代码现在是这样的：

protected void cmdSave_Click(object sender, EventArgs e)
{

// move values from list view back to table.

foreach (ListViewDataItem vRow in ListView1.Items)
{
    var OneRow = rstTable(vRow.DataItemIndex);
    OneRow("FirstName") = (TextBox)vRow.FindControl("FirstName").Text;
    OneRow("LastName") = (TextBox)vRow.FindControl("LastName").Text;
    OneRow("HotelName") = (TextBox)vRow.FindControl("HotelName").Text;
    OneRow("City") = (TextBox)vRow.FindControl("City").Text;
    OneRow("Active") = (CheckBox)vRow.FindControl("Active").Checked;
}

// now send table chagnes back to database

using (SqlCommand cmdSQL = new SqlCommand("SELECT ID, FirstName, LastName, HotelName, City, Active from tblHotels where ID = 0", new SqlConnection(My.Settings.TEST3)))
{
    SqlDataAdapter da = new SqlDataAdapter(cmdSQL);
    SqlCommandBuilder sqlBuild = new SqlCommandBuilder(da);

    da.Update(rstTable);
}
}

所以我们要做的就是将更改从列表视图拉回表中，然后使用数据适配器“更新”命令一次性将所有更改保存回数据库！

您当然可以添加一个撤消按钮 - 这只会再次调用加载网格，从而撤消任何编辑。

所以，就这一点而言，您真的不需要 ajax，而且您实际上根本不需要太多代码。

上述方法同样适用于 gridview 或 Repater 控件。

我倾向于喜欢列表视图 - 它确实会生成更多开箱即用的标记，但我只是为列表视图举办了一个完全删除标记派对。我更喜欢列表视图，因为您不需要一遍又一遍地将每个标准 .net 控件包装在“模板控件”中 - 我觉得很痛苦。

那么上面的概念呢？ 您创建一个数据表。将要编辑的数据拉到该表中。然后将表格绑定到 gridview/listview/repeater 以进行显示（这允许编辑）。

保存？

您将数据从数据重复项拉回到表中。然后使用数据适配器在 ONE shot 中更新所有更改——这不仅更快、更少代码、更少麻烦，而且数据适配器很智能，对于未更改的行，则不会在后台生成更新 sql。

我们编写的总代码？非常少，因此我们现在有了一个数据编辑系统，允许您编辑此类数据 - 它的行为非常接近电子表格，您甚至可以通过 Tab 键来移动光标。

因此，这种方法不仅在代码量方面节省了世界贫困，而且还意味着您可以编辑整个网格，并通过一个简单的操作保存整个网格。