使用.NET MVC和Bootstrap

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

项目结构

在这里插入图片描述

HomeController.cs

  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Web;
  5. using System.Web.Mvc;
  6. using TodoList.Models.Login;
  8. namespace TodoList.Controllers
  9. { 
  10.     public class HomeController : Controller
  11.     { 
  12.         //
  13.         // GET: /Home/
  14.         public ActionResult Index()
  15.         { 
  16.             return View();
  17.         }
  19.         public ActionResult Login(String username, String password)
  20.         { 
  21.             User u = new User();
  22.             u.Username = username;
  23.             u.Password = password;
  24.             if (u.isAuth())
  25.             { 
  26.                 Session["LogedUserID"] = u.Username.ToString();
  27.                 return Json(1, JsonRequestBehavior.AllowGet);
  28.             }
  29.             else
  30.             { 
  31.                 return Json(0, JsonRequestBehavior.AllowGet);
  32.             }
  33.         }
  35.         public ActionResult Logout()
  36.         { 
  37.             Session.Remove("LogedUserID");
  38.             return RedirectToAction("index", "home");
  39.         }
  40.     }
  41. }

TodoController.cs

  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Web;
  5. using System.Web.Mvc;
  7. namespace TodoList.Controllers
  8. { 
  9.     public class TodoController : Controller
  10.     { 
  11.         public ActionResult Index()
  12.         { 
  13.             Models.TodoModel tmodel = new Models.TodoModel();
  14.             return View(tmodel.GetTodos());
  15.         }
  17.         public JsonResult ins(String value)
  18.         { 
  19.             Models.TodoModel tmodel = new Models.TodoModel();
  20.             return Json(tmodel.InsTodo(value), JsonRequestBehavior.AllowGet);
  21.         }
  23.         public JsonResult del(String value)
  24.         { 
  25.             Models.TodoModel tmodel = new Models.TodoModel();
  26.             return Json(tmodel.DelTodo(value), JsonRequestBehavior.AllowGet);
  27.         }
  28.     }
  29. }

Models文件夹

User.cs

  1. namespace TodoList.Models.Login
  2. { 
  3.     public class User
  4.     { 
  5.         public string Username {  get; set; } = "";
  7.         public string Password {  get; set; } = "";
  9.         public bool isAuth()
  10.         { 
  11.             if (Username.Equals("marco"))
  12.                 if (Password.Equals("marco"))
  13.                     return true;
  14.             return false;
  15.         }
  16.     }
  17. }

Todo.cs

  1. namespace TodoList.Models
  2. { 
  3.     public class Todo
  4.     { 
  5.         public int Id {  get; set; }
  7.         public string Value {  get; set; }
  9.         public string Date {  get; set; }
  10.     }
  11. }

