使用.NET MVC和Bootstrap

朴灿烈づ我的快乐病毒、 2021-06-26 16:06 425阅读 0赞

## 项目结构 ##

![在这里插入图片描述][20190103222805216.png]

## HomeController.cs ##

using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.Mvc;
    using TodoList.Models.Login;
    
    namespace TodoList.Controllers
    { 
        public class HomeController : Controller
        { 
            //
            // GET: /Home/
            public ActionResult Index()
            { 
                return View();
            }
    
            public ActionResult Login(String username, String password)
            { 
                User u = new User();
                u.Username = username;
                u.Password = password;
                if (u.isAuth())
                { 
                    Session["LogedUserID"] = u.Username.ToString();
                    return Json(1, JsonRequestBehavior.AllowGet);
                }
                else
                { 
                    return Json(0, JsonRequestBehavior.AllowGet);
                }
            }
    
            public ActionResult Logout()
            { 
                Session.Remove("LogedUserID");
                return RedirectToAction("index", "home");
            }
        }
    }

## TodoController.cs ##

using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.Mvc;
    
    namespace TodoList.Controllers
    { 
        public class TodoController : Controller
        { 
            public ActionResult Index()
            { 
                Models.TodoModel tmodel = new Models.TodoModel();
                return View(tmodel.GetTodos());
            }
    
            public JsonResult ins(String value)
            { 
                Models.TodoModel tmodel = new Models.TodoModel();
                return Json(tmodel.InsTodo(value), JsonRequestBehavior.AllowGet);
            }
    
            public JsonResult del(String value)
            { 
                Models.TodoModel tmodel = new Models.TodoModel();
                return Json(tmodel.DelTodo(value), JsonRequestBehavior.AllowGet);
            }
        }
    }

## Models文件夹 ##

User.cs

namespace TodoList.Models.Login
    { 
        public class User
        { 
            public string Username {  get; set; } = "";
    
            public string Password {  get; set; } = "";
    
            public bool isAuth()
            { 
                if (Username.Equals("marco"))
                    if (Password.Equals("marco"))
                        return true;
                return false;
            }
        }
    }

Todo.cs

namespace TodoList.Models
    { 
        public class Todo
        { 
            public int Id {  get; set; }
    
            public string Value {  get; set; }
    
            public string Date {  get; set; }
        }
    }

TodoModel.cs

using System;
    using System.Collections.Generic;
    using System.Data;
    using System.Data.SqlClient;
    using System.Linq;
    using System.Web;
    
    namespace TodoList.Models
    { 
        public class TodoModel
        { 
            public List<Todo> GetTodos()
            { 
                List<Todo> p = new List<Todo>();
                SqlConnection sqlConnection1 =
                    new SqlConnection(System.Configuration.ConfigurationManager.ConnectionStrings["TODO"].ConnectionString);
                SqlCommand cmd = new SqlCommand();
                SqlDataReader reader;
    
                cmd.CommandText = "SELECT * FROM TODO order by id desc";
                cmd.CommandType = CommandType.Text;
                cmd.Connection = sqlConnection1;
    
                sqlConnection1.Open();
    
                reader = cmd.ExecuteReader();
    
                while (reader.Read())
                { 
                    Todo t = new Todo();
                    t.Id = reader.GetInt32(0);
                    t.Value = reader.GetString(1);
                    //t.Date = reader.GetString(2);
                    p.Add(t);
                }
                sqlConnection1.Close();
    
    
                return p;
            }
    
            public int InsTodo(String value)
            { 
                SqlConnection sqlConnection1 =
                    new SqlConnection(System.Configuration.ConfigurationManager.ConnectionStrings["TODO"].ConnectionString);
                SqlCommand cmd = new SqlCommand();
    
                cmd.CommandText = "insert into todo (value) values (@ID); SELECT SCOPE_IDENTITY() ";
                cmd.Parameters.Add("@ID", SqlDbType.Text);
                cmd.Parameters["@ID"].Value = value;
                cmd.CommandType = CommandType.Text;
                cmd.Connection = sqlConnection1;
    
                sqlConnection1.Open();
                int i = 0;
                try
                { 
                    i = cmd.ExecuteNonQuery();
                    sqlConnection1.Close();
                }
                catch
                { 
                    return 0;
                }
                return GetLastRow();
            }
    
            private int GetLastRow()
            { 
                SqlConnection sqlConnection1 = new SqlConnection(System.Configuration.ConfigurationManager.ConnectionStrings["TODO"].ConnectionString);
                SqlCommand cmd = new SqlCommand();
                SqlDataReader reader;
    
                cmd.CommandText = "SELECT max(id) FROM TODO";
                cmd.CommandType = CommandType.Text;
                cmd.Connection = sqlConnection1;
    
                sqlConnection1.Open();
    
                reader = cmd.ExecuteReader();
                int r = 0;
                while (reader.Read())
                { 
                    r = reader.GetInt32(0);
                }
                sqlConnection1.Close();
                return r;
            }
    
            private string SafeSqlLiteral(string inputSQL)
            { 
                return inputSQL.Replace("'", "''");
            }
    
            internal object DelTodo(String value)
            { 
                SqlConnection sqlConnection1 =
                    new SqlConnection(System.Configuration.ConfigurationManager.ConnectionStrings["TODO"].ConnectionString);
                SqlCommand cmd = new SqlCommand();
    
    
                cmd.CommandText = "delete todo where id = @ID";
                cmd.Parameters.Add("@ID", SqlDbType.Int);
                int xx = -1;
                int.TryParse(value, out xx);
                cmd.Parameters["@ID"].Value = xx;
                cmd.CommandType = CommandType.Text;
                cmd.Connection = sqlConnection1;
    
                sqlConnection1.Open();
                int i = 0;
                try
                { 
                    i = cmd.ExecuteNonQuery();
                    sqlConnection1.Close();
                }
                catch
                { 
                    return 0;
                }
    
                return i;
            }
        }
    }

