0

したがって、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)などのサブオブジェクト値を除いて、送信されたデータを受け取ります。NetUplift を にマップし、2 つのコメント アウトされた入力フィールドを/にマップするように指示するにはどうすればよいですか?UnitEstimate.NetUpliftEstimate.NetUplift.ValueNetUplift.DataTypeNetUplift.UnitOfMeasure

サーバーにそのようにマップする必要があることをサーバーに知らせる方法はありますか、またはフォームをサーバーに送信する前にそれを行う必要がありますか?

4

1 に答える 1

2

これを試すことができます：

$.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();
于 2013-04-30T19:19:15.780 に答える