Question

所以我在我的Index.cshtml视图中有这个表单（删除了一些数据以缩短长度），我希望能够将其提交到定义为“/ estimate / Index”的操作

public ActionResult CreateEstimate(Estimate Est);

它通过序列化数据和提交来创建对象就好了，我的问题是没有插入子对象数据（我明白它不会导致它不知道如何），我很好奇，如果有的话是一种告诉它如何以简单/自动方式正确创建对象的方法。我试过给NetUplift一个不同的名字，防爆。 name="NetUplift.Value"但这会导致内部服务器错误（代码500）。

剃刀视图中的表单 - Index.cshtml

    <form id="form-create-estimate">
                <table id="table-create-estimate" class="table">
                    <tbody>
                        <tr>
                            <td class="td-header">ID</td>
                            <td id="td-id"><input name="ID" type="text" value="" /></td>
                        </tr>
                        <tr>
                            <td class="td-header">Name</td>
                            <td id="td-name"><input name="Name" type="text" value="" /></td>
                        </tr>
                        <tr>
                            <td class="td-header">Job Difficulty</td>
                            <td id="td-jobdifficulty"><input name="JobDifficulty" type="text" value="" /></td>
                        </tr>
                        <tr>
                            <td class="td-header">Type</td>
                            <td id="td-type"><input name="Type" type="text" value="" /></td>
                        </tr>
                        <tr>
                            <td class="td-header Unit">Net Uplift</td>
                            <td id="td-netuplift">
                                <input name="NetUplift" class="Unit"  title="in PSF" type="number" value="" />
                              @*<input name="NetUplift.DataType" type="hidden" value="System.Int32" />
                                <input name="NetUplift.UnitOfMeasure" type="hidden" value="psf" />*@
                            </td>
                        </tr>
                        <tr>
                            <td class="td-header Unit">Joist Spacing</td>
                            <td id="td-joistspacing"><input name="JoistSpacing" class="FeetInch" title="in Feet' Inch''" type="text" value="" /></td>
                        </tr>
                        </tr>
                        <tr>
                            <td class="td-header">Drawing Location</td>
                            <td id="td-drawinglocation"><input name="DrawingLocation" type="text" value="" /></td>
                        </tr>
                        <tr>
                            <td><input id="button-submit-estimate" type="button" value="Create" /></td>
                            <td><input id="button-cancel-estimate" type="button" value="Cancel" /></td>
                        </tr>
                    </tbody>
                </table>
            </form>

Ajax提交脚本

// Do an Ajax Post to Submit the newly created Estimate.
function CreateEstimate() {
    // Serialize the Form.
    var Estimate = $("#form-create-estimate").serialize();

    // Send the Serialized Form to the Server to be processed and returned
    //  as an updated page to asynchronously update this page.
    // I guess instead of returning this entire page we could make the action
    //  return just a table row with the Estimate's Data, then append it to the table
    //  of estimates. It'll be saved to the list of estimates too so there won't be
    //  a chance to the lists on the Client and list on the server to be different.
    $.ajax({
        url: "/Estimate/CreateEstimate/",
        datatype: "json",
        data: Estimate,
        contenttype: "application/json",
        success: function (Data, Success) {
            if (Data.Estimate !== undefined) {
                // Create a Html Table Row from the Estimate.
                // Append the Row to the Table.
                // Hide the Dialog.
            } else {
                alert("No Error Occured; however, the Creation of the Estimate was unsuccessful. Please Try Again.");
            }
        },
        error: function (xhr, ajaxOptions, thrownError) {
            alert("An Error Occured. \n" + thrownError + "\n" + xhr.status);
        }
    });
}

估算课程

public class Estimate
{
        public Int32 ID { get; set; }
        public String JobDifficulty { get; set; }
        public String Type { get; set; }
        public String Name { get; set; }
        public Unit NetUplift { get; set; }
        public Unit JoistSpacing { get; set; }
        public String DrawingLocation { get; set; }
}

单元类

public class Unit
{
   public String Value { get; set; }
   public Type DataType { get; set; }
   public String UnitOfMeasure { get; set; }

   public Unit(Type DataType, String Value, String UnitOfMeasure)
   {
      this.Value = Value;
      this.DataType = DataType;
      this.UnitOfMeasure = UnitOfMeasure;
   }
}

目前，操作CreateEstimate(Estimate Est)会收到提交的数据，但子对象值除外，例如Unit（Estimate.NetUplift）。如何告诉它将NetUplift映射到Estimate.NetUplift.Value，并将两个注释掉的输入字段映射到NetUplift.DataType / NetUplift.UnitOfMeasure？

有没有办法让服务器知道它应该以这种方式映射，还是在将表单发送到服务器之前必须这样做？

Answer 1

你可以试试这个：

$.fn.serializeToObject = function () {
    var o = {};
    var a = this.serializeArray();

    $.each(a, function () {
        if (o[this.name] !== undefined) {
            if (!o[this.name].push) {
                o[this.name] = [o[this.name]];
            }
            o[this.name].push(this.value || '');
        } else {
            o[this.name] = this.value || '';
        }
    });
    return o;
};

var estimate = $("#form-create-estimate").serializeToObject();

提交表单作为对象参数

1 个答案: