📜  ASP.Net MVC引导程序

📅  最后修改于: 2020-12-28 00:54:57             🧑  作者: Mango

ASP.NET MVC引导程序

Bootstrap是一种流行的Web框架,用于创建即使在移动设备上也可以运行的响应式Web应用程序。它提供HTML,CSS和JavaScript库来构建应用程序。

默认情况下,ASP.NET MVC支持Bootstrap并使用其库来创建应用程序的前端。让我们创建一个MVC项目并检查其库。

首先通过从文件菜单中选择创建一个项目。

选择Web项目的类型。

选择Web应用程序的模板。我们正在选择MVC。

单击确定后,它将创建一个具有以下结构的项目。

项目的Script文件夹包含Bootstrap JavaScript库。我们的项目包括以下JavaScript文件。

Content文件夹包含Bootstrap CSS文件。我们的项目包含以下文件。

要查看这些CSS类的用法,请单击网页右上角的登录链接。这将重定向到具有要填写的表单的登录页面。此表单包含HTML组件,这些组件在CSS类的帮助下按布局进行组织。

仔细看一下Login.cshtml文件的源代码。该文件使用CSS类,例如row,col-md-8等。

// Login.cshtml

@using MvcApplicationDemo.Models
@model LoginViewModel
@{
    ViewBag.Title = "Log in";
}

@ViewBag.Title.

@using (Html.BeginForm("Login", "Account", new { ReturnUrl = ViewBag.ReturnUrl }, FormMethod.Post, new { @class = "form-horizontal", role = "form" })) { @Html.AntiForgeryToken()

Use a local account to log in.


@Html.ValidationSummary(true, "", new { @class = "text-danger" })
@Html.LabelFor(m => m.Email, new { @class = "col-md-2 control-label" })
@Html.TextBoxFor(m => m.Email, new { @class = "form-control" }) @Html.ValidationMessageFor(m => m.Email, "", new { @class = "text-danger" })
@Html.LabelFor(m => m.Password, new { @class = "col-md-2 control-label" })
@Html.PasswordFor(m => m.Password, new { @class = "form-control" }) @Html.ValidationMessageFor(m => m.Password, "", new { @class = "text-danger" })
@Html.CheckBoxFor(m => m.RememberMe) @Html.LabelFor(m => m.RememberMe)

@Html.ActionLink("Register as a new user", "Register")

@* Enable this once you have account confirmation enabled for password reset functionality

@Html.ActionLink("Forgot your password?", "ForgotPassword")

*@ }
@Html.Partial("_ExternalLoginsListPartial", new ExternalLoginListViewModel { ReturnUrl = ViewBag.ReturnUrl })
@section Scripts { @Scripts.Render("~/bundles/jqueryval") }

如果我们查看Login.cshtml页面的视图源,则表明Bootstrap库已链接到该网页。以下两个屏幕截图显示了这一点。