【ASP.NET学习】ASP.NET MVC基本编程

文章目录

ASP.NET MVC
MVC 编程模式
ASP.NET MVC - Internet 应用程序
- 创建MVC web应用程序
- - 应用程序信息
  - 应用程序文件
  - 配置文件
用新建的ASP.NET MVC程序做一个简单计算器
- 1. **修改视图文件**
- 2. **修改控制器文件**
用新建的ASP.NET MVC程序做一个复杂计算器
- 1.创建模型（Models）
- 2. 修改视图（View）
- 3. 修改控制器（Controller）
- 4. 创建 JavaScript 文件

ASP.NET MVC

ASP.NET 是一个使用 HTML、CSS、JavaScript 和服务器脚本创建网页和网站的开发框架。

ASP.NET 支持三种不同的开发模式：
Web Pages（Web 页面）、MVC（Model View Controller 模型-视图-控制器）、Web Forms（Web 窗体）。

本教程介绍 MVC，是ASP.NET三种编程方式中的一种。

MVC 编程模式

MVC 是三种 ASP.NET 编程模式中的一种。

MVC 是一种使用 MVC（Model View Controller 模型-视图-控制器）设计创建 Web 应用程序的模式：
在这里插入图片描述

组成	逻辑层	介绍
Model（模型）	业务层	是应用程序中用于处理应用程序数据逻辑的部分。通常模型对象负责在数据库中存取数据。
View（视图）	显示层	是应用程序中处理数据显示的部分。通常视图是依据模型数据创建的。
Controller（控制器）	输入控制	是应用程序中处理用户交互的部分。通常控制器负责从视图读取数据，控制用户输入，并向模型发送数据。

优点：

MVC 分层有助于管理复杂的应用程序，因为您可以在一个时间内专门关注一个方面。例如，您可以在不依赖业务逻辑的情况下专注于视图设计。同时也让应用程序的测试更加容易。
MVC 分层同时也简化了分组开发。不同的开发人员可同时开发视图、控制器逻辑和业务逻辑。
MVC 编程模式是对传统 ASP.NET（Web Forms）的一种轻量级的替代方案。它是轻量级的、可测试性高的框架，同时整合了所有已有的 ASP.NET 特性，比如母版页、安全性和认证。

ASP.NET MVC - Internet 应用程序

为了学习 ASP.NET MVC，我们将构建一个 Internet 应用程序。

我们将构建一个支持添加、编辑、删除和列出数据库存储信息的 Internet 应用程序。

当这个空白的 Internet 应用程序被创建之后，我们将逐步向该应用添加代码，直到全部完成。我们将使用 C# 作为编程语言。

沿着这个思路，我们将讲解这个应用程序的内容、代码和所有组件。

创建MVC web应用程序

我们使用VS 2019进行开发。

创建项目。
在这里插入图片描述

项目树：
在这里插入图片描述

应用程序信息
Properties
References
应用程序文件夹
App_Data 文件夹
Content 文件夹
Controllers 文件夹
Models 文件夹
Scripts 文件夹
Views 文件夹
配置文件
Global.asax
packages.config
Web.config

所有的 MVC 应用程序的文件夹名称都是相同的。MVC 框架是基于默认的命名。控制器写在 Controllers 文件夹中，视图写在 Views 文件夹中，模型写在 Models 文件夹中。您不必在应用程序代码中使用文件夹名称。

标准化的命名减少了代码量，同时有利于开发人员对 MVC 项目的理解。

文件夹	功能
App_Data 文件夹	App_Data 文件夹用于存储应用程序数据。我们将在本教程后面的章节中介绍添加 SQL 数据库到 App_Data 文件夹。
Content 文件夹	Content 文件夹用于存放静态文件，比如样式表（CSS 文件）、图标和图像。
Controllers 文件夹	Controllers 文件夹包含负责处理用户输入和响应的控制器类。MVC 要求所有控制器文件的名称以 “Controller” 结尾。
Models 文件夹	Models 文件夹包含表示应用程序模型的类。模型控制并操作应用程序的数据。
Views 文件夹	Views 文件夹用于存储与应用程序的显示相关的 HTML 文件（用户界面）。Views 文件夹中包含每个控制器对应的一个文件夹。
Scripts 文件夹	Scripts 文件夹存储应用程序的 JavaScript 文件。默认情况下，Visual Web Developer 在这个文件夹中存放标准的 MVC、Ajax 和 jQuery 文件

