65.9K
CodeProject 正在变化。 阅读更多。
Home

面向桌面 (WPF/WinForms) 开发人员的 ASP.NET MVC

Rammohan Raja
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.78/5 (13投票s)

2014年3月27日

CPOL

7分钟阅读

viewsIcon

46318

面向桌面应用程序开发者的 Web 开发。

引言

在每个桌面应用程序开发人员的职业生涯中，总有一天会需要制作一个网站。本文旨在帮助前端桌面应用程序开发人员 (WPF 或 WinForms) 快速掌握使用 ASP.NET MVC 构建网站的技能。为什么选择 MVC 而不是 Web Forms 等呢？仅仅因为我认为 MVC 比微软所有其他用于构建网站的技术栈更新颖、更酷、更强大。是的，这是我的个人观点，我有权拥有它！另外请注意，由于我热衷于桌面应用程序开发，您会经常看到关于 WPF/WinForms 应用程序优于 Web 应用程序的评论。既然我们已经完成了免责声明，那么让我们开始吧。

桌面应用程序与 Web 应用程序

这两种技术之间存在完全的范式转变。桌面应用程序是有状态的，而 Web 应用程序是无状态的。对我来说，这感觉就像在掌握了过程式编程之后学习事件驱动编程。接受你正在踏上一个陡峭的学习曲线的事实会有所帮助。按照你自己的舒适节奏前进，仓促行事不会有帮助。对于桌面开发人员来说，需要忘掉很多东西才能理解 Web 编程概念。例如，桌面程序员可能正在努力解决对象深拷贝问题、垃圾回收等。而在 Web 编程世界中，你必须解决对象生命周期等基本问题。对 Web 服务器的每个请求都需要你从头开始重新创建对象。如果你试图作弊并使用会话等使你的 Web 应用程序有状态，你很快就会遇到扩展问题。你的网站会因为少数在线用户不断访问而变得极其缓慢。所以深呼吸，忘记你所知道的所有关于有状态计算的知识，并敞开心扉接受一个可能看起来效率低下的技术栈！

假设

我假设以下几点。

  • 您至少有 3-4 年的桌面开发经验 (WPF 或 WinForms)。
  • 您理解 MVC 设计模式。
  • 您知道什么是 HTML，并且可以创建一个简单的静态 HTML 网页。

背景

我浏览了许多关于如何使用 ASP.NET MVC 学习 Web 编程的在线教程。其中大多数都使用 Visual Studio 提供的 Internet 或 Intranet 网站模板作为起点。这使得学习曲线非常陡峭。

你最终会得到一个包含无数文件的项目，却不知道从何开始。仅仅是解决方案资源管理器中如此多的文件就可能让人感到不知所措。这个模板唯一的好处是，如果你按下 F5 键，你就有一个功能齐全的网站可以运行。网站本身看起来很复杂，因为它有一个主页、关于页面、联系页面、登录页面，甚至还有一个注册用户页面！


Hello World 网站

让我们使用 ASP.NET MVC 创建我们的第一个 Hello World 网站。我特意在此处保持简单，以便我们能够确切地了解幕后发生了什么以及网站实际是如何工作的。

在本教程中，我们将从 Visual Studio 中的基本模板开始。让我们从创建一个新项目开始。


如果您在 Visual Studio 的“新建项目”对话框中看不到“ASP.NET MVC 4 Web 应用程序”或“ASP.NET MVC 5 Web 应用程序”，请在 Google 上搜索如何安装。成功安装后，您应该会看到类似的屏幕。单击“ASP.NET MVC 4 Web 应用程序”或“ASP.NET MVC 5 Web 应用程序”，然后单击“确定”。

在下一个屏幕中，选择“基本”模板，并确保视图引擎为 Razor。我稍后会解释什么是视图引擎。点击“确定”。


您会同意，这次“解决方案资源管理器”看起来没有那么令人不知所措了。但这是有代价的。如果您现在按 F5，您将收到此错误。

这是因为“基本”模板只创建了一个可供您构建的骨架，而不是像“Internet”或“Intranet”模板那样创建一个完整的网站，您可以直接运行。为了帮助我们更好地理解网站是如何实际工作的，我们将逐个向项目中添加文件。

当用户在网络浏览器中输入我们网站的 URL 并点击“前往”时，请求会被路由到网络服务器。网络服务器通过 URL 中包含的信息进行定位。有关更多详细信息，请参阅此链接：http://www.w3.org/wiki/How_does_the_Internet_work

一旦网络服务器接收到请求，它就会识别该请求属于哪个网站，如果该网站是使用 ASP.NET MVC 构建的，它将调用 Home 控制器中的 Index 操作。让我们退一步，找出为什么以及如何发生这种情况。在“解决方案资源管理器”中，展开文件夹 App_Start 并双击文件 RouteConfig.cs。您应该会看到类似以下内容。