TodoModel.cs

  1. using System;
  2. using System.Collections.Generic;
  3. using System.Data;
  4. using System.Data.SqlClient;
  5. using System.Linq;
  6. using System.Web;
  8. namespace TodoList.Models
  9. { 
  10.     public class TodoModel
  11.     { 
  12.         public List<Todo> GetTodos()
  13.         { 
  14.             List<Todo> p = new List<Todo>();
  15.             SqlConnection sqlConnection1 =
  16.                 new SqlConnection(System.Configuration.ConfigurationManager.ConnectionStrings["TODO"].ConnectionString);
  17.             SqlCommand cmd = new SqlCommand();
  18.             SqlDataReader reader;
  20.             cmd.CommandText = "SELECT * FROM TODO order by id desc";
  21.             cmd.CommandType = CommandType.Text;
  22.             cmd.Connection = sqlConnection1;
  24.             sqlConnection1.Open();
  26.             reader = cmd.ExecuteReader();
  28.             while (reader.Read())
  29.             { 
  30.                 Todo t = new Todo();
  31.                 t.Id = reader.GetInt32(0);
  32.                 t.Value = reader.GetString(1);
  33.                 //t.Date = reader.GetString(2);
  34.                 p.Add(t);
  35.             }
  36.             sqlConnection1.Close();
  39.             return p;
  40.         }
  42.         public int InsTodo(String value)
  43.         { 
  44.             SqlConnection sqlConnection1 =
  45.                 new SqlConnection(System.Configuration.ConfigurationManager.ConnectionStrings["TODO"].ConnectionString);
  46.             SqlCommand cmd = new SqlCommand();
  48.             cmd.CommandText = "insert into todo (value) values (@ID); SELECT SCOPE_IDENTITY() ";
  49.             cmd.Parameters.Add("@ID", SqlDbType.Text);
  50.             cmd.Parameters["@ID"].Value = value;
  51.             cmd.CommandType = CommandType.Text;
  52.             cmd.Connection = sqlConnection1;
  54.             sqlConnection1.Open();
  55.             int i = 0;
  56.             try
  57.             { 
  58.                 i = cmd.ExecuteNonQuery();
  59.                 sqlConnection1.Close();
  60.             }
  61.             catch
  62.             { 
  63.                 return 0;
  64.             }
  65.             return GetLastRow();
  66.         }
  68.         private int GetLastRow()
  69.         { 
  70.             SqlConnection sqlConnection1 = new SqlConnection(System.Configuration.ConfigurationManager.ConnectionStrings["TODO"].ConnectionString);
  71.             SqlCommand cmd = new SqlCommand();
  72.             SqlDataReader reader;
  74.             cmd.CommandText = "SELECT max(id) FROM TODO";
  75.             cmd.CommandType = CommandType.Text;
  76.             cmd.Connection = sqlConnection1;
  78.             sqlConnection1.Open();
  80.             reader = cmd.ExecuteReader();
  81.             int r = 0;
  82.             while (reader.Read())
  83.             { 
  84.                 r = reader.GetInt32(0);
  85.             }
  86.             sqlConnection1.Close();
  87.             return r;
  88.         }
  90.         private string SafeSqlLiteral(string inputSQL)
  91.         { 
  92.             return inputSQL.Replace("'", "''");
  93.         }
  95.         internal object DelTodo(String value)
  96.         { 
  97.             SqlConnection sqlConnection1 =
  98.                 new SqlConnection(System.Configuration.ConfigurationManager.ConnectionStrings["TODO"].ConnectionString);
  99.             SqlCommand cmd = new SqlCommand();
  102.             cmd.CommandText = "delete todo where id = @ID";
  103.             cmd.Parameters.Add("@ID", SqlDbType.Int);
  104.             int xx = -1;
  105.             int.TryParse(value, out xx);
  106.             cmd.Parameters["@ID"].Value = xx;
  107.             cmd.CommandType = CommandType.Text;
  108.             cmd.Connection = sqlConnection1;
  110.             sqlConnection1.Open();
  111.             int i = 0;
  112.             try
  113.             { 
  114.                 i = cmd.ExecuteNonQuery();
  115.                 sqlConnection1.Close();
  116.             }
  117.             catch
  118.             { 
  119.                 return 0;
  120.             }
  122.             return i;
  123.         }
  124.     }
  125. }

Index.js

  1. function button() { 
  3.     //$(".del").hide();
  4.     del();
  5.     $("#sortable li").hover(function() { 
  6.         $(this).find(".del").show();
  7.         $(this).addClass("active");
  8.         //alert($(this).attr('value'));
  9.     }, function() { 
  10.         $(this).find(".del").hide();
  11.         $(this).removeClass("active");
  12.     });
  13. }
  15. function del() { 
  17.     $(".del").click(function(event) { 
  18.         // alert($(this).parent().attr('value'));
  19.         var lix = $(this).parent();
  21.         $.ajax({ 
  22.             type: "POST",
  23.             url: "/Todo/del",
  24.             data: "value=" + $(this).parent().attr("value"),
  25.             datatype: "html",
  26.             success: function(data) { 
  27.                 $(lix).hide("slow");
  28.                 // $(lix).remove();
  29.             }
  30.         });
  32.     });
  33. }
  35. $(document).ready(function() { 
  36.     del();
  37.     $(".del").hide();
  38.     $("#sortable li").hover(function() { 
  39.         $(this).find(".del").show();
  40.         $(this).addClass("active");
  41.         //alert($(this).attr('value'));
  42.     }, function() { 
  43.         $(this).find(".del").hide();
  44.         $(this).removeClass("active");
  45.     });
  48.     $("#insertop").keydown(function(event) { 
  49.         if (event.which == 13) { 
  50.             event.preventDefault();
  51.             $.ajax({ 
  52.                 type: "POST",
  53.                 url: "/Todo/ins",
  54.                 data: "value=" + $("#insertop").val(),
  55.                 datatype: "html",
  56.                 success: function(data) { 
  57.                     if (data == 0) { 
  58.                         alert("Erorr!!");
  59.                     } else { 
  60.                         $("#sortable").prepend("<li value='" + data + "' class='list-group-item'><button class='btn btn-warning btn-xs pull-right del'><span class='glyphicon glyphicon-trash' aria-hidden='true'></span></button>" + $("#insertop").val() + "</li>");
  61.                         $("#insertop").val("");
  62.                         button();
  64.                     }
  65.                 }
  66.             });
  68.         }
  69.     });
  71. });