运行程序
在这里插入图片描述

运行后的页面
在这里插入图片描述

应用程序信息

Properties
包含了项目的配置文件和资源文件。其中，AssemblyInfo.cs 文件用于描述程序集的元数据信息，包括版本号、公司名称、版权信息等。这些文件可以帮助程序员轻松管理和配置项目。

引用
指项目所依赖的外部二进制组件库（如 DLL 文件），这些组件库包含了程序执行所需要的函数、类、接口等等。当项目需要使用这些组件时，需要先将它们添加到引用列表中。通过引用，项目可以访问这些外部组件并调用其中的方法或属性，从而实现更加丰富的功能。通常，引用可以在 Visual Studio 中管理，在项目的“引用”节点下添加、删除、更新等。

应用程序文件

App_Data
通常用于存储应用程序的数据文件，如 XML 文件、数据库文件、日志文件等等。这些文件不应该直接被访问，而是由应用程序来操作这些文件。例如，应用程序可以读取 XML 文件中的数据、从数据库文件中查询数据、写入日志文件等等。通常情况下，App_Data 文件夹中的文件不应该包含代码或其他程序文件，而是应该只包含数据和配置信息。这样可以更好地分离代码和数据，便于应用程序的管理和维护。

App_Start
通常包含用于启动应用程序的配置、路由、日志等等相关代码。例如，BundleConfig.cs 文件用于配置 JavaScript 和 CSS 文件的 Bundle，在应用程序启动时会被自动执行；FilterConfig.cs 文件用于配置全局的 Action Filter，会在应用程序启动时被自动注册；RouteConfig.cs 文件用于配置应用程序的路由规则，也会在应用程序启动时被自动调用等等。App_Start 文件夹在程序启动之前执行应用程序的配置和初始化，从而保证应用程序的正常运行。

Content
通常用于存储应用程序的静态资源文件，如 CSS 样式表、图片、JavaScript 文件等等。这些静态资源文件可以通过 URL 来访问，通常是通过视图文件或布局文件来引用，以便于页面呈现和交互效果的实现。需要注意的是，Content 文件夹中的静态资源文件通常不会包含动态代码，如服务器端代码、JavaScript 表达式等等。这些静态资源文件只是应用程序的静态展示内容，是客户端浏览器可以直接解释和呈现的内容。

Controllers
包含处理来自客户端浏览器请求并生成响应的控制器类文件。这些类通常包含多个操作方法，每个操作对应着一个 HTTP 请求类型，如GET 、POST 、PUT 等。控制器通过模型交互来响应 Web UI 的用户动作，从而实现模型、视图、控制器之间的协作。控制器处理客户端的请求，从模型中检索数据并将响应提交到视图，最后再输出回客户端。Controllers 文件夹中包含一些ASP.NET MVC应用程序可用的基础控制器，例如：HomeController 等。

fonts
是 Web 应用程序中用于保存网站所需字体文件的文件夹。在许多Web 站点中，定制字体已成为设计趋势。由于常用字体可能会在用户的系统中缺少，因此，网站通常会将自定义字体文件包括在 Fonts 文件夹中，以确保字体在用户设备中正确地显示。

Models
一个用于存放各种数据模型的文件夹，也就是其中包含了表示应用程序中的数据结构的类。这些模型类可以与数据库中的表对应起来，也可以用来表示复杂的数据结构。它们主要的功能是提供数据的访问和处理，可以从数据库中获取数据、进行数据修改、通过控制器向视图提供数据等等。这些模型类是 MVC 设计模式中 Model 层的一部分，即数据访问层或数据模型层。除此之外，可能还会包含一些用于数据访问和处理的辅助类，例如数据库上下文类、数据访问对象（DAO）类、业务逻辑处理类等等。

Scripts
包含项目需要使用的 JavaScript 文件。这些文件包括 jQuery、Bootstrap 等库和插件，以及项目自定义的 JavaScript 文件。在视图页面中需要用到 JavaScript 时，可以通过引入 Scripts 文件夹中的脚本来实现。

