专业网站建设品牌,十四年专业建站经验,服务6000+客户--广州京杭网络
免费热线:400-683-0016      微信咨询  |  联系我们

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

当前位置:网站建设 > 技术支持
资料来源:网络整理       时间:2023/2/14 1:19:18       共计:3623 浏览

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

版权说明:
本网站凡注明“广州京杭 原创”的皆为本站原创文章,如需转载请注明出处!
本网转载皆注明出处,遵循行业规范,如发现作品内容版权或其它问题的,请与我们联系处理!
欢迎扫描右侧微信二维码与我们联系。
·上一条:Element UI el-card 卡片 | ·下一条:.NET MVC使用jQuery插件验证

Copyright © 广州京杭网络科技有限公司 2005-2025 版权所有    粤ICP备16019765号 

广州京杭网络科技有限公司 版权所有