前言
最近没什么写的，写个MVC注册巩固一下
HTML

@{

    Layout = null;

}

<!DOCTYPE html>

<html>

<head>

    <meta name="viewport" content="width=device-width" />

    <title>注册 - 瑰园美食</title>

    <link rel="icon" href="~/Content/Images/Icon/Logo.png" />

    <link href="~/Plugin/layui/css/layui.css" rel="stylesheet" />

    <link href="~/Content/Css/LoginStyle.css" rel="stylesheet" />

</head>

<body>

    <h1>

        <span>瑰园美食</span>

        <span>享受美食带来的欢乐~</span>

    </h1>

    <div class="LoginFrom">

        <h2>注册</h2>

        <div class="LoginFrom_Input">

            <input  spellcheck="false" class="Input_User" type="text" placeholder="账号" />

            <input class="Input_Pass" type="password" placeholder="密码" />

            <input class="SuccessButton" type="button" value="点我注册" />

            <input onclick="window.location.href='/Main/Login'" type="button" value="已有账户?点击登录" />

        </div>

    </div>

    <footer>

        <p>2019 Yolx</p>

    </footer>

    <script src="~/Plugin/layui/layui.all.js"></script>

    <script>

        var User = document.querySelectorAll(".Input_User")[0];

        var Pass = document.querySelectorAll(".Input_Pass")[0];

        var xhr1 = new XMLHttpRequest();

        var SuccessButton = document.querySelectorAll(".SuccessButton")[0]

        SuccessButton.onclick = function () {

            if (User.value == "" || Pass.value == "") {

                alert("请填写完整!")

            } else {

                xhr1.open("Get", "/Main/RegisterUser?User=" + User.value + "&Pass=" + Pass.value + "");

                xhr1.responseType = "json";

                xhr1.send();

                xhr1.onreadystatechange = function () {

                    if (xhr1.status == 200 && xhr1.readyState == 4) {

                        if (xhr1.response.MsgState == true) {

                            alert(xhr1.response.MsgText);

                            window.location.href = "/Main/Login"

                        } else {

                            alert(xhr1.response.MsgText);

                        }

                    }

                }

            }

        }

    </script>

</body>

</html>

CSS

body {

    margin: 0;

    padding: 0;

    background-image: url('../Images/LoginBG.jpg');

    background-repeat: no-repeat;

    background-size: 100%;

}

h1 {

    position: fixed;

    top: 50%;

    left: 10%;

    transform: translateY(-50%);

    color: #fff;

}

    h1 span {

        display: block;

        font-size: 3vh;

    }

        h1 span:nth-child(1) {

            font-size: 5vh;

            position: relative;

            padding: 0.5vh 0px 1vh;

        }

            h1 span:nth-child(1):after {

                content: '';

                position: absolute;

                left: 0;

                top: 0;

                width: 9.8vh;

                height: 0.35vh;

                background: #fff;

            }

.LoginFrom {

    width: 24vw;

    height: 40vh;

    position: fixed;

    top: 50%;

    right: 10%;

    transform: translateY(-50%);

    background: rgba(255, 255, 255, .8);

    border-radius: 0.5vh;

    overflow: hidden;

}

    .LoginFrom h2 {

        text-align: center;

        padding: 2vh;

        background: #fff;

        font-size: 2vh;

    }

    .LoginFrom .LoginFrom_Input {

        width: 100%;

        padding: 2vh 0px;

    }

        .LoginFrom .LoginFrom_Input input {

            border: 0;

            width: 80%;

            height: 5vh;

            display: block;

            padding: 0 1vh;

            font-size: 2vh;

            margin: 1vh auto;

            box-sizing: content-box;

            position: relative;

        }

.ForgetPass, .RegisterUser {

    font-size: 1vh !important;

    position: absolute !important;

    background: none;

    width: auto !important;

    height: auto !important;

    bottom: 0px;

}

.SuccessButton {

    background:#fff;

}

.SuccessButton:after {

    content:'';

    position:absolute;

    left:0px;

    bottom:0px;

    height:2px;

    width:10px;

    background:#67b968;

}