Views
用于存放视图页面的文件夹。每个控制器都有一个匹配的视图页面文件夹，该文件夹与控制器同名。例如，名为 HomeController 的控制器将包含名为 Home 的视图文件夹。在这个文件夹里存放的是用于呈现数据模型的视图页面，可以包含 HTML、CSS、JavaScript等内容，用于呈现和渲染用户界面。在 Views 文件夹中包含了 cshtml 文件，这些是视图模板文件，定义了如何呈现数据模型和控件的组合。

配置文件

favicon.ico
是为网站添加图标的文件。Favicon 是" Favorites icon "的缩写，也称为网站图标或书签图标。当用户收藏网站或将网站添加到书签时，浏览器会显示该图标。此外，在浏览器地址栏和标签上也会显示该图标，用于标识网站。

Global.asax
是一个 ASP.NET 应用程序的全局文件，它可以实现应用程序级别的事件处理程序。当应用程序启动时，该文件负责初始化应用程序配置和全局设置。在 Global.asax 文件中可以添加应用程序级别的事件处理程序，例如应用程序的开始、结束、错误处理等等。

packages.config
用于记录管理项目中所有 NuGet 包的详细信息的文件，包括名称、版本、依赖项等信息。NuGet 是用于 .NET 平台的包管理器，通过 NuGet 可以方便地找到、安装、卸载和管理第三方库和工具。

Web.config
是一个 XML 格式的配置文件，其中包含了网站部署所需的所有设置和选项。在 Web.config 文件中，可以定义与应用程序有关的各种设置，包括连接字符串、验证模式、HTTP 模块、错误处理、会话状态、缓存设置等等。此外，Web.config 文件还允许开发者定制网站功能，并提供了一些高级功能的配置选项，例如 ASP.NET 管道和 HTTP 处理程序的配置。Web.config 文件是 ASP.NET MVC 项目中非常重要的一部分，可以帮助开发者有效地管理和控制网站的访问和行为。

用新建的ASP.NET MVC程序做一个简单计算器

我们将创建一个简单的四则运算计算器，并使用一些基本的CSS来美化页面。

在这里插入图片描述

1. 修改视图文件

我们将更新 Index.cshtml 文件，添加一个表单来选择运算类型，并使用CSS来美化页面。
路径: Views/Home/Index.cshtml

@{
    ViewBag.Title = "Home Page ";
}

<div class="jumbotron">
    <h1>ASP.NET</h1>
    <p class="lead">ASP.NET is a free web framework for building great Web sites and Web applications using HTML, CSS and JavaScript.</p>
    <p><a href="https://asp.net" class="btn btn-primary btn-lg">Learn more &raquo;</a></p>
</div>

<div class="row">
    <div class="col-md-4">
        <h2>Getting started</h2>
        <p>
            ASP.NET MVC gives you a powerful, patterns-based way to build dynamic websites that
            enables a clean separation of concerns and gives you full control over markup
            for enjoyable, agile development.
        </p>
        <p><a class="btn btn-default" href="https://go.microsoft.com/fwlink/?LinkId=301865">Learn more &raquo;</a></p>
    </div>
    <div class="col-md-4">
        <h2>Get more libraries</h2>
        <p>NuGet is a free Visual Studio extension that makes it easy to add, remove, and update libraries and tools in Visual Studio projects.</p>
        <p><a class="btn btn-default" href="https://go.microsoft.com/fwlink/?LinkId=301866">Learn more &raquo;</a></p>
    </div>
    <div class="col-md-4">
        <h2>Web Hosting</h2>
        <p>You can easily find a web hosting company that offers the right mix of features and price for your applications.</p>
        <p><a class="btn btn-default" href="https://go.microsoft.com/fwlink/?LinkId=301867">Learn more &raquo;</a></p>
    </div>
</div>

@* 以下内容新增*@

<style>
    body {
        font-family: Arial, sans-serif;
        background-color: #f4f4f4;
        margin: 0;
        padding: 20px;
    }

    .calculator {
        background: white;
        padding: 20px;
        border-radius: 5px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        max-width: 400px;
        margin: auto;
    }

    h2 {
        text-align: center;
    }

    label {
        display: block;
        margin: 10px 0 5px;
    }

    input[type="number"], select {
        width: 100%;
        padding: 10px;
        margin: 5px 0 15px;
        border: 1px solid #ccc;
        border-radius: 4px;
    }

    input[type="submit"] {
        background-color: #28a745;
        color: white;
        border: none;
        padding: 10px;
        border-radius: 4px;
        cursor: pointer;
        width: 100%;
    }

    input[type="submit"]:hover {
        background-color: #218838;
    }

    .result {
        margin-top: 20px;
        text-align: center;
        font-size: 1.2em;
    }
