asp.net core mvc ajax Post提交Form表单

最新推荐文章于 2022-09-09 09:06:21 发布

f245775274

最新推荐文章于 2022-09-09 09:06:21 发布

阅读量1.9k

点赞数 1

分类专栏： .NET Core

本文链接：https://blog.csdn.net/f245775274/article/details/111358185

版权

.NET Core 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、创建Model

using System;
namespace CalibrationFlow.Model
{
    /// <summary>
    /// 实体类sys_User 。(属性说明自动提取数据库字段的描述信息)
    /// </summary>
    public class sys_User
    {
        public sys_User()
        { }

        public int User_ID { get; set; }
        public string EID { get; set; }
        public string UserName { get; set; }
        public string PassWord { get; set; }
        public int Role_ID { get; set; }
        public int Com_ID { get; set; }
        public string Email { get; set; }
        public string Note { get; set; }

    }
}

二、控制器中创建Action

 [HttpPost]
        public JsonResult Login_submit(sys_User _user)
        {
            return Json(_user);
        }

三、创建View


@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>用户登陆</title>
    <link href="~/lib/bootstrap/dist/css/bootstrap.css" rel="stylesheet" />
    <style>
        body {
            background: #99FF33;
        }
    </style>
</head>
<body>
    <form id="form">
        <div style="width:25%; margin:10% auto; background:#CCCCFF">
            <div style="width:80%; margin:0 auto; padding-top:15px; padding-bottom:35px;">
                <div class="input-group mb-3">
                    <span class="input-group-text" id="basic-addon1">用户名</span>
                    <input type="text" class="form-control" name="UserName" id="UserName" placeholder="Username">
                </div>
                <div class="input-group mb-3" style="margin-top:20px;">
                    <span class="input-group-text" id="basic-addon1" style="width:75px;">密&nbsp;码</span>
                    <input type="password" class="form-control" name="PassWord" id="PassWord" placeholder="Password">
                </div>
                <div style=" width:100%;text-align:center;margin-top:35px;">
                    <button type="button" id="loginbtn" class="btn btn-primary btn-sm" style="width:150px; height:35px;" onclick="login()">Login</button>
                </div>
            </div>
        </div>
    </form>
    <script src="~/js/jquery-1.11.3.min.js"></script>
    <script>
        function login() {

            $.ajax({
                url: "Account/Login_submit",
                type: "post",
                data: $("#form").serialize(),
                dataType: "json",
                success: function (data) {
                    console.log("成功");
                    console.log(data);
                },
                error: function (e) {
                    console.log("系统出错！");
                    console.log(e.error);
                }
            })
        }

    </script>
</body>
</html>

注意：

 <button type="button" id="loginbtn" class="btn btn-primary btn-sm" style="width:150px; height:35px;" onclick="login()">Login</button>

type=“button” 如果换成type=“submit” 在Action中Model中时没有数据的，而且返回Json Ajax会报错。

f245775274

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
asp.net core mvc ajax Post提交Form表单

一、创建Modelusing System;namespace CalibrationFlow.Model{ /// <summary> /// 实体类sys_User 。(属性说明自动提取数据库字段的描述信息) /// </summary> public class sys_User { public sys_User() { } public int User_ID { get; se
复制链接

扫一扫

专栏目录