ASP.NETMVC-简单例子-从数据库构建Model+HTML帮助器

news2025/1/17 3:52:14

环境：
win10，.NET Framework 4.6.1

参考：
ASP.NET MVC 简介 | 菜鸟教程
https://www.runoob.com/aspnet/mvc-intro.html

ASP.NET MVC HTML 帮助器 | 菜鸟教程
https://www.runoob.com/aspnet/mvc-htmlhelpers.html

上一篇：
ASP.NET MVC-简单例子-CSDN博客
https://blog.csdn.net/pxy7896/article/details/139777634

从数据库构建Model

首先点击右侧资源管理器中Models文件夹，右键选择添加-新建项，然后在左侧找到数据分类，选择ADO.NET实体数据模型。

在这里插入图片描述
点击添加，在后续步骤中选择来自数据库的EF设计器。

然后填写数据库ip，登录用户名和密码等。填完可以测试一下连接情况，成功了再继续。

一路执行之后，Models文件夹后有自动生成的类文件：

内容大概如下：
在这里插入图片描述
同时，App_Data下的Database1.mdf（数据库文件），打开之后，也能看到有表：

随后可以再生成控制器和view。

HTML帮助器

帮助器可以修改HTML，类似于传统的ASP.NET Web Form控件，但是更轻量级，也没有事件模型和视图状态。大多数情况下，它仅仅返回一个字符串。

举个例子。_Layout.cshtml负责整体的布局，包括导航栏和footer，也有相关css和js的引入。其中，导航栏部分有这样一段代码：

<div class="collapse navbar-collapse d-sm-inline-flex justify-content-between">
    <ul class="navbar-nav flex-grow-1">
        <li>@Html.ActionLink("主页", "Index", "Home", new { area = "" }, new { @class = "nav-link" })</li>
        <li>@Html.ActionLink("关于", "About", "Home", new { area = "" }, new { @class = "nav-link" })</li>
        <li>@Html.ActionLink("联系方式", "Contact", "Home", new { area = "" }, new { @class = "nav-link" })</li>
        <li>@Html.ActionLink("BasicUnits", "Index", "BasicUnits", new { area = "" }, new { @class = "nav-link" })</li>
    </ul>
</div>

里面Html.ActionLink就是帮助器。几个参数分别是链接显示的文本、action的名称、action所属的controller、路由值和html特性。比如点击导航栏里的BasicUnits项，就会跳向Views/BasicUnits/Index.cshtml，而不是Home下的。
在这里插入图片描述
还可以带一些参数，比如

.protocol：URL 协议，如 “http” 或 “https”。
.hostname：URL 的主机名。
.fragment：URL 片段名称（定位点名称）。

还有一些表单的帮助器，效果如下：
在这里插入图片描述
代码：

    @using (Html.BeginForm()){
    <p>
        <label for="FirstName">First Name:</label>
        @Html.TextBox("FirstName")
        @Html.ValidationMessage("FirstName", "*")
    </p>
   
    <p>
        <label for="Profile">Profile:</label>
        @Html.TextArea("Profile", new {cols=200, rows=10})
    </p>
    <p>
        @Html.CheckBox("ReceiveNewsletter")
        <label for="ReceiveNewsletter" style="display:inline">Receive Newsletter?</label>
    </p>
    <p>
        <input type="submit" value="Register" />
    </p>
    }