/*.SuccessButton:hover {

    border-bottom:1vh solid #67b968;

}*/

.ForgetPass {

    left:0px;

}

.RegisterUser {

    right:0px;

}

footer {

    position: fixed;

    bottom: 0px;

    left: 0px;

    width: 100%;

}

    footer p {

        text-align: center;

        color: rgba(255, 255, 255, 0.8);

        padding: 1.5vh 0px;

        font-size: 1.5vh;

    }

/*开关组*/

.OAO_YC {

    width: 7vh;

    height: 3vh;

    background: #fff;

    border-radius: 1vh;

    padding: .5vh;

    transition: all ease 0.5s;

    position: relative;

    overflow: hidden;

    margin: 1vh 3.8vh;

}

    .OAO_YC p {

        position: absolute;

        top: 0px;

        left: 0px;

        margin: 0;

        padding: 0;

        font-size: 1.5vh;

        height: 100%;

        width: 8vh;

        text-align: center;

        line-height: 2.7em;

        opacity: 0;

        transition: all ease 0.5s;

    }

    .OAO_YC:hover p {

        opacity: 1;

    }

    .OAO_YC:hover span {

        opacity: 0.3;

    }

    .OAO_YC span {

        height: 100%;

        background: #e47575;

        border-radius: 1vh;

        display: block;

        width: 3.7vh;

        transition: all ease 0.5s;

    }

.OAO_YC_On {

    transition: all ease 0.5s;

}

    .OAO_YC_On span {

        transform: translateX(3vh);

        background: #67b968;

}

控制器

public ActionResult RegisterUser(string User, string Pass)

        {

            msg.MsgState = false;

            var list = (from tbUser in MyModel.PW_User

                        where tbUser.UserName == User.Trim()

                        select tbUser).ToList();

            if (list.Count == 0)

            {

                PW_User pW_User = new PW_User();

                pW_User.UserName = User;

                pW_User.UserPass = Pass;

                MyModel.PW_User.Add(pW_User);

                if (MyModel.SaveChanges() > 0)

                {

                    msg.MsgState = true;

                    msg.MsgText = "注册成功";

                    return Json(msg, JsonRequestBehavior.AllowGet);

                }

            }

            else

            {

                msg.MsgText = "已存在用户";

                return Json(msg, JsonRequestBehavior.AllowGet);

            }

            msg.MsgText = "注册失败!";

            return Json(msg, JsonRequestBehavior.AllowGet);

        }

登录页面点击注册按钮跳转到注册页面


注册效果

后言
本文结束了，如果觉得本技术文章对你有帮助请给我点个赞,如果有什么不足的地方，给我提意见，让我加以改进

