NetCore中資料從前臺傳遞到後臺的方法(包含表單和AJAX)
阿新 • • 發佈:2021-07-04
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">View Code<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"); } }); }View Code
後臺程式碼:
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"); } }); }View Code
後臺程式碼
public ActionResult CreateByAjaxJson([FromBody] TodoViewItem model) { try { return RedirectToAction(nameof(Index)); } catch { return View(); } }View Code
這裡注意必須要新增[FromBody]特性,也不能是其它特性,否則會不匹配報415