隐藏

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

发布:2023/1/29 22:10:19作者:管理员 来源:本站 浏览次数:364

一、创建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会报错。