ASP.NET MVC入门基础实战教程(一)登陆和注册

       引言:本教程做的是一个包含增删查改的基础的ASP.NET MVC网站,麻雀虽小五脏俱全,旨在帮助没有学过任何后端开发框架,数据库和前端基础较差的同学入门的基础教程,如已有一定开发经验,请另外寻找其他博客。文章中会讲述开发中要注意的事项。首先大家可以看一下项目的结构

                                                               

一 登陆的前端后台实现

1.登陆前台页面

        ASP.NET MVC的前端页面的后缀为cshtml,英文全名的意思是csharp+html,因此我们可以在html中嵌套进c#的语言。但要注意的是要用@标识,如登陆页面当中就用到了@Url.Action("Login", "Demo"),mvc框架会自动将它渲染为/Demo/Login url的形式,在前端的url定向中推荐使用此方法因为,Url.Action(“action名称”,”controller名称”,”参数”),是根据controller和action来生成url的,当controller和action换了文件夹也能正确生成url,而入href=“/Demo/Login ”会存在路径引用问题,具体自己测试便可知。详细代码如下。

@{
    ViewBag.Title = "Login";
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>SSM | Log in</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Font Awesome -->
    <link href="~/Content/css/font-awesome.min.css" rel="stylesheet" />
    <!-- Ionicons -->
    <link href="~/Content/css/ionicons.min.css" rel="stylesheet" />
    <!-- Theme style -->
    <link href="~/Content/css/adminlte.min.css" rel="stylesheet" />
</head>
<body class="hold-transition login-page">
    <div class="login-box">
        <div class="login-logo">
            <b>登录</b>
        </div>
        <!-- /.login-logo -->
        <div class="card">
            <div class="card-body login-card-body">
                <p class="login-box-msg">demo演示</p>
                <form action="@Url.Action("Login", "Demo")" method="post">
                    <div class="form-group has-feedback">
                        <span class="glyphicon glyphicon-user">账号</span>
                        <input class="form-control" name="Accounts" placeholder="账号" />
                    </div>
                    <div class="form-group has-feedback">
                        <span class="glyphicon glyphicon-lock">密码</span>
                        <input name="Password" placeholder="密码" class="form-control" />
                    </div>
                    <div class="row">
                        <div class="col-8">
                            <div class="checkbox icheck">
                                <input class="btn btn-primary btn-block btn-flat" value="注册" onclick="window.location.href = '@Url.Action("register", "Demo")'"/>                       
                            </div>
                        </div>
                        <!-- /.col -->
                        <div class="col-4">
                            <input type="submit" value="登录" class="btn btn-primary btn-block btn-flat" />
                        </div>
                        <!-- /.col -->
                    </div>
                </form>
            </div>
            <!-- /.login-card-body -->
        </div>
    </div>
</body>
</html>

2.登陆后端实现

        后端Demo控制器中的Login方法应该有两个,一个Login方法是用来定向到登陆页面。另一个Login方法则是用来接收由登陆表单传递过来的数据,那么应该如何标识这两个表单呢?答案是在要接受表单数据的方法上标注[httppost],这样框架就能把数据送到正确的方法上。本教程使用了数据库,不过仅仅是用了个sqlhelper帮助类,封装了ADO.NET对数据库的操作,不懂也没关系。这里说一下RedirectToAction("Index")这个放法,它的作用是重订向到当前控制器的index方法,因此并没有返回到某个视图,具体代码实现如下

using System;
using System.Collections.Generic;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using demo演示.Models;
using demo演示.sqlHelper;

namespace demo演示.Controllers
{
    public class DemoController : Controller
    {
          /// <summary>
        /// 登录
        /// </summary>
        /// <returns></returns>
        public ActionResult Login()
        {

            return View();
        }

        /// <summary>
        /// 登录post
        /// </summary>
        /// <returns></returns>
        [HttpPost]
        public ActionResult Login(Administrator administrator)
        {
            SqlDBHelper sqlDB = new SqlDBHelper();

            //得到从数据库中查询到的表对象
            DataTable adminDT = sqlDB.GetDataTable(string.Format("select * from Administrators where Accounts='{0}' and Password='{1}'", administrator.Accounts, administrator.Password));

            //根据所写的sql语句,表中的行数应该是1,只要不为0,就说明查询到了该用户,重定向
            if (adminDT.Rows.Count!=0)
                return RedirectToAction("Index");
            else
                return View();
        }
    }
}

3.实际图片

                                        

二注册的前后台实现

1.注册前台页面

        注册前台页面的实现基本与登陆相同,只是细节有所变化,主要注意的是url的跳转路径。

@{
    ViewBag.Title = "register";
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>SSM | register in</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Font Awesome -->
    <link href="~/Content/css/font-awesome.min.css" rel="stylesheet" />
    <!-- Ionicons -->
    <link href="~/Content/css/ionicons.min.css" rel="stylesheet" />
    <!-- Theme style -->
    <link href="~/Content/css/adminlte.min.css" rel="stylesheet" />
</head>
<body class="hold-transition login-page">
    <div class="login-box">
        <div class="login-logo">
            <b>注册</b>
        </div>
        <!-- /.login-logo -->
        <div class="card">
            <div class="card-body login-card-body">
                <p class="login-box-msg">demo演示</p>
                <form action="@Url.Action("register", "Demo")" method="post">
                    <div class="form-group has-feedback">
                        <span class="glyphicon glyphicon-user">账号</span>
                        <input class="form-control" name="Accounts" placeholder="账号" />
                    </div>
                    <div class="form-group has-feedback">
                        <span class="glyphicon glyphicon-lock">密码</span>
                        <input name="Password" placeholder="密码" class="form-control" />
                    </div>
                    <div class="form-group has-feedback">
                        <span class="glyphicon glyphicon-lock">确认密码</span>
                        <input name="rePassword" placeholder="密码" class="form-control" />
                    </div>
                    <div class="row">
                        <div class="col-8">
                            <div class="checkbox icheck">
                                <input type="submit" value="提交" class="btn btn-primary btn-block btn-flat" />
                            </div>
                        </div>
                        <!-- /.col -->
                        <!-- /.col -->
                    </div>
                </form>
            </div>
            <!-- /.login-card-body -->
        </div>
    </div>
</body>
</html>

2.注册后端实现   

     注册后端对应的就是对数据库的增加操作了,基本实现与登陆相同,详细代码如下。

        /// <summary>
        /// 返回注册页面
        /// </summary>
        /// <returns></returns>
        public ActionResult register()
        {
            return View();
        }

        /// <summary>
        /// 提交到数据库
        /// </summary>
        /// <returns></returns>
        [HttpPost]
        public ActionResult register(Administrator administrator,string rePassword)
        {
         //首先进行是否值为空的判断
         if(rePassword!=null &&administrator.Accounts!=null&&administrator.Password!=null)
         { 
            //当密码和确认密码相同,就执行sql插入语句
            if(rePassword==administrator.Password)
            {
                SqlDBHelper sqlDB = new SqlDBHelper();

                //sql插入语句
                sqlDB.ExecuteNonQuery(string.Format("insert into Administrators(Accounts,Password) values('{0}','{1}')", administrator.Accounts, administrator.Password));

                return RedirectToAction("Index");
            }
         }
         return View();
        }

 

展开阅读全文

没有更多推荐了,返回首页