您的位置: 首页  >  IT文章  >  NetCore中数据从前台传递到后台的方法（包含表单和AJAX）

NetCore中数据从前台传递到后台的方法（包含表单和AJAX）

分类: IT文章 • 2024-03-31 19:56:54

1.使用表单传输

如下图所示是建立的表单，表单是使用layui框架做的，具体的和原生form没有什么区别

NetCore中数据从前台传递到后台的方法（包含表单和AJAX）

 代码：

<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>
View Code

后端的接收方法：注意这里即使不使用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

相关推荐