MVC注册的更多相关文章

  1. asp.net mvc 注册中的邮箱激活功能实现（一）

    基本流程图 注册页面就不再写出,现在将发送邮件的代码粘贴出来 public ActionResult SendEmial() { ; string validataCode = System.Guid ...

  2. 更改MVC注册Areas的顺序，掌控Areas的运作

    [转自:http://www.cnblogs.com/dozer/archive/2010/04/14/change-order-of-MVC-Areas.html] 一.前言 首先,有人要问,为什么 ...

  3. asp.net mvc 注册中的邮箱激活功能实现

    基本流程图 注册页面就不再写出,现在将发送邮件的代码粘贴出来   public ActionResult SendEmial() { ; string validataCode = System.Gu ...

  4. asp.net mvc 注册中的邮箱激活功能实现（二）

    邮件发送功能封装 /// <summary>        /// 发送注册邮件        /// </summary>        /// <param name ...

  5. Asp.Net MVC及Web API框架配置会碰到的几个问题及解决方案(转)

      前言 刚开始创建MVC与Web API的混合项目时,碰到好多问题,今天拿出来跟大家一起分享下.有朋友私信我问项目的分层及文件夹结构在我的第一篇博客中没说清楚,那么接下来我就准备从这些文件怎么分文件 ...

  6. Asp.Net MVC及Web API框架配置会碰到的几个问题及解决方案

    前言 刚开始创建MVC与Web API的混合项目时,碰到好多问题,今天拿出来跟大家一起分享下.有朋友私信我问项目的分层及文件夹结构在我的第一篇博客中没说清楚,那么接下来我就准备从这些文件怎么分文件夹说 ...

  7. 转-Asp.Net MVC及Web API框架配置会碰到的几个问题及解决方案

    前言 刚开始创建MVC与Web API的混合项目时,碰到好多问题,今天拿出来跟大家一起分享下.有朋友私信我问项目的分层及文件夹结构在我的第一篇博客中没说清楚,那么接下来我就准备从这些文件怎么分文件夹说 ...

  8. 【转】Asp.Net MVC及Web API框架配置会碰到的几个问题及解决方案

    前言 刚开始创建MVC与Web API的混合项目时,碰到好多问题,今天拿出来跟大家一起分享下.有朋友私信我问项目的分层及文件夹结构在我的第一篇博客中没说清楚,那么接下来我就准备从这些文件怎么分文件夹说 ...

  9. 深入研究 蒋金楠（Artech）老师的 MiniMvc（迷你 MVC），看看 MVC 内部到底是如何运行的

    前言 跟我一起顺藤摸瓜剖析 Artech 老师的 MiniMVC 是如何运行的,了解它,我们就大体了解 ASP.NET MVC 是如何运行的了.既然是“顺藤摸瓜”,那我们就按照 ASP.NET 的执行 ...

随机推荐

  1. Java 15 正式发布， 14 个新特性，刷新你的认知！！

    JDK 15 2020/09/15 如期而至! 这个时间牛逼啊,和苹果发布会同天? OracleJDK 15 发布地址: https://www.oracle.com/java/technologie ...

  2. Java读取excel 支持xls 和 xlsx格式

    1.工具类public class InExcelTool { //根据指定位置单独读取一个 public static String getContent(String file, int page ...

  3. HTTP协议（二）---请求和响应

    HTTP通过请求和响应的交换达成通信. HTTP请求 请求报文由请求行(请求方法.请求URI.协议版本).请求首部字段以及内容实体(可能没有)构成. 下面是一个GET请求,没有内容实体: 下面是 一个 ...

  4. hystrix熔断器之线程池

    隔离 Hystrix有两种隔离方式:信号量和线程池. 线程池隔离:对每个command创建一个自己的线程池,执行调用.通过线程池隔离来保证不同调用不会相互干扰和每一个调用的并发限制. 信号量隔热:对每 ...

  5. 11.深入k8s：kubelet工作原理及源码分析

    转载请声明出处哦~,本篇文章发布于luozhiyun的博客:https://www.luozhiyun.com 源码版本是1.19 kubelet信息量是很大的,通过我这一篇文章肯定是讲不全的,大家可 ...

  6. 实现select下拉框的无限加载（懒加载）

    在实际开发中我们有时无法避免select下拉功能数据过大导致页面卡顿(如在我在一次迭代中有一个select项接口返回了5000多条数据).用户体验差!结合实际开发给出了3个解决方案: 方案1.sele ...

  7. spring-boot-route（五）整合Swagger生成接口文档

    目前,大多数公司都采用了前后端分离的开发模式,为了解决前后端人员的沟通问题,后端人员在开发接口的时候会选择使用swagger2来生成对应的接口文档,swagger2提供了强大的页面调试功能,这样可以有 ...

  8. Mat对象与像素操作 OpenCV C++

    Mat对象,分为两个部分,头部和数据部分 Mat对象拷贝之后是相互独立的 Mat对象有三种创建方法 CV_8UC1单通道,CV_8UC2双通道,CV_8UC3三通道,通道数 Scalar(0-255, ...

  9. Jmeter接口测试--上传附件

    jmeter接口测试上传附件指引 1.添加HTTP请求取样器--在取样器中的HTTP请求项中对"使用KeepAlive"."对POST使用multipart/form-d ...

  10. day64:nginx模块之限制连接&状态监控&Location/用nginx+php跑项目/扩展应用节点

    目录 1.nginx模块:限制连接 limit_conn 2.nginx模块:状态监控 stub_status 3.nginx模块:Location 4.用nginx+php跑wordpress项目 ...