Home文件夹

Index.cshtml

  1. @model IEnumerable<TodoList.Models.Todo>
  2. @{
  3.     Layout = null;
  4. }
  6. <!DOCTYPE html>
  8. <html>
  9. <head>
  10.     <meta name="viewport" content="width=device-width"/>
  11.     <title>Index</title>
  12.     <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  13.     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
  14.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
  15.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
  17.     <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>
  19. </head>
  21. <body>
  23. <div class="container-fluid">
  25.     <!-- 静态导航栏 -->
  27.     <nav class="navbar navbar-default">
  29.         <div class="container-fluid">
  31.             <div class="navbar-header">
  33.                 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
  35.                     <span class="sr-only">Toggle navigation</span>
  36.                     <span class="icon-bar"></span>
  37.                     <span class="icon-bar"></span>
  38.                     <span class="icon-bar"></span>
  39.                 </button>
  41.                 <a class="navbar-brand" href="#">BootStrap Testing</a>
  43.             </div>
  45.             <div id="navbar" class="navbar-collapse collapse">
  47.                 <ul class="nav navbar-nav">
  49.                     <li class="active">
  50.                         <a href="/Home">Home</a>
  51.                     </li>
  53.                     <li>
  54.                         <a href="/Todo">Todo List</a>
  55.                     </li>
  57.                 </ul>
  59.                 @if (Session["LogedUserID"] != null)
  60.                 {
  61.                     <text>
  62.                         <ul class="nav navbar-nav navbar-right">
  64.                             <li>
  65.                                 <a href="/home/logout">LogOut</a>
  66.                             </li>
  68.                         </ul>
  70.                     </text>
  71.                 }
  72.             </div><!--/.nav-collapse -->
  74.         </div><!--/.container-fluid -->
  76.     </nav>
  79.     <div id="login" class="modal fade" data-keyboard="false">
  81.         <div class="modal-dialog">
  83.             <div class="modal-content">
  85.                 <div class="modal-header">
  87.                     <img style="height: 50px;" src="http://brighteyetea.com/assets/images/partners/bootstrap.png">
  89.                     <h4 class="modal-title"></h4>
  91.                 </div>
  93.                 <div class="modal-body">
  96.                     <div id="alert" class="alert alert-danger" role="alert">
  97.                         <strong>Oh snap!</strong> Username o Password error!!!
  98.                     </div>
  101.                     <div class="input-group">
  103.                         <span class="input-group-addon" id="basic-addon1"><span class="glyphicon glyphicon-user" aria-hidden="true"></span></span>
  104.                         <input type="text" id="username" class="form-control" placeholder="Username" aria-describedby="basic-addon1" required>
  106.                     </div>
  108.                     <br/>
  110.                     <div class="input-group">
  112.                         <span class="input-group-addon" id="basic-addon1"><span class="glyphicon glyphicon-lock" aria-hidden="true"></span></span>
  113.                         <input type="password" id="password" class="form-control" placeholder="Password" aria-describedby="basic-addon1" required>
  115.                     </div>
  117.                 </div>
  119.                 <div class="modal-footer">
  121.                     <button type="button" id="l" class="btn btn-primary"><span class="glyphicon glyphicon-log-in" aria-hidden="true"></span> Log in</button>
  124.                 </div>
  126.             </div><!-- /.modal-content -->
  128.         </div><!-- /.modal-dialog -->
  130.     </div><!-- /.modal -->
  133. </div>
  135. @if (Session["LogedUserID"] != null)
  136. {
  137.     <text>
  138.         Welcome @Session["LogedUserID"].ToString()
  139.         <a href="/Home/Logout">logout</a>
  140.     </text>
  141. }
  143. </body>
  145. </html>

Shared文件夹

