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

问题描述

我有一个简单的类，具有学生的名字和姓氏属性。 加载该模型的视图时，我想添加其他列以为每行分配与费用相关的信息，以便在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，如何为每列传递新值？

解决方法

我已经更改了对此的先前答案：

1-查看代码：

DefaultSettings

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

<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" />

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

<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>

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