</style>


<div class="calculator">
    <h2>四则运算计算器</h2>

    <form method="post" action="@Url.Action("Calculate", "Home")">
        <label for="num1">数字1::</label>
        <input type="number" id="num1" name="num1" required />

        <label for="operation">运算符:</label>
        <select id="operation" name="operation">
            <option value="add">加法</option>
            <option value="subtract">减法</option>
            <option value="multiply">乘法</option>
            <option value="divide">除法</option>
        </select>

        <label for="num2">数字2:</label>
        <input type="number" id="num2" name="num2" required />

        <input type="submit" value="计算" />
    </form>

    @if (ViewBag.Result != null)
    {
        <div class="result">结果:@ViewBag.Result</div>
    }
</div>

2. 修改控制器文件

我们需要更新 HomeController，以支持不同的运算。根据选择的运算符进行相应的计算。
路径: Controllers/HomeController.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace ASP.NET_MVC.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        public ActionResult About()
        {
            ViewBag.Message = "Your application description page.";

            return View();
        }

        public ActionResult Contact()
        {
            ViewBag.Message = "Your contact page.";

            return View();
        }

        // 以下为新增内容
        [HttpPost]
        public ActionResult Calculate(int num1, int num2, string operation)
        {
            double result = 0;

            switch (operation)
            {
                case "add":
                    result = num1 + num2;
                    break;
                case "subtract":
                    result = num1 - num2;
                    break;
                case "multiply":
                    result = num1 * num2;
                    break;
                case "divide":
                    if (num2 != 0)
                    {
                        result = (double)num1 / num2;
                    }
                    else
                    {
                        return Content("除数不能为零！");
                    }
                    break;
                default:
                    return Content("未知运算符！");
            }

            ViewBag.Result = result; // 将结果传递给视图
            return View("Index"); // 返回到Index视图
        }
    }
}

用新建的ASP.NET MVC程序做一个复杂计算器

我们将包含HTML、CSS放在View中，将JavaScript代码放在Scripts中，做一个功能更多的科学计算器。

运行界面如下：

在这里插入图片描述

1.创建模型（Models）

在这个简单的科学计算器中，我们不需要复杂的模型，因为所有的计算逻辑都将在前端处理。但是为了遵循MVC的结构，我们可以创建一个简单的模型类。

路径: Models/CalculatorModel.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace ASP.NET_MVC.Models
{
    public class CalculatorModel
    {
        public string Expression { get; set; }
        public string Result { get; set; }
    }
}

2. 修改视图（View）

在视图中，我们将包含HTML、CSS代码。

路径: Views/Home/Index.cshtml

@{
    ViewBag.Title = "Home Page ";
}

<div class="jumbotron">
    <h1>ASP.NET</h1>
    <p class="lead">ASP.NET is a free web framework for building great Web sites and Web applications using HTML, CSS and JavaScript.</p>
    <p><a href="https://asp.net" class="btn btn-primary btn-lg">Learn more &raquo;</a></p>
</div>

<div class="row">
    <div class="col-md-4">
        <h2>Getting started</h2>
        <p>
            ASP.NET MVC gives you a powerful, patterns-based way to build dynamic websites that
            enables a clean separation of concerns and gives you full control over markup
            for enjoyable, agile development.
        </p>
        <p><a class="btn btn-default" href="https://go.microsoft.com/fwlink/?LinkId=301865">Learn more &raquo;</a></p>
    </div>
    <div class="col-md-4">
        <h2>Get more libraries</h2>
        <p>NuGet is a free Visual Studio extension that makes it easy to add, remove, and update libraries and tools in Visual Studio projects.</p>
        <p><a class="btn btn-default" href="https://go.microsoft.com/fwlink/?LinkId=301866">Learn more &raquo;</a></p>
    </div>
    <div class="col-md-4">
        <h2>Web Hosting</h2>
        <p>You can easily find a web hosting company that offers the right mix of features and price for your applications.</p>
        <p><a class="btn btn-default" href="https://go.microsoft.com/fwlink/?LinkId=301867">Learn more &raquo;</a></p>
    </div>