Index.js

## Home文件夹 ##

Index.cshtml

@model IEnumerable<TodoList.Models.Todo>
    @{
        Layout = null;
    }
    
    <!DOCTYPE html>
    
    <html>
    <head>
        <meta name="viewport" content="width=device-width"/>
        <title>Index</title>
        <script src="//code.jquery.com/jquery-1.10.2.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
    
        <script> $(document).ready(function() { @if (Session["LogedUserID"] == null) { <text> $('#login').modal('show'); </text> } $("#l").click(function(event) { login(); }); $("#password").keydown(function(event) { if (event.which == 13) { event.preventDefault(); login(); } }); $("#username").keydown(function(event) { if (event.which == 13) { event.preventDefault(); $("#password").focus(); } }); $('#username').focus(function() { $("#username").popover('hide'); }); $('#alert').hide(); $('#password').focus(function() { $("#password").popover('hide'); }); }); function login() { if ($("#username").val() == "") { $("#username").popover({ trigger: 'manual', placement: 'bottom', html: 'true', content: '<span class="label label-danger"><span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span></span> Enter username' }); $('#username').popover('show'); return; } if ($("#password").val() == "") { $("#password").popover({ trigger: 'manual', placement: 'bottom', html: 'true', content: '<span class="label label-danger"><span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span></span> Enter password' }); $('#password').popover('show'); return; } $.ajax({ type: "POST", url: "/Home/Login", data: "username=" + $("#username").val() + "&password=" + $("#password").val(), datatype: "html", success: function(data) { if (data == 0) { $('#alert').fadeIn().delay(800).fadeOut(); } else { window.location.replace('/Home'); } } }); } </script>
    
    </head>
    
    <body>
    
    <div class="container-fluid">
    
        
    
        <nav class="navbar navbar-default">
    
            <div class="container-fluid">
    
                <div class="navbar-header">
    
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
    
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
    
                    <a class="navbar-brand" href="#">BootStrap Testing</a>
    
                </div>
    
                <div id="navbar" class="navbar-collapse collapse">
    
                    <ul class="nav navbar-nav">
    
                        <li class="active">
                            <a href="/Home">Home</a>
                        </li>
    
                        <li>
                            <a href="/Todo">Todo List</a>
                        </li>
    
                    </ul>
    
                    @if (Session["LogedUserID"] != null)
                    {
                        <text>
                            <ul class="nav navbar-nav navbar-right">
    
                                <li>
                                    <a href="/home/logout">LogOut</a>
                                </li>
    
                            </ul>
    
                        </text>
                    }
                </div>
    
            </div>
    
        </nav>
    
    
        <div id="login" class="modal fade" data-keyboard="false">
    
            <div class="modal-dialog">
    
                <div class="modal-content">
    
                    <div class="modal-header">
    
                        <img style="height: 50px;" src="http://brighteyetea.com/assets/images/partners/bootstrap.png">
    
                        <h4 class="modal-title"></h4>
    
                    </div>
    
                    <div class="modal-body">
    
    
                        <div id="alert" class="alert alert-danger" role="alert">
                            <strong>Oh snap!</strong> Username o Password error!!!
                        </div>
    
    
                        <div class="input-group">
    
                            <span class="input-group-addon" id="basic-addon1"><span class="glyphicon glyphicon-user" aria-hidden="true"></span></span>
                            <input type="text" id="username" class="form-control" placeholder="Username" aria-describedby="basic-addon1" required>
    
                        </div>
    
                        <br/>
    
                        <div class="input-group">
    
                            <span class="input-group-addon" id="basic-addon1"><span class="glyphicon glyphicon-lock" aria-hidden="true"></span></span>
                            <input type="password" id="password" class="form-control" placeholder="Password" aria-describedby="basic-addon1" required>
    
                        </div>
    
                    </div>
    
                    <div class="modal-footer">
    
                        <button type="button" id="l" class="btn btn-primary"><span class="glyphicon glyphicon-log-in" aria-hidden="true"></span> Log in</button>
    
    
                    </div>
    
                </div>
    
            </div>
    
        </div>
    
    
    </div>
    
    @if (Session["LogedUserID"] != null)
    {
        <text>
            Welcome @Session["LogedUserID"].ToString()
            <a href="/Home/Logout">logout</a>
        </text>
    }
    
    </body>
    
    </html>

