建立第一个MVC5控制器

发布时间: 2024-02-22 19:41:35 阅读量: 39 订阅数: 24

SignalR 2.0 and MVC 5即时通讯完整版示例

本教程将向您介绍使用ASP.NET SignalR 2和ASP.NET MVC 5进行实时Web应用程序开发。本教程使用与SignalR入门教程相同的聊天应用程序代码，但演示如何将其添加到MVC 5应用程序。在这个主题中，您将学习以下SignalR开发任务：将SignalR库添加到MVC 5应用程序。创建集线器和OWIN启动类来将内容推送到客户端。在网页中使用SignalR jQuery库来发送消息并从集线器显示更新。以下屏幕截图显示了在浏览器中运行的已完成的聊天应用程序。聊天实例部分：设置项目运行示例检查代码下一步设置项目先决条件： Visual Studio 2013.如果您没有Visual Studio，请参阅ASP.NET下载以获取免费的Visual Studio 2013 Express开发工具。本节介绍如何创建ASP.NET MVC 5应用程序，添加SignalR库以及创建聊天应用程序。在Visual Studio中，创建一个面向.NET Framework 4.5的C＃ASP.NET应用程序，将其命名为SignalRChat，然后单击确定。创建网页在New ASP.NET Project对话框中选择MVC，然后点击Change Authentication。创建网页在更改身份验证对话框中选择无身份验证，然后单击确定。选择不验证注意如果您为您的应用程序选择不同的身份验证提供程序，Startup.cs则将为您创建一个班级; 您将不需要Startup.cs在下面的第10步中创建自己的课程。在“ 新建ASP.NET项目”对话框中单击确定。打开工具| 库包管理器| 程序包管理器控制台并运行以下命令。此步骤向项目添加了一组启用SignalR功能的脚本文件和程序集引用。 install-package Microsoft.AspNet.SignalR 在解决方案资源管理器中，展开脚本文件夹。请注意，SignalR的脚本库已添加到项目中。脚本文件夹在解决方案资源管理器中，右键单击该项目，选择添加| 新建文件夹，并添加一个名为Hubs的新文件夹。用鼠标右键单击该Hubs文件夹，单击添加| 新建项目，选择Visual C＃| Web | SignalR节点安装窗格中，从中心窗格中选择SignalR Hub Class（v2），并创建一个名为ChatHub.cs的新中心。您将使用此类作为将消息发送到所有客户端的SignalR服务器中心。创建新的中心用下面的代码替换ChatHub类中的代码。 C＃复制 using System; using System.Web; using Microsoft.AspNet.SignalR; namespace SignalRChat { public class ChatHub : Hub { public void Send(string name, string message) { // Call the addNewMessageToPage method to update clients. Clients.All.addNewMessageToPage(name, message); } } } 创建一个名为Startup.cs的新类。将文件的内容更改为以下内容。 C＃复制 using Owin; using Microsoft.Owin; [assembly: OwinStartup(typeof(SignalRChat.Startup))] namespace SignalRChat { public class Startup { public void Configuration(IAppBuilder app) { // Any connection or hub wire up and configuration should go here app.MapSignalR(); } } } 编辑HomeController在Controllers / HomeController.cs中找到的类，并将以下方法添加到类中。此方法返回您将在稍后的步骤中创建的聊天视图。 C＃复制 public ActionResult Chat() { return View(); } 右键单击Views / Home文件夹，然后选择Add ... | 查看。在添加视图对话框中，命名新视图聊天。添加一个视图用以下代码替换Chat.cshtml的内容。重要将SignalR和其他脚本库添加到Visual Studio项目中时，程序包管理器可能会安装比本主题中显示的版本更新的SignalR脚本文件版本。确保代码中的脚本引用与项目中安装的脚本库的版本相匹配。 CSHTML 复制 @{ ViewBag.Title = "Chat"; } <h2>Chat</h2> <div class="container"> <input type="text" id="message" /> <input type="button" id="sendmessage" value="Send" /> <input type="hidden" id="displayname" /> <ul id="discussion"> </ul> </div> @section scripts {    [removed][removed]  [removed][removed]  [removed] $(function () { // Reference the auto-generated proxy for the hub. var chat = $.connection.chatHub; // Create a function that the hub can call back to display messages. chat.client.addNewMessageToPage = function (name, message) { // Add the message to the page. $('#discussion').append('<li><strong>' + htmlEncode(name) + '</strong>: ' + htmlEncode(message) + '</li>'); }; // Get the user name and store it to prepend to messages. $('#displayname').val(prompt('Enter your name:', '')); // Set initial focus to message input box. $('#message').focus(); // Start the connection. $.connection.hub.start().done(function () { $('#sendmessage').click(function () { // Call the Send method on the hub. chat.server.send($('#displayname').val(), $('#message').val()); // Clear text box and reset focus for next comment. $('#message').val('').focus(); }); }); }); // This optional function html-encodes messages for display in the page. function htmlEncode(value) { var encodedValue = $('<div />').text(value).html(); return encodedValue; } [removed] } 保存所有的项目。运行示例按F5以调试模式运行项目。在浏览器地址行中，将/ home / chat附加到项目默认页面的URL。“聊天”页面将加载到浏览器实例中，并提示输入用户名。输入用户名输入一个用户名。复制浏览器地址栏中的URL，并使用它打开两个浏览器实例。在每个浏览器实例中，输入唯一的用户名。在每个浏览器实例中，添加注释并单击发送。评论应显示在所有浏览器实例中。注意这个简单的聊天应用程序不会维护服务器上的讨论上下文。该集线器向所有当前用户广播评论。稍后加入聊天的用户将看到从加入时开始添加的消息。以下屏幕截图显示了在浏览器中运行的聊天应用程序。聊天浏览器在解决方案资源管理器中，查看正在运行的应用程序的脚本文档节点如果您使用Internet Explorer作为浏览器，则此节点在调试模式下可见。有一个名为hubs的脚本文件，SignalR库在运行时动态生成。这个文件管理jQuery脚本和服务器端代码之间的通信。如果您使用Internet Explorer以外的浏览器，则还可以通过直接浏览来访问动态集线器文件，例如http：// mywebsite / signalr / hubs。检查代码 SignalR聊天应用程序演示了两个基本的SignalR开发任务：创建一个集线器作为服务器上的主要协调对象，并使用SignalR jQuery库来发送和接收消息。1 SignalR集线器在代码示例中，ChatHub类从Microsoft.AspNet.SignalR.Hub类派生。从Hub类派生是构建SignalR应用程序的有效方法。您可以在Hub类上创建公共方法，然后通过从网页中的脚本调用这些方法来访问这些方法。在聊天代码中，客户端调用ChatHub.Send方法发送一条新消息。集线器通过调用Clients.All.addNewMessageToPage将消息发送给所有客户端。所述发送方法演示几个集线器概念：在集线器上声明公用方法，以便客户端可以调用它们。使用Microsoft.AspNet.SignalR.Hub.Clients属性访问连接到此集线器的所有客户端。调用客户端上的函数（如addNewMessageToPage函数）来更新客户端。 C＃复制 public class ChatHub : Hub { public void Send(string name, string message) { Clients.All.addNewMessageToPage(name, message); } } SignalR和jQuery 代码示例中的Chat.cshtml视图文件显示了如何使用SignalR jQuery库与SignalR集线器进行通信。代码中的基本任务是创建对集线器的自动生成代理的引用，声明服务器可以调用的将内容推送到客户端的功能，以及启动连接以将消息发送到集线器。以下代码声明了对中心代理的引用。 JavaScript的复制 var chat = $.connection.chatHub; 注意在JavaScript中，对服务器类及其成员的引用是驼峰式的。代码示例在JavaScript中引用C＃ChatHub类作为chatHub。如果你想ChatHub在传统的Pascal框架中引用jQuery中的类，就像在C＃中一样，编辑ChatHub.cs类文件。添加一个using语句来引用Microsoft.AspNet.SignalR.Hubs命名空间。然后将该HubName属性添加到ChatHub该类中，例如[HubName("ChatHub")]。最后，更新你的jQuery引用的ChatHub类。以下代码显示了如何在脚本中创建回调函数。服务器上的集线器类调用此函数将内容更新推送到每个客户端。对htmlEncode函数的可选调用显示了一种在将消息内容显示在页面中之前对其进行HTML编码的方法，以防止脚本注入。 HTML 复制 chat.client.addNewMessageToPage = function (name, message) { // Add the message to the page. $('#discussion').append('<li><strong>' + htmlEncode(name) + '</strong>: ' + htmlEncode(message) + '</li>'); }; 以下代码显示如何打开与集线器的连接。代码启动连接，然后传递一个函数来处理“聊天”页面中“ 发送”按钮上的点击事件。注意这种方法可以确保在事件处理程序执行之前建立连接。 JavaScript的复制 $.connection.hub.start().done(function () { $('#sendmessage').click(function () { // Call the Send method on the hub. chat.server.send($('#displayname').val(), $('#message').val()); // Clear text box and reset focus for next comment. $('#message').val('').focus(); }); });

# 1. 理解MVC5架构模式 MVC5（Model-View-Controller）是一种常用的软件架构模式，用于组织代码、提高可维护性和降低耦合度。本章将介绍MVC5架构模式的基本概念、核心组件以及与其他架构模式的比较。 ## 1.1 什么是MVC5？ MVC5是一种软件架构模式，将应用程序分为三个核心部分：模型（Model）、视图（View）和控制器（Controller）。模型负责处理应用程序的业务逻辑和数据。视图负责呈现用户界面和与用户交互。控制器充当模型和视图之间的中介，接受用户输入并相应地更新模型和视图。 MVC5架构模式提供了更好的代码组织、更好的可维护性和更强的扩展性，使开发人员能够更轻松地协作，并且更容易进行单元测试。 ## 1.2 MVC5架构模式中的三个核心组件在MVC5架构模式中，模型（Model）、视图（View）和控制器（Controller）是三个核心组件： - **模型（Model）**：负责处理应用程序的业务逻辑和数据。模型是应用程序的基础数据和业务规则的表示，负责数据访问、业务规则和校验、数据转换等。 - **视图（View）**：负责呈现用户界面和与用户交互。视图是用户界面的表示，负责在用户界面上呈现数据、接受用户输入、渲染页面等。 - **控制器（Controller）**：负责接受用户输入并相应地更新模型和视图。控制器是用户输入的代理，负责协调模型和视图之间的交互，接收用户输入并根据用户行为更新模型和视图。 ## 1.3 MVC5架构模式与其他架构模式的比较 MVC5架构模式相对于其他架构模式有许多优势： - **可维护性**：MVC5架构模式使代码更容易维护和扩展，因为每个组件都有自己的责任，并且组件之间的耦合度较低。 - **可测试性**：MVC5架构模式通过分离关注点，使单元测试变得更加容易。模型、视图和控制器可以分别进行单元测试，从而增加了代码的可测试性。 - **可重用性**：MVC5架构模式鼓励代码的重用，因为模型、视图和控制器都是相对独立的组件，可以在不同的场景中重复使用。 - **松耦合**：MVC5架构模式通过明确定义每个组件的职责，降低了组件之间的耦合度，使得整个应用程序更加灵活和可维护。综上所述，MVC5架构模式是一种值得推荐的软件架构模式，适用于各种规模的应用程序开发。接下来，我们将进一步探讨如何在MVC5项目中应用这一架构模式。 # 2. 设置MVC5项目在开始编写MVC5控制器之前，首先需要设置一个新的MVC5项目。本章将介绍如何创建一个新的MVC5项目，概述其项目结构，并配置项目的路由和访问规则。 #### 2.1 创建一个新的MVC5项目要创建新的MVC5项目，可以按照以下步骤： 1. 打开Visual Studio（确保已安装了MVC5开发工具）。 2. 选择“文件” -> “新建” -> “项目”，在弹出的对话框中选择“Visual C#” -> “Web” -> “ASP.NET Web Application”。 3. 在项目类型中选择“MVC”，并为项目指定名称，然后点击“确定”。 #### 2.2 MVC5项目结构概述：常见的文件和文件夹解释创建新的MVC5项目后，可以看到以下常见的文件和文件夹： - **App_Start**：包含了一些在应用程序启动时执行的代码，比如路由配置、过滤器设置等。 - **Controllers**：包含了控制器类文件，用于处理用户请求并返回相应的视图页面或数据。 - **Models**：用于存放模型类文件，通常用于表示数据对象及其操作。 - **Views**：包含了视图页面文件，用于展示数据并与用户交互。 - **Scripts**：用于存放JavaScript文件，比如jQuery库、自定义脚本等。 - **Content**：用于存放样式文件，比如CSS文件、图片等。 #### 2.3 配置MVC5项目的路由和访问规则 MVC5项目中的路由配置位于“App_Start”文件夹中的“RouteConfig.cs”文件中。在这个文件中，可以配置URL与控制器/动作方法的映射关系。例如，可以使用以下代码配置默认路由规则： ```csharp 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 } ); } } ``` 上述代码中，定义了一个名为“Default”的路由规则，当用户请求的URL不指定特定的控制器、动作方法和参数时，将默认调用“Home”控制器的“Index”方法。经过以上的设置，我们已经完成了MVC5项目的创建和基本配置。接下来，将进入第三章，详细介绍如何编写第一个控制器。 # 3. 编写第一个控制器在这一章中，我们将学习如何编写第一个MVC5控制器，并向控制器中添加动作方法以处理用户请求。 #### 3.1 创建一个新的控制器类首先，打开你的MVC5项目，在Visual Studio中，右键单击Controllers文件夹，然后选择“添加” > “控制器”。在弹出的对话框中，选择“MVC 5 控制器 - 空”模板，并为控制器命名，比如"HomeController"，然后点击“确定”按钮。这样就创建了一个名为HomeController的控制器类。 #### 3.2 在控制器中添加动作方法在HomeController类中，我们可以添加各种处理用户请求的动作方法。比如，我们可以添加一个用于显示首页的动作方法。在HomeController类中添加以下代码： ```csharp public class HomeController : Controller { public ActionResult Index() { return View(); } } ``` 在上面的代码中，我们定义了一个名称为"Index"的动作方法，并指定其返回一个视图页面。 #### 3.3 理解控制器和动作方法之间的关系在MVC5架构中，控制器负责接收用户请求并协调处理逻辑，而动作方法则负责具体的请求处理和结果返回。通过在控制器中编写动作方法，我们可以实现对用户请求的灵活处理和响应。通过这些步骤，我们完成了第一个MVC5控制器的编写，并向其中添加了一个简单的动作方法。在下一章中，我们将学习如何创建视图页面，并将其与控制器关联起来。希望这样的内容能够帮助你更好地理解MVC5控制器的编写过程。 # 4. 创建视图页面视图是MVC架构中的一个重要组成部分，用于向用户展示数据并与用户交互。在这一章节，我们将学习如何创建视图页面，并理解视图页面与控制器的关联。 #### 4.1 什么是视图页面？视图页面是MVC架构中负责呈现数据的部分。它负责将模型中的数据呈现给用户，并接收用户的输入。在MVC5中，视图页面通常使用Razor语法来构建。 #### 4.2 在控制器中返回视图页面在MVC5控制器中，我们可以使用`View()`方法来返回一个视图页面。例如： ```python def Index(self): # 从模型获取数据 data = Model.get_data() # 返回视图页面，并传递数据 return View(data) ``` #### 4.3 使用Razor语法编写视图页面 Razor是MVC5中常用的视图页面编写语法，它允许我们在HTML中嵌入C#代码，以便动态地呈现数据和执行逻辑操作。以下是一个简单的Razor语法例子： ```html <!DOCTYPE html> <html> <head> <title>欢迎来到我的网站</title> </head> <body> <h1>欢迎, @Model.Name</h1> <p>您的邮箱是：@Model.Email</p> </body> </html> ``` 在这个章节中，我们学习了如何创建视图页面，并使用Razor语法来动态显示模型中的数据。视图页面的创建和使用是MVC架构中非常重要的一部分，能够帮助我们向用户展示信息并与用户进行交互。 # 5. 模型绑定和数据传递在本章中，我们将学习如何在MVC5控制器中进行模型绑定和数据传递。这是一个非常重要的主题，因为它涉及到了控制器和视图之间的数据交互，是构建MVC5应用的核心部分之一。 #### 5.1 模型绑定的概念及作用模型绑定是MVC5中用于将用户提交的数据绑定到相应的模型对象上的过程。在控制器中，我们可以通过模型绑定来接收用户发送的数据，并将其转换为具体的模型对象，便于在后续的逻辑中进行处理。模型绑定使得数据传递更加简单和高效。 #### 5.2 在控制器中传递数据到视图页面在MVC5控制器中，我们可以通过将数据传递给视图页面来实现页面内容的动态展示。通过模型对象或者临时数据，我们可以在控制器中将数据传递给视图页面，从而实现页面内容的个性化展示。 ```java // Java示例 @Controller public class ExampleController { @GetMapping("/example") public String showExample(Model model) { // 通过模型对象传递数据 ExampleModel exampleModel = new ExampleModel(); exampleModel.setData("Hello, MVC5!"); model.addAttribute("example", exampleModel); // 通过临时数据传递 model.addAttribute("message", "Welcome to MVC5!"); return "examplePage"; } } ``` #### 5.3 接收用户输入数据并传递给控制器 MVC5控制器可以通过接收用户在视图页面上的输入数据，并将其传递到后端进行处理。通过表单提交或者URL参数等方式，我们可以将用户输入的数据传递给控制器，实现数据的双向传递和交互。 ```java // Java示例 @Controller public class ExampleController { @PostMapping("/submitForm") public String handleFormSubmission(@RequestParam("username") String username, @RequestParam("password") String password, Model model) { // 处理用户提交的表单数据 // ... // 返回处理结果 return "resultPage"; } } ``` 通过本章的学习，我们对模型绑定和数据传递有了更深入的了解。这将有助于我们更好地设计和实现MVC5应用中的数据交互功能。 # 6. 部署和测试MVC5控制器应用在这一章中，我们将讨论如何部署和测试已经创建的MVC5控制器应用。以下是具体内容： #### 6.1 部署MVC5应用到服务器 - 确保服务器环境满足MVC5应用的要求，如.NET Framework版本等 - 将MVC5应用程序文件发布到服务器，可以使用Visual Studio的发布功能或手动发布 - 配置服务器上的IIS，创建一个新的应用程序池，并将MVC5应用程序添加为一个新的站点 #### 6.2 使用浏览器测试MVC5应用的控制器功能 - 打开浏览器，并输入MVC5应用的URL地址 - 测试不同控制器和动作方法，确保页面能够正确响应 - 输入不同的URL参数，测试控制器的参数绑定功能 #### 6.3 常见问题排查与解决方法 - 如果出现404错误，检查路由配置和IIS设置 - 如果页面显示异常，查看控制器和视图页面的代码逻辑 - 如果数据传递异常，检查模型绑定和数据传递的逻辑通过这一章的内容，您将能够完整地部署和测试您的MVC5应用，确保应用程序能够正常运行并满足用户需求。

最低0.47元/天解锁专栏

买1年送3月

点击查看下一篇

百万级高质量VIP文章无限畅学

千万级优质资源任意下载

C知道免费提问 ( 生成式Al产品 )

建立第一个MVC5控制器

相关推荐

专栏目录

专栏目录

建立第一个MVC5控制器

相关推荐

seme-framework:轻量级MVC PHP框架

Spring配置和第一个HellWorld搭建

头歌第一个Spring MVC项目

idea创建第一个spring mvc

asp.net mvc5 插件

.net mvc5 admin

MVC5 assignment的用法

asp.net mvc 5高级编程pdf

MVC程序的建立实验步骤

专栏目录

最新推荐

【数据安全必修课】：揭秘BitLocker加密下的WIN10系统重装数据恢复黄金策略（权威指南）

【C语言入门到精通】：掌握10个pta答案，从基础到实战的跨越式成长（一）

伯努利滤波器实践课：噪声消减技术的探索之旅（噪音终结者特训营）

E2000变频器高级使用技巧：性能优化与故障处理

Element-ui el-tree局部刷新：提升用户体验的关键操作（快速解决数据变更问题）

【坐标转换精通】：ZMap宗海图制作系统投影技术深入解析

【环境变量终极指南】：对IT专业人士至关重要的配置解析

ADS与实际电路对接：理论与实践的无缝融合技术

快速掌握Radiant：5个高级操作技巧提高工作效率

【高性能计算可视化】：在ParaView中实现的高级技巧

专栏目录