ASP.NET MVC登陆界面(结合bootstrap)
效果图
一、index.cshtml
~/home/index.cshtml:新建一个HomeController(由~/App_Start/RouteConfig.cs文件可知‘home’是默认路由)，为Index函数建立一个视图‘index.cshtml’
1. code
@{
Layout = null;
}
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Indextitle>
@* bootstrap引入 *@
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
head>
<body>
<div class="container">
<div class="row">
@* action属性值是接收页面参数的函数名称 *@
<form action="/home/Regist">
<div class="form-group">
@* for的用途是：当点击“用户名”时，光标会到“name”的输入框 *@
<label for="name">用户名label>
@* name属性值是Regist的参数 *@
<input type="text" class="form-control" id="name" placeholder="输入用户名" name="username">
div>
<div class="form-group">
<label for="password">密码label>
<input type="password" class="form-control" id="password" placeholder="输入密码" name="password">
div>
<div class="form-group">
<input type="submit" class="btn btn-default" value="注册">
div>
form>
div>
div>
@* 引入bootstrap（顺序不能变） *@
<script src="~/Scripts/jquery-1.9.1.min.js">script>
<script src="~/Scripts/bootstrap.min.js">script>
body>
html>
二、HomeController
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace WebApplication1.Controllers
{
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
return View();
}
// 与~/home/index.cshtml中表单参数保持一致
public ActionResult Regist(String username,String password)
{
return Content(username+password);
}
}
}