ASP.NET MVC登陆界面(结合bootstrap)

来源：互联网发布：网络社群有哪些编辑：程序博客网时间：2024/05/21 10:56

效果图

这里写图片描述

一、index.cshtml

~/home/index.cshtml:新建一个HomeController(由~/App_Start/RouteConfig.cs文件可知‘home’是默认路由)，为Index函数建立一个视图‘index.cshtml’

1. code

@{Layout = null;}<!DOCTYPE html><html><head>    <meta name="viewport" content="width=device-width" />    <title>Index</title>    @* 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);        }    }}

阅读全文

0 0