ASP.NET MVC - Ajax向控制器传递空值

Question

我试图使用Ajax将数据从视图发送到控制器，但数据以null形式传递到控制器。我尝试了很多方法，但无法找到解决方案。FromBody属性没有解决问题，我在启动时进行了一些更改，但它们也没有帮助我。

以下是我的脚本：

$(document).ready(function() {
    $("#addColumn").click(function() {
        AddColumnRecords();
    });
    $("#saveRecords").click(function() {
        SaveRecords();
    });
});

function AddColumnRecords() {
    var columnRecords="<tr><td>" + $("#columnName").val() + "</td><td>" + $("#type").val() +"</td><td>"+ document.getElementById('primaryCheck').checked+ "</td></tr>";
    $("#ColumnTable").last().append(columnRecords);
     $("#columnName").val(" ");
}

function SaveRecords() {
    var Columns = new Array();
     $("#ColumnTable").find("tr:gt(0)").each(function(){
        var name=$(this).find("td:eq(0)").text();
        var type=$(this).find("td:eq(1)").text();
        var isPrimary=$(this).find("td:eq(2)").text();
        var ColumnModel={};
        ColumnModel.Name = name;
        ColumnModel.Type = parseInt(type);
        ColumnModel.IsPrimaryKey = isPrimary;
        Columns.push(ColumnModel);
     });
    var Table={};
    var tableName=$("#tableName").val();
    Table.TableName=tableName;
    Table.Columns=Columns;
    console.log(JSON.stringify(Table));

    $.ajax({
        type:'POST',
        dataType:'JSON',
        contentType:'application/json; charset=utf-8',
        url:'/table/createtable',
        data:{table : JSON.stringify(Table)},
        success:function(data){alert("success")},
        error:function(){alert("error")}
    });
}

我的表格如下：

public class Table
{
    public string TableName { get; set; }
    public List<Column> Columns { get; set; } = new List<Column>();
}

列模型类是：

public class Column
{
    public string Name { get; set; }
    public virtual Types Type { get; set; } = Types.String;
    public virtual bool IsPrimaryKey { get; set; } = false;
}

这是动作方法：

[HttpPost]
public IActionResult CreateTable([FromBody] Table table)
{
    return View();
}

控制台日志

<div class="mb-3">
    <label for="tableName" class="form-label">Table Name</label>
    <input type="text" class="form-control" id="tableName" aria-describedby="tableName">
  </div>

<form>
  <div class="mb-3">
    <label for="columnName" class="form-label">Name</label>
    <input type="text" class="form-control" id="columnName" aria-describedby="columnName">
  </div>
  <div class="mb-3">
        <select class="form-select" aria-label="Default select example" id="type">
            @{
                <option value=3>@DatabaseSample.Models.Types.String</option>
                <option value=0>@DatabaseSample.Models.Types.Integer</option>
                <option value=5>@DatabaseSample.Models.Types.Boolean</option>
                <option value=4>@DatabaseSample.Models.Types.Char</option>
                <option value=2>@DatabaseSample.Models.Types.Double</option>
                <option value=1>@DatabaseSample.Models.Types.Float</option>
                <option value=6>@DatabaseSample.Models.Types.Date</option>
            }
</select>
  </div>

  <div class="mb-3 form-check">
    <input type="checkbox" class="form-check-input" id="primaryCheck">
    <label class="form-check-label" for="exampleCheck1">Primary key</label>
  </div>
  
</form>

<button id="addColumn" type="submit" class="btn btn-primary">Submit</button>




<table class="table" id="ColumnTable">
  <thead>
    <tr>
      <th scope="col">Column name</th>
      <th scope="col">Type</th>
      <th scope="col">Primary key</th>
    </tr>
  </thead>
</table>
<button id="saveRecords" type="submit" class="btn btn-primary">Save</button>

- HeadEx

---

你的 Column.cs 中的 Types 是什么？你能分享一下关于 Types 的代码吗？ - Qing Guo

