List<string> 与 Json asp.net mvc

Question

我一直试图在谷歌上找到答案，但没有任何结果。我的问题是如何在我的视图中操作我的 Json 数据 (List<string>)？例如，我想显示一个 div 中返回的所有字符串。

这是我目前卡在的地方：

控制器

    [HttpPost]
    public async Task<ActionResult> RetournerOP(int OF)
    {
        List<string> ops = new List<string>();
        Task verif = Task.Run(() =>
        {
            try
            {
                connection.Open();
                string sqlQuery = "SELECT Operation from ZZ where ordre = " + OF;
                SqlCommand command = new SqlCommand(sqlQuery, connection);
                using (SqlDataReader reader = command.ExecuteReader())
                {
                    while (reader.Read())
                    {
                        ops.Add(Convert.ToString(reader["Operation"]));
                    }
                }
            }
            catch (Exception) { }
            finally { connection.Close(); }
        });
        await verif;
        return Json(ops);
    }

查看

function retournerOp() {
    $.ajax({
        url: '@Url.Action("RetournerOp", "Home", new { area = "Ajout" })',
        data: {OF: document.getElementById("NumOf").value},
        type: 'POST',
        dataType: 'JSON',
        cache: false,
        success: function (data) {
            //How can I manipulate my data returned?
        }
    });
}

Answer 1

您的服务器操作方法当前正在返回一个字符串数组。因此，在您的 ajax 调用的成功回调中，您可以遍历它们并根据需要使用每个项目（例如添加到您的 DOM）。 $.each 方法将很方便循环。

例如，下面的代码循环遍历数组并将每个项目包装在p标签中，并将p标签列表附加到id为myDivId的div中

success: function (data) {
    var t = "<div>";
    $.each(data,function(a, b) {
                t += '<p>'+b+'</p>';
        });
    $("#myDivId").html(t);
}

如果您想呈现更复杂的 html 标记，我强烈建议您创建一个操作方法（如果您无法更新现有方法，因为其他代码已经在使用它）返回部分视图结果而不是 json。因此，您会将字符串列表传递给部分视图，而部分视图将具有呈现您想要返回的复杂标记的代码。

return PartialView(ops);

在局部视图中，

@model List<string>
@foreach (var item in Model)
{
    <p>@item</p>
}

现在，由于来自服务器调用的响应是您想要的 HTML 标记，只需根据需要用它更新 DOM。

$.ajax({
     url: '@Url.Action("RetournerOp", "Home", new { area = "Ajout" })',
    data: {OF:6},
    type: 'POST',
    success: function (data) {
        $("#myDivId").html(data);
    }
});

正如 cmets 中提到的其他人一样，您的服务器代码容易受到 SQL 注入。您永远不应该将用户输入直接连接到这样的 SQL 语句。考虑使用参数化查询。