.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();
                    }
                  
                }
            });
 });

以上，僅學習總結