如何使用 AJAX 和 JQuery 保存模型答案

【问题标题】：How save model with AJAX and JQuery如何使用 AJAX 和 JQuery 保存模型
【发布时间】：2013-12-18 01:21:25
【问题描述】：

我正在尝试制作一个表格，我可以在其中添加新项目、删除和编辑选定的行。

编辑或创建新行后，当我点击保存按钮时，我想将我的模型发送到控制器并更新我的视图。

我正在尝试将模型发送到控制器，但我的代码不起作用。谁能解释我为什么，我可以解决它吗？

我的 JQuery 代码：

function saveUpdates(tableId, model) {
showInitialBtns();

transformInputToText();

var modelData = JSON.parse(model);

$.ajax({
    cache: false,
    type: "POST",
    url: "Backoffice/SaveRow",
    contentType: 'application/json',
    dataType: "json",
    data: JSON.stringify(modelData),
    success: function () {
       updateTable();
    }
});

}

我的看法：

    @model IEnumerable<projetoTeste.Model.BackOffice.Car>


<table class="table" id="container">
    <thead>
        <tr>
            <th rowspan="2">
                @Html.DisplayNameFor(model => model.Name)
            </th>
            <th rowspan="2">
                @Html.DisplayNameFor(model => model.Owner)
            </th>
            <th colspan="4">
                Other data
            </th>
        </tr>
        <tr>
            <th colspan="2">
                @Html.DisplayNameFor(model => model.DateRegiste)
            </th>
            <th colspan="2">
                @Html.DisplayNameFor(model => model.DateBuy)
            </th>
        </tr>
    </thead>
    <tbody>
        @Html.DisplayFor(model => model)
    </tbody>
</table>


<div id="initialButtons" style="display: block">
    <p>
        <button id="btnAdd" type="button" class="enable">
            Add new row</button>
        <button type="button" class="disable" id="btEdit">
            Edit</button>
        <button type="button" class="disable" id="btDelete">
            Delete</button>
    </p>
</div>

<div id="btnsEditing" style="display: none">
    <p>
        <button id="btSaveEdition" type="button" class="enable" onclick="saveUpdates('container','@(Model)')">
            Save</button>
        <button id="btCancelEdition" type="button" class="enable">
            Cancel</button>
    </p>
</div>

我的控制器：

public void SaveRow(ICollection<AnatomicLocation> item)
{ 
   //some code
}

【问题讨论】：

您能告诉我们型号、控制器以及您收到的错误信息吗？
我用这些信息更新了我的问题。我没有收到任何错误消息。我在我的 jquery 中几乎每一行之后都在做alert("test");，以了解问题出在哪里，它在var modelData = JSON.parse(model); 中停止
modelData 在JSON.parse() 之后是什么？在该行之后尝试alert(modelData);。
它试过了，但我什么也没得到。我的大部分 jquery 代码是我在一些示例上在线获得的
在这里查看我的答案stackoverflow.com/questions/19980232/…

标签： javascript jquery ajax asp.net-mvc-4 xhtml

【解决方案1】：

我找到了一些答案：

我可以将该新行附加到表格并提交所有表格之后，像这样：

$.get(newRowUrl + rowSelectedId, function(data) {
     $("#" + tableId + " tbody").append(data);    
});

请注意，必须为每个名称定义正确的名称表中新行的元素，因为我们正在谈论一个数据的收集。例如：

@{
     string modelFieldInitialName = "Car[" + Model.Id + "].";
     string modelFieldInitialId = "Car_" + Model.Id + "_"; 
} 
@Html.HiddenFor(model => model.Id, new { Name = modelFieldInitialName + "Id", id = modelFieldInitialId + "Id" })

或者，我们可以像这样搜索行项目并提交它们：

var selectedOption = $("#" + tableId + " tbody tr#" + rowSelectedId).serialize();

$.ajax({
   url: newRowUrl + rowSelectedId,
   type: 'POST',
   async: true,
   data: selectedOption,
   success: function () { },                            
   error:function () { },
});

【讨论】：