Master.cshtml

  1. <!DOCTYPE html>
  2. <html>
  4. <head>
  6.     <meta name="viewport" content="width=device-width"/>
  8.     <title>Index</title>
  10.     <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  12.     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
  14.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
  16.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
  18.     <style> .disabled { cursor: default; } #content { margin-left: auto; margin-right: auto; width: 80%; } </style>
  20. </head>
  22. <body>
  24. <ul class="nav nav-tabs">
  26.     <li role="presentation" class="active">
  27.         <a href="/Home">主页</a>
  28.     </li>
  30.     <li role="presentation">
  31.         <a href="/Todo">待办事项列表</a>
  32.     </li>
  34.     <li role="presentation">
  35.         <a href="#">Messages</a>
  36.     </li>
  38. </ul>
  40. @RenderBody()
  41. </body>
  43. </html>

Todo文件夹

Index.cshtml

  1. @model IEnumerable<TodoList.Models.Todo>
  2. @{
  3.     Layout = null;
  4. }
  5. @if (Session["LogedUserID"] == null)
  6. {
  7.     Response.Redirect("~/HOME/");
  8. }
  9. <!DOCTYPE html>
  11. <html>
  12. <head>
  13.     <meta name="viewport" content="width=device-width"/>
  14.     <title>Index</title>
  15.     <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  16.     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
  17.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
  18.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
  19.     @Scripts.Render("~/Scripts/index.js")
  20.     <style> .disabled { cursor: default; } #content { margin-left: auto; margin-right: auto; width: 80%; } </style>
  22. </head>
  24. <body>
  25. <div class="container-fluid">
  26.     <!-- 静态导航栏 -->
  27.     <nav class="navbar navbar-default">
  28.         <div class="container-fluid">
  29.             <div class="navbar-header">
  30.                 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
  31.                     <span class="sr-only">Toggle navigation</span>
  32.                     <span class="icon-bar"></span>
  33.                     <span class="icon-bar"></span>
  34.                     <span class="icon-bar"></span>
  35.                 </button>
  36.                 <a class="navbar-brand" href="#">BootStrap Testing</a>
  37.             </div>
  39.             <div id="navbar" class="navbar-collapse collapse">
  40.                 <ul class="nav navbar-nav">
  41.                     <li>
  42.                         <a href="/Home">Home</a>
  43.                     </li>
  44.                     <li class="active">
  45.                         <a href="/Todo">Todo List</a>
  46.                     </li>
  47.                 </ul>
  48.                 @if (Session["LogedUserID"] != null)
  49.                 {
  50.                     <text>
  51.                         <ul class="nav navbar-nav navbar-right">
  53.                             <li>
  54.                                 <a href="/home/logout">LogOut</a>
  55.                             </li>
  56.                         </ul>
  57.                     </text>
  58.                 }
  59.             </div><!--/.nav-collapse -->
  61.         </div><!--/.container-fluid -->
  63.     </nav>
  64.     <div class="row1">
  66.         <div class="col-md-8">
  68.             <div id="content" style="border: 0px solid red" class="panel panel-default">
  70.                 <div class="panel-heading">
  72.                     <h3 class="panel-title">Todo List</h3>
  74.                 </div>
  76.                 <div class="panel-body">
  78.                     <form>
  80.                         <div class="input-group">
  81.                             <input type="text" id="insertop" class="form-control" placeholder="你今天要做什么?" aria-describedby="basic-addon1">
  83.                             <span class="input-group-btn">
  84.                                     <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span></button>
  85.                                 </span>
  86.                         </div>
  88.                     </form>
  90.                     <br/>
  92.                     <div class="items">
  94.                         <ul id="sortable" class="list-group">
  96.                             @foreach (var item in Model)
  97.                             {
  98.                                 <li value="@Html.DisplayFor(modelItem => item.Id)" class="list-group-item items">
  99.                                     <button class="btn btn-warning btn-xs pull-right del">
  100.                                         <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
  101.                                     </button> @Html.DisplayFor(modelItem => item.Value)
  102.                                 </li>
  103.                             }
  104.                         </ul>
  105.                     </div>
  106.                 </div>
  107.             </div>
  108.         </div>
  109.     </div>
  111. </div>
  112. </body>
  114. </html>

运行结果如图：

在这里插入图片描述在这里插入图片描述在这里插入图片描述

发表评论

表情：
评论列表 （有 0 条评论，420人围观）

还没有评论，来说两句吧...

相关阅读