.Net Core from提交表单优化

如题，.net Core MVC form表单提交和.net Framework MVC的类似

 

在.net framework MV下的异步表达提交：

@using (Ajax.BeginForm("Action", "Controller", new { }, new AjaxOptions() { HttpMethod =  "post", OnSuccess = "afterCreate" }))
{
}

1.在 .net Core中form 增加了提交的回调事件 ，使用前需要引用<script src="~/lib/jquery/dist/jquery.unobtrusive-ajax.min.js"></script>

<form asp-controller="Account" asp-action="SysLogin" method="post" data-ajax="true"   data-ajax-success="afterSuccess">
</form>

完整示例:

前台页面：

@model NetCoreFrame.Entity.FrameEntity.Frame_Codes
<form asp-action="Create" class="layui-form layui-form-pane"  data-ajax-success="afterSuccess" data-ajax="true" data-ajax-method="POST">
    <div asp-validation-summary="ModelOnly" class="text-danger"></div>
    <div class="layui-form-item">
        <label asp-for="CodeName" class="layui-form-label"></label>
        <div class="layui-input-block">
            <input asp-for="CodeName" type="text" name="CodeName" required  lay-verify="required"
                   placeholder="请输入数据字典名称" autocomplete="off"  class="layui-input">
            <span asp-validation-for="CodeName" class="text-danger"></span>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="formSubmit" type="submit">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>

后台页面：

[HttpPost]
public string Create(Frame_Codes model)
{
   PageResponse resp = new PageResponse();
   _service.Add(model);
   return JsonHelper.Instance.Serialize(resp);
}

2.但随着表单控件的丰富，多选，单选等取值会存在问题，因此欠缺很多灵活性，通过form序列化提交进行优化

function serializeObject(form)
{
           var o = {};
           var a = $(form).serializeArray();
           $.each(a, function() {
               if (o[this.name]) {
                   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;
};

 

3.但在表单序列化中，会自动提交一些不必要的参数，所以通过对form表单控件的取值生成实体对象来进一步优化

如下，在“getFormData”方法中，根据元素标签遍历，判断标签的类型，重新返回数据resdata

 

<script type="text/javascript">
        (function ($) {
            $.myPlugin = {
                //初始化
                init: function () {
                    $('body').on('click', '#btn_cloas', function () {
                        $.myPlugin.closeWin();
                    });
                },
                //关闭当前窗口
                closeWin: function () {  },
                getFormData: function () {
                    
                    var resdata = {};
                     $('.layui-form').find('input,select,textarea').each(function (r) {
                        
                        var id = $(this).attr('id');
                        var name = $(this).attr('name');
                        if (!!id||!!name) {
                            var type = $(this).attr('type');
                            switch (type) {
                                case "radio":
                                  
                                    var value = $(this).attr('value');
                                    if ($("input[name='" + name + "'][value='" + value +  "']").is(":checked"))
                                    {
                                        //resdata[name] = value;
                                        eval("resdata."+name+"='"+value+"'")
                                    }
                                    break;
                                case "checkbox":
                                    if ($("#" + id).is(":checked")) {
                                        resdata[id] = 1;
                                    } else {
                                        resdata[id] = 0;
                                    }
                                    break;
                               
                                default:
                                    if ($("#" + id).hasClass('currentInfo')) {
                                        var value = $("#" + id)[0].lrvalue;
                                        resdata[id] = $.trim(value);
                                    }
                                    else if ($(this).hasClass('edui-default')) {
                                        if ($(this)[0].ue) {
                                            resdata[id] = $(this)[0].ue.getContent(null,  null, true);
                                        }
                                    }
                                    else {
                                        //text
                                        var value = $("#" + id).val();
                                        if (id != undefined) {
                                           // resdata[id] = $.trim(value);
                                             eval("resdata."+id+"='"+ $.trim(value)+"'")
                                        }
                                       
                                    }
                                    break;
                            }
                           
                           
                        }
                    });
                    debugger;
                    return resdata;
                }
            }
        }(jQuery));
        $(function () {
            $.myPlugin.init();
        })
    </script>

4.最后ajax提交，注"traditional"要设为“true”，表示按form提交的方式传值

jquery1.4版本以后，traditional参数，默认false的时候如果是{a:{b:'value'}}是处理成a[b],这样形式，如果是数组：data:{a:[1,2]}，是解析成a[]=1&a[]=2，这种方式后台确实要做兼容（取a[b]或a[]）来取值。

完整示例如下：

 $('body').on('click', '#btn_finish', function () {
            var TableInfo = $.myPlugin.getFormData();
            $.ajax({
                url: '/FrameCharts/Create',
                type: "POST",
                data: TableInfo,
                dataType: "json",
                traditional: true,
                success: function (data)
                {
                   if (data.Code == 200)
                    {
                        $.myPlugin.closeWin();
                    }
                  
                }
            });
 });

以上，仅学习总结