MVC中处理表单提交的方式（Ajax+Jquery）

Posted 2020-08-14

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方式提交到后台。后台的代码也比较简单，就不贴了。