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

最新推荐文章于 2024-07-04 12:13:06 发布

FantDing

最新推荐文章于 2024-07-04 12:13:06 发布

阅读量5.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： asp-net-mvc 文章标签： bootstrap asp.net mvc

本文链接：https://blog.youkuaiyun.com/FantDing/article/details/72547916

asp-net-mvc 专栏收录该内容

1 篇文章

订阅专栏

这篇博客展示了如何在ASP.NET MVC项目中结合Bootstrap创建一个登录界面。首先，介绍了效果图，然后详细讲解了两个主要部分：一是index.cshtml文件的创建和代码实现，包括在HomeController中为Index函数配置视图；二是HomeController的详细内容，阐述了相关代码逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图

这里写图片描述

一、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);
        }
    }
}