MVC中處理表單提交的方式（Ajax+Jquery）

MVC中處理表單有很多種方法，這里說到第一種方式：Ajax+Jquery

先看下表單：

<form class="row form-body form-horizontal m-t">

    <div class="col-md-6">
        <div class="form-group">
            <label class="col-sm-3 control-label">訂單編號：</label>
            <div class="col-sm-4">
                <p class="form-control-static">@Model.OrderID</p>
            </div>
        </div>
    </div>


    <div class="col-md-6">
        <div class="form-group">
            <label class="col-sm-3 control-label">訂單類型：</label>
            <div class="col-sm-4">
                <p class="form-control-static">@{ var typeName = Model.OrderType == 1 ? "紅包" : "抽獎"; }@typeName</p>
            </div>
        </div>
    </div>

    <div class="col-md-6">
        <div class="form-group">
            <label class="col-sm-3 control-label">用戶昵稱：</label>
            <div class="col-sm-4">
                <p class="form-control-static">@Model.UserName</p>
            </div>
        </div>
    </div>

    <div class="col-md-6">
        <div class="form-group">
            <label class="col-sm-3 control-label">注冊手機：</label>
            <div class="col-sm-4">
                <p class="form-control-static">@Model.RegMobile</p>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="form-group">
            <label class="col-sm-3 control-label">領獎手機：</label>
            <div class="col-sm-4">
                <p class="form-control-static">@Model.OrderMobile</p>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="form-group">
            <label class="col-sm-3 control-label">兌換金額：</label>
            <div class="col-sm-4">
                <p class="form-control-static">@Model.Moneys</p>
            </div>
        </div>
    </div>



    <div class="col-md-6">
        <div class="form-group">
            <label class="col-sm-3 control-label">創建時間：</label>
            <div class="col-sm-4">
                <p class="form-control-static">@Model.CreateTime.ToString("yyyy-MM-dd")</p>
            </div>
        </div>

    </div>
    <div class="col-md-6">
        <div class="form-group">
            <label class="col-sm-3 control-label">訂單狀態：</label>
            <div class="col-sm-4">

                @Html.DropDownList("Flag", BaseHelper.OrderStatus, new {@class = "form-control"})
            </div>
        </div>
    </div>



    <div class="col-md-7">
        <div class="form-group" style="margin-left: -40px;">

            <label class="col-sm-3 control-label">處理結果：</label>
            <div class="col-sm-5">

               
                @Html.TextAreaFor(t => t.Results, new { @class = "form-control", style = "margin: 0px -392.984px 0px 0px; width: 598px; height: 105px;", placeholder = "請輸入備注", maxlength=100 })
               
            </div>
        </div>
    </div>


    <div class="col-sm-12 col-sm-offset-8">
        <div class="hr-line-dashed"></div>
        @{
            if (@Model.Flag!=1)
            {
   <button class="btn btn-primary" type="submit" id="btnSave1">保存內容</button>
            }
        }
       
        <button class="btn btn-primary" type="button" onclick="closeWin()">關閉</button>
    </div>
    @Html.HiddenFor(t=>t.OrderID)
</form>

可以看到有些字段使用HtmlHelperl擴展方法的實現的。下一步通過Jquery來實現表單提交：

  $(function () {
        $("#btnSave1").on('click', submitData);
    });
   
    function submitData() {

        var flag = document.getElementById("Flag").value;
        var results = document.getElementById("Results").value;
        var id = document.getElementById("OrderID").value;
        var data = { flag: flag, Results: results, OrderID: id }
        $.post("/Manage/Orders/Edit",data, function (result) {
            if (result.resultCode == 1) {
                layer.alert('修改成功', function () {
                    //do something

                    closeWin();
                });
               
                
            } else {
                alert(result.info);
            }
        }, "json");
    }

上面的js代碼很簡單，獲取每個字段的值，拼接成json對象，通過Ajax方式提交到后台。后台的代碼也比較簡單，就不貼了。