NetCore中數據從前台傳遞到后台的方法（包含表單和AJAX）

1.使用表單傳輸

如下圖所示是建立的表單，表單是使用layui框架做的，具體的和原生form沒有什么區別

 

 

 代碼：

<form class="layui-form" action="ToDo/Create" method="post">
            <div class="layui-form-item">
                <label class="layui-form-label">待辦事項</label>
                <div class="layui-input-block">
                    <input type="text" name="Title" required lay-verify="required" placeholder="請輸入標題" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">描述</label>
                <div class="layui-input-block">
                    <input type="text" name="Description" placeholder="描述" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div id="time" class="layui-inline">
                <div class="layui-form-item">
                    <label class="layui-form-label">開始時間</label>
                    <div class="layui-input-block">
                        <input id="starttime" type="text" name="StartTime" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">結束時間</label>
                    <div class="layui-input-block">
                        <input id="endtime" type="text" name="EndTime" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button  class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>

                </div>
            </div>
        </form>

后端的接收方法：注意這里即使不使用FromForm特性也可以將表單的鍵值對直接轉換成實體對象，也可以直接使用IFormCollection作為接收，注意這里由netcore進行對象轉換的時候直接可以忽略大小寫，意味着前台的name和后台對象中的Name是等價的，可以直接轉換。

[HttpPost]
//[ValidateAntiForgeryToken]
public ActionResult Create([FromForm]TodoViewItem model/*IFormCollection collection*/)
{
            
     try
     {
       return RedirectToAction(nameof(Index));
     }
     catch
     {
        return View();
     }
}

TodoViewModel類

public class TodoViewItem
    {
        public string Title { get; set; }
        public DateTime? StartTime { get; set; }
        public DateTime? EndTime { get; set; }
        public string Description { get; set; }
    }

 

這里要注意的點：雖然表單中的StartTime在前台是text數據，但是到了后台，netcore會自動將string轉換成對應相同類名稱的屬性類型，例如轉換成DateTime?類型，而且轉換的時候有個很好的優點就是轉換並不要求是前台的對象和后台的對象字段數量一致的，它是根據前台傳過來什么，后台有什么字段就對其進行類型轉換然后賦值，非常方便。

2.使用Ajax傳輸

這里有兩種方式進行傳輸，第一種是使用x-www-form-urlencoded方式，第二種是使用json

①x-www-form-urlencoded

前台代碼：

function Create() {
            var form = layui.form;
            let formData = form.val("todoForm");
            console.log(formData);
            debugger;
            $.ajax({
                url: "ToDo/CreateByAjax",
                data: formData,
                dataType: "json",
                contentType: "application/x-www-form-urlencoded;charset=utf-8",
                type: "post",
                success: function () {
                    console.log("success");
                },
                error: function () {
                    console.log("error");
                }

            });
        }

后台代碼：

public ActionResult CreateByAjax([FromForm]TodoViewItem model)
        {           
            try
            {
                return RedirectToAction(nameof(Index));
            }
            catch
            {
                return View();
            }
        }

這里注意必須要添加[FromForm]特性，如果沒有改特性轉換的字段值都是null，如果是[FromBody]特性，那么會直接報415不匹配的錯誤。

②json

前台代碼，先要將數據對象轉換為json格式

function CreateJson() {
            var form = layui.form;
            let formData = form.val("todoForm");
            console.log(formData);
            debugger;
            let todo = formData;
            todo.StartTime = new Date(formData.StartTime);
            todo.EndTime = new Date(formData.EndTime);
            $.ajax({
                url: "ToDo/CreateByAjaxJson",
                data: JSON.stringify(formData),
                dataType: "json",
                contentType: "application/json;charset=utf-8",
                type: "post",
                success: function () {
                    console.log("success");
                },
                error: function () {
                    console.log("error");
                }

            });
        }

后台代碼

public ActionResult CreateByAjaxJson([FromBody] TodoViewItem model)
        {
            try
            {
                return RedirectToAction(nameof(Index));
            }
            catch
            {
                return View();
            }
        }

這里注意必須要添加[FromBody]特性，也不能是其它特性，否則會不匹配報415