public class RouteConfig
{
    public static void RegisterRoutes(RouteCollection routes)
    {
        routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

        routes.MapRoute(
            name: "Default",
            url: "{controller}/{action}/{id}",
            defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
        );
    }
}

这是“基本”模板为您网站创建的默认路由映射条目。现在请注意“defaults”条目。它表示默认控制器将是 Home，该控制器中的默认操作将是 Index。在 ASP.NET MVC 中，Web 服务器接收到的所有请求都将转发到控制器以及这些控制器中存在的动作。控制器的动作与模型和视图进行交互，以返回响应给 Web 服务器，最终该响应将被路由回 Web 浏览器。

最后，为什么路由映射中的默认条目被调用了？这是因为用户没有指定要调用哪个控制器和动作。假设我们正在构建 Google 网站。当用户在网络浏览器中输入 URL http://www.google.com 时，URL 不包含有关要调用的控制器和动作的信息，因此使用了默认值。如果用户输入 http://www.google.com/search/images，则请求将被路由到 Search 控制器中的 Images 动作。如果这听起来令人困惑或费解，请不要担心。我们将在 ASP.MVC 中重新讨论路由，届时它会更有意义。

现在很清楚为什么我们的网站不工作了，我们没有 Home 控制器。让我们继续创建一个。在解决方案资源管理器中右键单击空的 Controllers 文件夹，然后单击 Add->Controller

控制器名称输入 HomeController，模板选择 Empty MVC Controller。点击 Add。Controllers 文件夹中将创建一个名为 HomeController.cs 的新文件。打开此文件。您应该会看到类似以下内容。

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

namespace MvcApplication1.Controllers
{
    public class HomeController : Controller
    {
        //
        // GET: /Home/

        public ActionResult Index()
        {
            return View();
        }

    }
}

Index 操作已添加到您的控制器中。当前代码将尝试返回此控制器操作的默认视图。因此，让我们继续为这个控制器操作创建默认视图。在解决方案资源管理器中右键单击 Views 文件夹，然后选择 Add->New Folder。将文件夹命名为 Home。现在右键单击新创建的 Home 文件夹，然后单击 Add->View。

视图名称应为 Index，视图引擎应为 Razor (CSHTML)。有关其他设置，请参见对话框图片。单击“添加”。Views/Home 文件夹中将创建一个名为 Index.cshtml 的新文件。打开此文件。您应该会看到类似以下内容。

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

将 Index 替换为文本 “Hello World”。像这样

@{
    ViewBag.Title = "Index";
}

<h2>Hello World!</h2>
现在按 F5 或 Ctrl+F5。您应该会看到类似以下内容。

恭喜，你的 Hello World 网站已启动并运行！现在是时候找出幕后发生的一切了。在浏览器中网站的任何位置右键单击，然后点击“查看源代码”。您应该会看到类似以下内容。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link href="/Content/site.css" rel="stylesheet"/>

    <script src="/Scripts/modernizr-2.5.3.js"></script>

</head>
<body>
    

<h2>Hello World!</h2>


    <script src="/Scripts/jquery-1.7.1.js"></script>

    
</body>
</html>

这是一个格式良好的 HTML 页面，包含头部和主体节点。如果您回到 Index.cshtml，您会注意到我们只指定了

<h2>Hello World!</h2>

但是 Web 服务器返回了一个完整的页面，其中包含我们的 Hello World 条目。要了解幕后发生了什么，请前往解决方案资源管理器并打开 Views 文件夹中的 _ViewStart.cshtml 文件。您应该会看到类似以下内容。

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

好的，这里没什么特别的，所以我们进一步探索 Views/Shared/_Layout.cshtml 文件。在解决方案资源管理器中，进入 views 文件夹并展开 Shared 子文件夹。双击 _Layout.cshtml 文件。您应该会看到类似以下内容。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    @RenderBody()

    @Scripts.Render("~/bundles/jquery")
    @RenderSection("scripts", required: false)
</body>
</html>

瞧，我们有了一个格式良好的 HTML 页面模板。这里的魔法短语是 @RenderBody()。这是从你的 Home 控制器的 Index 动作返回的视图合并的地方。

关注点

在桌面应用程序世界中，所有这些都相当于创建了一个 MainForm (WinForms) 或 MainWindow (WPF)，并在其中放置了一个显示“Hello World!”的标签。

在下一部分中，我们将进一步操作此项目，将其从“Hello World”转变为更有用的东西。我省略了许多信息，以便使本教程尽可能简单易懂。

历史

首次发布于 2014 年 3 月

© . All rights reserved.