</div>

@* 以下内容新增*@

<style>
    body {
        font-family: 'Arial', sans-serif;
        background-color: #1a1a1a;
        color: #ffffff;
        margin: 0;
        padding: 20px;
    }

    .calculator {
        background: #2a2a2a;
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
        max-width: 400px;
        margin: auto;
    }

    h2 {
        text-align: center;
    }

    input[type="text"], input[type="button"] {
        width: calc(100% - 20px);
        padding: 10px;
        margin: 5px 0;
        border: none;
        border-radius: 5px;
        font-size: 18px;
    }

    input[type="text"] {
        background: #333;
        color: #fff;
    }

    input[type="button"] {
        background: #007bff;
        color: white;
        cursor: pointer;
    }

        input[type="button"]:hover {
            background: #0056b3;
        }

    .result {
        margin-top: 20px;
        text-align: center;
        font-size: 1.5em;
    }

    .button-row {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .button {
        flex: 1 0 48%;
        margin: 5px;
    }
</style>


<div class="calculator">
    <h2>科学计算器</h2>
    <input type="text" id="expression" placeholder="输入计算表达式" />

    <div class="button-row">
        <input type="button" class="button" value="sin(x)" onclick="document.getElementById('expression').value += 'Math.sin(';" />
        <input type="button" class="button" value="cos(x)" onclick="document.getElementById('expression').value += 'Math.cos(';" />
        <input type="button" class="button" value="tan(x)" onclick="document.getElementById('expression').value += 'Math.tan(';" />
        <input type="button" class="button" value="√" onclick="document.getElementById('expression').value += 'Math.sqrt(';" />
    </div>

    <div class="button-row">
        <input type="button" class="button" value="log(x)" onclick="document.getElementById('expression').value += 'Math.log(';" />
        <input type="button" class="button" value="exp(x)" onclick="document.getElementById('expression').value += 'Math.exp(';" />
        <input type="button" class="button" value="π" onclick="document.getElementById('expression').value += 'Math.PI';" />
        <input type="button" class="button" value="e" onclick="document.getElementById('expression').value += 'Math.E';" />
    </div>

    <div class="button-row">
        <input type="button" class="button" value="+" onclick="document.getElementById('expression').value += ' + ';" />
        <input type="button" class="button" value="-" onclick="document.getElementById('expression').value += ' - ';" />
        <input type="button" class="button" value="*" onclick="document.getElementById('expression').value += ' * ';" />
        <input type="button" class="button" value="/" onclick="document.getElementById('expression').value += ' / ';" />
    </div>

    <div class="button-row">
        <input type="button" class="button" value="计算" onclick="calculate()" />
        <input type="button" class="button" value="清空" onclick="clearInput()" />
    </div>

    <div id="result" class="result"></div>
</div>

<!-- 引入外部 JavaScript 文件 -->
<script src="~/scripts/calculator.js"></script>

3. 修改控制器（Controller）

在视图中，我们将包含HTML、CSS和JavaScript代码。JavaScript代码将放在视图的底部，以确保在DOM加载后执行。

路径: Views/Home/Index.cshtml

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace ASP.NET_MVC.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        public ActionResult About()
        {
            ViewBag.Message = "Your application description page.";

            return View();
        }

        public ActionResult Contact()
        {
            ViewBag.Message = "Your contact page.";

            return View();
        }

        
    }
}

4. 创建 JavaScript 文件

首先，在项目中创建一个 Scripts 文件夹（如果尚未存在），然后在该文件夹中创建一个新的 JavaScript 文件，例如 calculator.js。其中放的是计算的动作方法。

路径: scripts/calculator.js

function calculate() {
    const input = document.getElementById('expression').value;
    try {
        const result = eval(input); // 使用 eval 来计算表达式
        document.getElementById('result').innerText = '结果: ' + result;
    } catch (e) {
        document.getElementById('result').innerText = '错误: ' + e.message;
    }
}

function clearInput() {
    document.getElementById('expression').value = '';
    document.getElementById('result').innerText = '';
}