使用 Ajax 将更新的模型从视图传递到控制器

Question

我有以下具有学生名字和姓氏属性的简单类。 当加载此模型的视图时，我想添加额外的列来为每一行分配与成本相关的信息，因此我在我的 DOT 类中添加了两个字段，即 StudentDoaminModel。

视图加载正常，但每个新属性 Cost1 和 Cost2 的值没有传递给控制器​​。

我想用ajax把模型传给控制器

学生模型课

public class Student  
{    
    public string first_name{ get; set; }  
    public string last_name { get; set; }      
} 

学生领域模型课

public class StudentDomainModel  
{    
    public string first_name{ get; set; }  
    public string last_name { get; set; }  
    public int Cost1 { get; set; }
    public Decimal Cost2 { get; set; }    
} 

查看

<table id="tblProducts">
    <thead class="text-light bg-dark">
        <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Cost1</th>
            <th>Cost2</th>
        </tr>
    </thead>
    <tbody>
        @if (Model != null)
        {
            for (int i = 0; i < Model.Count; i++)
            {
        <tr>
            
            <td>
                @Html.DisplayFor(m => m[i].first_name)
                @Html.HiddenFor(m => m[i].first_name)
            </td>
            <td>
                @Html.DisplayFor(m => m[i].last_name)
                @Html.HiddenFor(m => m[i].last_name)
            </td>
            <td>
                @Html.TextBoxFor(m => m[i].Cost1)
                @Html.HiddenFor(m => m[i].Cost1)
            </td>
            <td>
                @Html.TextBoxFor(m => m[i].Cost2)
                @Html.HiddenFor(m => m[i].Cost2)
            </td>
            
        </tr>
            }
        }
    </tbody>

ajax 脚本

<script>
$("#export").click(function (event)
{
var object = @(Html.Raw(Json.Encode(Model)));
$.ajax({
        type: 'POST',
        url: '/Student/StudentData',
        data: JSON.stringify({ modelData: object }),
        contentType: 'application/json',
        dataType: 'json',
        success: function (response)
        {
            if (response != '')
                console.log("Success");
        },
        failure: function (response)
        {
            console.log("Failure");
        },
        error: function (response)
        {
            console.log("Error:" + response);
        }
    });
});
</script>

在我的控制器中，Cost1 和 Cost2 都为 0，如何为每列传递新值？

Answer 1

我已经把之前的答案改成了这个：

1- 查看代码：

<table>
    @if (Model != null)
    {

        foreach (var item in Model.ToList())
        {
            <tr class="studentItem">
                <td>
                    @item.first_name
                    @Html.Hidden("first_name", item.first_name)
                </td>
                <td>
                    @item.last_name
                    @Html.Hidden("last_name", item.last_name)
                </td>
                <td>
                    @Html.TextBox("Cost1", item.Cost1)
                </td>
                <td>
                    @Html.TextBox("Cost2", item.Cost2)
                </td>
            </tr>
        }
    }
</table>

<input type="button" id="export" title="export" value="export" />

2- 使用此脚本制作 JSON 字符串 (formJsonData) 表单元素并发送到服务器：

<script>
    $("#export").click(function (event) {


        var formJsonData = "[";

        for (var i = 0; i < $(".studentItem").length; i++) {
            formJsonData = formJsonData + "{";

            var first_name = $("input[name='first_name']")[i];
            formJsonData = formJsonData + "\"first_name\":" + "\"" + first_name.value + "\",";
            var last_name = $("input[name='last_name']")[i];
            formJsonData = formJsonData + "\"last_name\":" + "\"" + last_name.value + "\",";
            var Cost1 = $("input[name='Cost1']")[i];
            formJsonData = formJsonData + "\"Cost1\":" + Cost1.value + ",";
            var Cost2 = $("input[name='Cost2']")[i];
            formJsonData = formJsonData + "\"Cost2\":" + Cost2.value;

            formJsonData = formJsonData + "},";
        }      
        formJsonData = formJsonData + "]";


        $.ajax({
            type: 'POST',
            url: '/Student/StudentData',
            data: { 'formResult': formJsonData },
            success: function (response) {
                if (response != '')
                    console.log("Success");
            },
            failure: function (response) {
                console.log("Failure");
            },
            error: function (response) {
                console.log("Error:" + response);
            }
        });
    });



</script>

3- 我使用了这样的控制器类和一些模拟数据：

public class StudentController : Controller
{
    public ActionResult Index()
    {
        List<StudentDomainModel> list = new List<StudentDomainModel>();
        list.Add(new StudentDomainModel { first_name = "a", last_name = "aa", Cost1 = 11, Cost2 = 12 });
        list.Add(new StudentDomainModel { first_name = "b", last_name = "bb", Cost1 = 21, Cost2 = 22 });
        list.Add(new StudentDomainModel { first_name = "cc", last_name = "cc", Cost1 = 31, Cost2 = 32 });
        list.Add(new StudentDomainModel { first_name = "dd", last_name = "dd", Cost1 = 41, Cost2 = 42 });
        var foo = JsonConvert.SerializeObject(list);
        return View(list);
    }

    [HttpPost]
    public JsonResult StudentData(string formResult)
    {
        List<StudentDomainModel> list = JsonConvert.DeserializeObject<List<StudentDomainModel>>(formResult);
        return null;
    }
}

上传的示例项目： https://github.com/mghanatabady/MvcTableFromSample