完成后保存输入的 ASP.NET jQuery Ajax 表答案

【问题标题】：ASP.NET jQuery Ajax table with inputs save when done完成后保存输入的 ASP.NET jQuery Ajax 表
【发布时间】：2017-03-08 15:29:16
【问题描述】：

我有一个充满输入文本的表格，它们看起来像这样：

<input type='text' value='{Value}' id='{Model.ID}' class='ChckNumber' />

类名因列不同而不同，Model.ID 因行而异，列因列和行而异。

当输入文本变得没有焦点时，我调用一个 api 来使用用户输入的内容更新值，如下所示：

$("input[type=text]").on("focusout", function () {

        var id = $(this).attr("id");
        var column = $(this).attr("class");
        var value = $(this).val();

        if (typeof id !== "undefined" && typeof column !== "undefined" && typeof value !== "undefined") {

            $.ajax({
                url: "/api/Action/UpdateTable?id=" + id + "&column=" + column + "&value=" + value,
                type: "GET",
                error: function (request, status, error) {
                    InsertLogEntry(request.responseText + " From API Call /api/Action/UpdateTable");
                },
                success: function (data) {
                }
            });
        }

    });

这里是它的调用 API 控制器：

[HttpGet]
        public void UpdateTable(int id, string column, string value)
        {
            MethodClass method = new MethodClass();

            if(column != null && column != "" && id != 0)
            {
                method.UpdateTable(id, column, value);
            }
        }

这是我正在调用的方法：

public void UpdateTable(int id, string column, string value)
        {

            connection = new SqlConnection(connectionString);

            if(column.Contains("Date"))
            {
                DateTime dt = Convert.ToDateTime(value);

                command = new SqlCommand("UPDATE tblCheckTrackerRegister SET " + column + " = @Date WHERE ID = " + id);

                command.Parameters.Add("@Date", System.Data.SqlDbType.DateTime);

                command.Parameters["@Date"].Value = dt.Equals(DateTime.MinValue) ? (object)DBNull.Value : dt;

            }
            else
            {

                int result;

                if (int.TryParse(value, out result))
                {
                    command = new SqlCommand("UPDATE table SET " + column + " = " + value + " WHERE ID = " + id);
                }
                else
                {
                    command = new SqlCommand("UPDATE table SET " + column + " = '" + value + "' WHERE ID = " + id);
                }

            }

            command.Connection = connection;

            connection.Open();

            command.ExecuteNonQuery();

            connection.Close();

        }

这很好用，但我希望改进它。老实说，我相信必须有更好的方法来解决这个问题，因为我的代码对我来说似乎很乱，我的问题是，谁能建议另一种方法来完成我想要完成的事情？

【问题讨论】：

查看上面的代码 - 当您的值包含十进制值（如 (value = 10.53)）时，它似乎会出现问题，然后它会转到 else 部分并将其视为字符串
改善是什么意思？？ Javascript代码改进还是asp.net代码改进？
嗯嗯......！您是否有理由不能编写/使用标准更新程序来更新所有值，无论它们是否更改，这就是我们 99.99% 的人这样做的方式。并且没有性能开销（可以忽略不计），并且您不必维护此类容易出错的代码。

标签： jquery asp.net ajax

【解决方案1】：

首先

您的代码容易出现 SQL Injection attack。这是安全的危险信号。

command = new SqlCommand("UPDATE tblCheckTrackerRegister SET " + column + " = @Date WHERE ID = " + id);
command = new SqlCommand("UPDATE table SET " + column + " = " + value + " WHERE ID = " + id);
command = new SqlCommand("UPDATE table SET " + column + " = '" + value + "' WHERE ID = " + id);

建议：使用参数化查询。

第二

您正在更新一条记录，因此您不应使用 GET 方法。它违反了基本 REST 原则 - GET 操作被认为是安全的，它不应该改变系统中的任何内容。

建议：使用 Ajax POST。

$.ajax({
  ...                
  type: "POST",
  ...            
});

用户体验设计

我不知道为什么每个文本框一旦失焦就会更新的原因。这不是一种常见的方法。从用户的角度来看，这也不友好，因为他们没有收到有关保存更改的通知。

我们通常在 Grid 中一次更新一组控件或一次更新一行。

建议： 不是真正的建议；这只是个人喜好，所以不要误会我的意思。我个人喜欢像附加的 StackOver 屏幕截图一样一次更新一大块控件 -

【讨论】：

【解决方案2】：

尝试在 JS 代码中定义一组条件来使用多个控制器作为列定义的需要，如下所示：

$("input[type=text]").on("focusout", function () {

        var id = $(this).attr("id");
        var column = $(this).attr("class");
        var value = $(this).val();
        var controler = "UpdateTable";
        if(column=='Delete'){
           controler = "DeleteTable";
        }
        if(column=='Mail'){
           controler = "SendMail";
        }
        if (typeof id !== "undefined" && typeof column !== "undefined" && typeof value !== "undefined") {

            $.ajax({
                url: "/api/Action/" + controler + "?id=" + id + "&column=" + column + "&value=" + value,
                type: "GET",
                error: function (request, status, error) {
                    InsertLogEntry(request.responseText + " From API Call /api/Action/" + controler);
                },
                success: function (data) {
                }
            });
        }

    });

【讨论】：

【解决方案3】：

使用实体框架，您可以使用更简洁的代码轻松更新表格。

using (var db = new MyEntities())
{
    var result = db.YourTable.SingleOrDefault(b => b.column == finditembyid);
    if (result != null)
    {
        try
        {
            result.Date = new DateTime();
            db.SaveChanges();
        }
        catch (Exception ex)
        {
            throw;
        }
    }
}

【讨论】：

【解决方案4】：

我能想到的主要事情是，为什么不使用“change”而不是“focusout”？即使值没有改变，Focusout 也会运行你的代码，你需要吗？

另一件事：

var id = $(this).attr("id");
var column = $(this).attr("class");
var value = $(this).val();

可以改进为：

var $this = $(this);
var id = $this.attr("id");
var column = $this.attr("class");
var value = $this.val();

【讨论】：