这是枚举类型： public enum Types { Integer, Float, Double, String, Char, Boolean, Date } - HeadEx

你能分享更多关于你的观点吗？ - Qing Guo

我添加了一个帖子，你可以在帖子的末尾看到。 - HeadEx

Answer 1

在你的ajax发送代码中，你将模型转换为字符串！

$.ajax({
    type:'POST',
    dataType:'JSON',
    contentType:'application/json; charset=utf-8',
    url:'/table/createtable',
    data:{table : JSON.stringify(Table)},  //  <<------------- HERE
    success:function(data){alert("success")},
    error:function(){alert("error")}
});

这意味着你发送的模型应该像这样：{ table: "..."}

但是你的控制器需要一个Table模型。

解决方案的第一个选项：不要通过JSON.stringfy()将其转换为字符串。

$.ajax({
    type:'POST',
    dataType:'JSON',
    contentType:'application/json; charset=utf-8',
    url:'/table/createtable',
    data: Table,  //  <<------------- HERE
    success:function(data){alert("success")},
    error:function(){alert("error")}
});

或者第二种选择是将控制器参数从Table更改为字符串。当您获取模型字符串时，然后在控制器函数内将其转换为Table模型。

[HttpPost]
public IActionResult CreateTable([FromBody] string table)
{
    var mTable =  new JavaScriptSerializer().Deserialize<Table>(table);
    return View();
}

- Serhat MERCAN

---

我尝试了两种选项，但仍然不起作用。 - HeadEx

请尝试将 Types 属性更改为 int（在 Columns 类内部），然后再次尝试。如果仍然无法解决问题，则可能存在其他问题。 - Serhat MERCAN

Answer 2

以下是一个工作演示，您可以参考它。

将ajax更改如下：

    ...
    var Table={};
    var tableName=$("#tableName").val();
    Table.TableName=tableName;
    Table.Columns=Columns;
    console.log(JSON.stringify(Table));
  

      $.ajax({
                url:'/Home/Createtable',  
                type:'POST',                   
                data:Table,
                success:function(data){alert("success")},
                error:function(){alert("error")}               
            });

在HomeController中：

       public IActionResult Index()
        {
            return View();
        }
       [HttpPost]
        public JsonResult CreateTable(Table table, List<Column> Columns)
        {
            var ccc = 0;  // do your staff...
            return Json(ccc);
        }

结果：

这是一个显示动态图像的代码片段，点击链接可查看该动态图像。

- Qing Guo

---

@HeadEx，您能告诉我您使用的ASP.NET版本吗？ - Qing Guo

它是asp.net 5.0。 - HeadEx

@HeadEx 没问题 :) asp.net 5.0 被命名为 asp.net core，你能否添加一个 "asp.net core" 的标签呢？ - Qing Guo

Answer 3

移除 [FromBody] 并尝试以下代码

let Table = {
       TableName: $("#tableName").val(),
       ColumnsStr :JSON.stringify(Columns)
 //create a new property in Table model, calls ColumnsStr which will receive ColumnsStr 
};

$.ajax({
        type:'POST',
        dataType:'json',
        contentType:'application/json; charset=utf-8',
        url:'@(Url.Action("CreateTable", "table"))',
        data:Table,
        success:function(data){alert("success")},
        error:function(){alert("error")}
    });

在控制器中，您可以这样做：

table.Columns = JsonSerializer.Deserialize<List<Column>>(table.ColumnsStr)

- Omar

---

我试过了，但它仍然不起作用。 - HeadEx

我认为你还需要将按钮类型从type="submit"更改为type="button"，因为这是一个ajax调用，而type="submit"会将整个页面发送到服务器。 - Omar

或者您可以将ajax调用包装在$("#Your Form ID Here").submit(function(event) {// Your ajax here }中，并删除$(document).ready内的onclick事件。 - Omar

Answer 4

只需使用此代码来发送表格

data: JSON.stringify(Table)

- Parsa S

---

它没有起作用。 - HeadEx