## Shared文件夹 ##

Master.cshtml

<!DOCTYPE html>
    <html>
    
    <head>
    
        <meta name="viewport" content="width=device-width"/>
    
        <title>Index</title>
    
        <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
    
        <style> .disabled { cursor: default; } #content { margin-left: auto; margin-right: auto; width: 80%; } </style>
    
    </head>
    
    <body>
    
    <ul class="nav nav-tabs">
    
        <li role="presentation" class="active">
            <a href="/Home">主页</a>
        </li>
    
        <li role="presentation">
            <a href="/Todo">待办事项列表</a>
        </li>
    
        <li role="presentation">
            <a href="#">Messages</a>
        </li>
    
    </ul>
    
    @RenderBody()
    </body>
    
    </html>

## Todo文件夹 ##

Index.cshtml

@model IEnumerable<TodoList.Models.Todo>
    @{
        Layout = null;
    }
    @if (Session["LogedUserID"] == null)
    {
        Response.Redirect("~/HOME/");
    }
    <!DOCTYPE html>
    
    <html>
    <head>
        <meta name="viewport" content="width=device-width"/>
        <title>Index</title>
        <script src="//code.jquery.com/jquery-1.10.2.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
        @Scripts.Render("~/Scripts/index.js")
        <style> .disabled { cursor: default; } #content { margin-left: auto; margin-right: auto; width: 80%; } </style>
    
    </head>
    
    <body>
    <div class="container-fluid">
        
        <nav class="navbar navbar-default">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">BootStrap Testing</a>
                </div>
    
                <div id="navbar" class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li>
                            <a href="/Home">Home</a>
                        </li>
                        <li class="active">
                            <a href="/Todo">Todo List</a>
                        </li>
                    </ul>
                    @if (Session["LogedUserID"] != null)
                    {
                        <text>
                            <ul class="nav navbar-nav navbar-right">
    
                                <li>
                                    <a href="/home/logout">LogOut</a>
                                </li>
                            </ul>
                        </text>
                    }
                </div>
    
            </div>
    
        </nav>
        <div class="row1">
    
            <div class="col-md-8">
    
                <div id="content" style="border: 0px solid red" class="panel panel-default">
    
                    <div class="panel-heading">
    
                        <h3 class="panel-title">Todo List</h3>
    
                    </div>
    
                    <div class="panel-body">
    
                        <form>
    
                            <div class="input-group">
                                <input type="text" id="insertop" class="form-control" placeholder="你今天要做什么?" aria-describedby="basic-addon1">
    
                                <span class="input-group-btn">
                                        <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span></button>
                                    </span>
                            </div>
    
                        </form>
    
                        <br/>
    
                        <div class="items">
    
                            <ul id="sortable" class="list-group">
    
                                @foreach (var item in Model)
                                {
                                    <li value="@Html.DisplayFor(modelItem => item.Id)" class="list-group-item items">
                                        <button class="btn btn-warning btn-xs pull-right del">
                                            <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
                                        </button> @Html.DisplayFor(modelItem => item.Value)
                                    </li>
                                }
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    
    </div>
    </body>
    
    </html>

## 运行结果如图： ##

![在这里插入图片描述][20190103233637411.png]![在这里插入图片描述][20190103233658157.png]![在这里插入图片描述][20190103234033654.png]

[20190103222805216.png]: /images/20210626/2314c431e37e4bc899f3c32825735e26.png
[20190103233637411.png]: https://img-blog.csdnimg.cn/20190103233637411.png
[20190103233658157.png]: https://img-blog.csdnimg.cn/20190103233658157.png
[20190103234033654.png]: /images/20210626/c1bcdaaa131940b4a909ebe74ef59910.png