使用 ASP.NET MVC 实现主从视图
4.83/5 (32投票s)
使用 ASP.NET MVC 创建主从视图的三种方法
介绍
本文适合初学者，您将通过一个真实世界的例子，学习如何将 ASP.NET MVC 的默认主从视图实现提升到一个新的水平。
问题所在
MVC 基础架构可以轻松、几乎不费力地显示一个记录列表。
它来自数据库。同样，它也支持（开箱即用）对每条记录进行钻取/删除和更新。
但是，这并不总是最方便的方式。
在本教程中，我们将看到三种呈现主从视图的方法。
使用 MVC 的解决方案。
场景：
我们有一个需求
开发一个网站，显示客户列表，并提供钻取
客户并查看完整详情的选项。
那么让我们看看如何实现这个功能
用 MVC4 以一种非常简单的方式实现。
为了专注于解决方案，
我们将使用最少的配置……没有分层、IOC、测试以及书上说的一切
东西……
解决方案（第一部分）：
- 首先，使用 VS2012，让我们创建一个新的 asp.net mvc4 项目
- 我们将选择 Internet 应用程序。
3. 为了创建我们的
对象模型，我们将使用 EntityFramework。
右键点击 Models 文件夹并选择新建
项…
从数据模板中选择 ADO.NET 实体数据模型
文件夹
将名称更改为：Northwind.edmx
点击添加。
点击下一步，从数据库创建模型。
选择你的数据库…
要创建一个新连接，点击新建连接并输入你的数据库服务器名称和数据库名称。
（*注意：连接字符串将由 VS 添加到
我们的 web.config 文件中）
选择 Customers 表并点击完成。
4. 如果我们查看项目
结构，我们会看到生成的模型 - Northwind.edmx 以及所选
客户表的可视化表示。
5. 在 Northwind.edmx 下，我们可以
看到为我们创建的名为 Customers 的类。
6. 重要！为了使用
我们刚刚创建的新数据模型，我们必须构建项目。
MVC 基础架构使我们能够
以简单、轻松且不费吹灰之力的方式使用对象模型。
7. 我们将创建一个新的
名为 Customer 的控制器。
8. 选择那个模板
它将使用我们之前创建的对象模型创建视图，然后点击“添加”。
9. 如果我们检查项目
的结构，我们会看到新的 CustomerController 和一些新的视图已经
被创建。这将让我们能够使用该模型。
10. 在运行代码之前，在
RouteConfig 文件中，我们将设置路由，
使其默认指向新创建的 CustomerController。
11. 为了稍微减少
客户表的显示，我们将在 CustomerController 的 Index 操作中使用 Take(5)
方法。
12. 我们也稍微减少了 Index 视图中的列数，
以得到一个更小的表格。
13. 为了让钻取功能正常工作，
请替换以下代码
从-
到-
15. 最后，按 F5 运行
项目。您应该会看到下面的结果屏幕。
16. 点击“详细信息”
会将我们引导至客户详细信息页面。
非常简单容易……
我们已经实现了需求。我们有了一个客户列表，并可以
钻取到客户的详细信息。
但最终用户就是最终用户，他们几乎从不满意
结果！
他们不喜欢为了查看客户信息
需要跳转到另一个屏幕，然后再返回客户列表，他们
希望在同一个页面上看到客户详细信息和客户列表！
没问题 - 让我们实现它：
解决方案（第二部分）：
我们将使用一个新模型，该模型将包含以下数据结构
要查看的客户列表。
选中的客户（如果
已选择）。
选中的客户代码（如果
已选择）。
这是我创建的新模型。名为“CustomerMasterDetailsModel”，
位于 Models 文件夹下。
我们将更改控制器中的 Index Action，以便使用新的
模型。代码应该像这样：
我要做的第一个改变是插入一个可选参数，以防
用户选择一个客户。
第一次，该参数将为 null，所以我们将传递给视图
完整的客户列表。
我们第二次到这里，是因为最终用户选择了一个客户。
这一次，参数将包含客户ID值。除了
客户列表，我们还必须定位所选的客户，将其添加到
模型中，连同所选的客户ID一起传递给视图。
你可能已经猜到，Index 视图也需要一些改动：
1. 我们将替换
现有的模型（在页面顶部）
从
为
2. 现在我们必须处理
视图中的两部分代码。一部分是客户列表，另一部分
是所选客户的信息。
我们将删除现有代码并创建一个
用于这两个部分的新代码。
我们先从客户列表开始 - （我们将
使用 UL 元素而不是 Table）并将其包装在一个名为
CustomerMasterList 的 section 元素内。
如你所见，我们将把
客户列表中的每个客户表示为一个 UL，并添加一个 ActionLink（它将被
转换为 <a href> 标签）。点击这个链接将引导我们到同一个
控制器，到 Index Action，并传递客户ID作为参数。
第二个代码部分名为
CustomerDetails，将处理显示客户信息（如果已选择）。
注意第31行，只有在选择了客户时，代码才会运行。
这是我们运行项目后得到的结果：
现在当我们点击“查看详情”链接时，我们将会被定向
到以下 URL：localhost:2075/Customer/Index/ALFKI
当 IndexAction 运行时，它会验证是否发送了客户ID。
如果是，它将返回包含客户列表、
所选客户对象和所选客户ID的新模型。
非常简单容易……
我们完成了我们的职责……实现了客户的需求。现在我们有
一个客户列表，并可以在同一个页面上钻取到客户信息。
同一个页面。
不？？？又来了？？？……我们的客户对结果感到失望！
他们不喜欢每次点击客户详情时，
页面都会刷新，特别是当他们在页面中间时，
刷新会让他们回到顶部。
好吧……你知道那句话：顾客永远是对的。
为了支持这个新需求，我们将使用 PartialViews 和 JQuery AJAX
功能。
让我们继续……
解决方案（第三部分）：
下图说明了为了
支持新请求，我们需要做的更改。
我将把负责显示客户详情的代码
转移到一个新的 PartialView 中，并向 Index 视图添加一些客户端代码，这
将帮助我们向服务器上的 action 方法发起 ajax 调用。然后服务器
会返回一个包含客户详情的 HTML 代码，这样我们就可以将其注入到
我们稍后将创建的一个新的 div（占位符）中。这些更改将帮助我们实现新需求。
1. 创建 PartialView
右键点击 Views 下的 customer 文件夹，然后点击“添加”。
这是新的配置值
视图
在创建的视图中，我们将删除最后两
行（处理导航功能的部分），我们不会使用它。
2. 对 Index 视图的更改
首先，我们将删除 id 为“CustomerDetails”的 section 元素。
我们将用一个新的空 div 来代替它，
id 为“CustomerDetail”，这个 div 将呈现所选
客户的详细信息 HTML。
我们将对第一个
负责呈现客户列表的代码段做一些修改，我们将替换
以下 <li> 元素
用这个 <li> 元素：
请注意，我们更改了
“Index” Action 的名称为“CustomerDetail”（我们马上就会添加它），
我们还添加了一个新的“css class”参数，它将
用作选择器来识别 <a> 元素。
最后剩下要做的是添加客户端脚本，该脚本将连接
<a> 元素的点击事件和 Ajax 命令（使用
类选择器）。
当用户点击 <a> 元素时，将向控制器中的
CustomerDetail Action 发起一个 Ajax 调用，控制器将返回一个
HTML 格式的部分视图，该视图将被注入到 div 元素中。
这是附加在
查看
末尾的脚本。3. 向控制器添加一个新的 Action
控制器 (Controller)
我们将创建一个新的 action（我们知道它的名字，因为我们在视图级别设置了它）。
这是我们全新的 Action：
在 Action 内部，我们使用 Find 方法
（并传入 id）来获取相应的客户对象，然后我们返回
Partial view，通过指定其名称以及当前找到的客户对象，
这最终将返回一个包含当前客户详情的 HTML 代码，以便
托管在我们的 Div 中。
我们完成了！！！
现在让我们按 F5 来运行项目，
我们将得到一个带有客户列表的主页面。
然后我们点击“查看详情”链接，瞧，我们得到了我们的
客户详情，并且没有整页刷新！J
