使用 MVC、AngularJS 和 Web API 2 入门
4.14/5 (21投票s)
使用 ReactJS 和 WCF Rest 的 MVC。
引言
写这篇文章的主要目的是，有很多关于 MVC 和 AngularJS 的文章和示例，但很少有关于 ReactJS 和 MVC 的文章和示例，而且也没有一篇像样的文章有示例解释如何使用 ReactJS 和 WCF REST 服务将数据从 SQL Server 数据库显示到 MVC 页面。我计划使用一个简单的程序来解释以下内容。
在本文中，我们将详细介绍以下内容：
- 使用简单的 HTML 页面创建第一个 ReactJS，以显示问候消息。
- 使用简单的 HTML 页面创建 ReactJS，以显示数据。
- 使用 MVC 和 WEB API 创建 ReactJS，以显示从 Controller 到 View 的 JSON 数据。
- 使用 MVC 和 WCF REST 服务创建 ReactJS，以使用 ReactJS 和 WCF REST 服务将数据库结果中的数据显示并绑定到 MVC 页面。
什么是 ReactJS？
ReactJS 是一个由 Facebook 团队开发的开源 JavaScript 库，由 Facebook 和 Instagram 维护。ReactJS 只有 View 部分，即 UI 部分。在 MVC 中，它有（Model View Controller），而在 ReactJS 中，它只有 View 部分。ReactJS 可用于处理频繁更改的大型数据。ReactJS 脚本文件将保存为 JSX 扩展名。
要了解更多关于 ReactJS 的详细信息，请查看以下参考链接：
1. ReactJS 和我们的第一个程序
步骤 1
将 ReactJS JS 链接添加到我们的 ReactJS HTML 页面。
<script src="https://fb.me/react-0.13.3.js"></script>
<script src="https://fb.me/JSXTransformer-0.13.3.js"></script>
第二步
在 HTML 的 body 标签中，声明 div 标签并为 div 标签指定一个合适的 id（名称）。ReactJS 会将所有结果显示在此 div 标签中。
<div id="myName"></div>
步骤 3
创建我们的第一个 ReactJS 脚本。这里，我们将类型添加为 ="text/jsx"。
<script type="text/jsx">
第 4 步：renderComponent
在 ReactJS 中，我们可以看到很多组件，这里的 render component 用于渲染结果并将其绑定到 DOM（即我们的 div 标签）。在下面的示例中，我们可以看到我们将 NameDisplay 组件绑定到了 DOM。
React.render(
<NameDisplay />,
document.getElementById('myName')
);
第 5 步：createClass
我们可以使用 React.createClass 创建自己的自定义组件。我们可以看到下面的示例。这里，我创建了一个名为 NameDisplay 的自定义组件。在这个组件中，我将返回一个 DIV，其中包含消息：“my Name is Shanu, Welcome to ReactJS”。我们将此组件绑定到 DOM。
var NameDisplay = React.createClass({
render: function() {
return (
<div >
my Name is Shanu,Welcome to ReactJS.
</div>
);
}
});
这是完整的 HTML 源代码。当我们在浏览器中运行以下代码时，我们将看到如下输出：
将以下代码保存为 HTML 并用浏览器打开：“shanuFirstReactJS.html”。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Welcome to ReactJs</title>
<script src="https://fb.me/react-0.13.3.js"></script>
<script src="https://fb.me/JSXTransformer-0.13.3.js"></script>
</head>
<body>
<div id="myName"></div>
<script type="text/jsx">
var NameDisplay = React.createClass({
render: function() {
return (
<div >
my Name is Shanu,Welcome to ReactJS.
</div>
);
}
});
React.render(
<NameDisplay />,
document.getElementById('myName')
);
</script>
</body>
</html>
2. 使用简单的 HTML 页面创建 ReactJS 以显示数据
希望您现在对 ReactJS 有了一些基本的了解。更多信息，请参阅上面的参考链接。现在让我们看看如何在 ReactJS 中声明一个变量并显示变量数据。
步骤 1
声明一个变量并添加示例如下：
var data = [
{ Count : 1, Author: "Shanu", Bookdesc: "C# Book written by Shanu " , NAMES: "C#"},
{ Count : 2, Author: "Afreen", Bookdesc: "C# Book written by Shanu " ,
NAMES: "REACTJS"},
{ Count : 3, Author: "Afraz", Bookdesc: "ASP.NET MVC Book written by Shanu ",
NAMES: "ASP.NET MVC" } ];
第二步
与上面的代码类似，我们使用 React.createClass 创建自己的自定义组件。这一次，在主组件中，我将结果数据传递给另一个名为 BooksList 的组件。
var BooksContainer = React.createClass({
render: function() {
return (
<div className="commentBox">
<h1>Book Details</h1>
<BooksList data={this.props.data} />
</div>
);
}}
);
步骤 3
在 BooksList 组件中，我逐个显示 bookArray 组件中的数据。
将以下代码保存为 HTML 并用浏览器打开：“BookDetailsReactJs.html”。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Shanu ReactJs</title>
<script src="https://fb.me/react-0.13.3.js"></script>
<script src="https://fb.me/JSXTransformer-0.13.3.js"></script>
</head>
<body>
<div id="bookContainer"></div>
<script type="text/jsx">
var data = [
{ Count : 1, Author: "Shanu", Bookdesc: "C# Book written by Shanu " , NAMES: "C#"},
{ Count : 2, Author: "Afreen",
Bookdesc: "C# Book written by Shanu " , NAMES: "REACTJS"},
{ Count : 3, Author: "Afraz", Bookdesc: "ASP.NET MVC Book written by Shanu ",
NAMES: "ASP.NET MVC" }
];
var BooksList = React.createClass({
render: function() {
var bookDetails = this.props.data.map(function (book) {
return (
<bookArray>
<b>No. </b> {book.Count}
<b> Author : </b> {book.Author}
<b> Book Desc : </b> {book.Bookdesc}
<b> Author Name : </b> {book.NAMES}
<br />
</bookArray>
);
});
return (
<div >
{bookDetails}
</div>
);
}
});
var bookArray = React.createClass({
render: function() {
return (
<div >
{this.props.children}
</div>
);
}
});
var BooksContainer = React.createClass({
render: function() {
return (
<div className="commentBox">
<h1>Book Details</h1>
<BooksList data={this.props.data} />
</div>
);
}
});
React.render(
<BooksContainer data={data} />,
document.getElementById('bookContainer')
);
</script>
</body>
</html>
Using the Code
到目前为止，我们已经看到了一个使用 HTML 和 ReactJS 的示例程序。现在我们来看看如何在 MVC 中使用 ReactJS。
必备组件
3. 简单的 MVC、ReactJS 和 Web API，通过 React JS 将 JSON 从 Controller 显示到 MVC View
在 Visual Studio 2015 中创建我们的 MVC Web 应用程序。安装好 Visual Studio 2015 后，点击 开始 -> 程序，然后选择 Visual Studio 2015，然后点击 Visual Studio 2015。
点击 新建 -> 项目，然后选择 Web -> ASP.NET Web 应用程序。选择您的项目位置并输入您的 Web 应用程序名称。
选择 MVC，并在 为...添加文件夹和核心引用 中，选择 Web API，然后点击 确定。
MVC 应用程序创建完成后，下一步是向我们的应用程序添加 ReactJS。
Home Controller
在您的 home controller 中，添加以下方法以返回 JSON 结果。这里，我返回 ItemName 和 price。我们需要将 URL 设置为 /Home/GetMessage，以便在我们的 ReactJS 脚本中获取结果。
public JsonResult GetItemDetails()
{
return Json(new { ItemName = "Samsung Notebook / ",Price=" 1500 RS " },
JsonRequestBehavior.AllowGet);
}
安装 ReactJS 包
如果 ReactJS 包丢失，请将该包添加到您的项目中。
右键单击您的 MVC 项目，然后点击 管理 NuGet 程序包。搜索 ReactJS -> 选择 ReactJS tools for ASP.NET MVC 4 and 5，然后点击 安装。
创建我们的 JSX 文件
右键单击 Scripts 文件夹，然后点击 添加 -> 新建项。
选择 Web -> 选择 JavaScript 文件 -> 输入带有“JSX”扩展名的脚本文件名，例如“shanuWebAPISample.jsx”，然后点击 添加。
现在我们可以看到我们的 JSX 文件已创建。这里，我们可以添加我们的 ReactJS 脚本。这是我们的 JSX 的完整代码，它会将数据结果显示到 MVC View。
var App = React.createClass({
getInitialState: function(){
return{data: []};
},
componentWillMount: function(){
var xhr = new XMLHttpRequest();
xhr.open('get', this.props.url, true);
xhr.onload = function() {
var webAPIData = JSON.parse(xhr.responseText);
this.setState({ data: webAPIData });
}.bind(this);
xhr.send();
},
render: function(){
return (
<h2>{this.state.data}</h2>
);
}
});
React.render(<App url="/Home/GetMessage" />, document.getElementById('reactContent'));
代码部分说明
React.render(<App url="/Home/GetMessage" />, document.getElementById('reactContent'));
在 React.render 中，我们首先将 WEB API url（我们的 controller 和 method 名称）传递以获取结果。最终结果已绑定到 DOM。
在我们的自定义 Component 中，我们创建一个 Class，并通过传递 URL 来获取 JSON 结果数据，然后使用 >{this.state.data} 将最终结果渲染（显示到我们的 Div）标签。
var App = React.createClass({
getInitialState: function(){
return{data: []};
},
componentWillMount: function(){
var xhr = new XMLHttpRequest();
xhr.open('get', this.props.url, true);
xhr.onload = function() {
var webAPIData = JSON.parse(xhr.responseText);
this.setState({ data: webAPIData });
}.bind(this);
xhr.send();
},
render: function(){
return (
<h2>{this.state.data}</h2>
);
}
});
在 View 中，添加脚本文件引用，并添加 div 标签以显示我们的结果。
<html>
<head>
<title>Hello React</title>
</head>
<body>
<table width="99%" style=" border-bottom:3px solid #3273d5;">
<tr>
<td class="style1" align="center">
<h2>Shanu - Welcome to my first ReactJs with MVC and WEB API :)</h2>
</td>
</tr>
<tr>
<td></td>
</tr>
</table>
<table style='width: 99%;table-layout:fixed;'>
<tr>
<td>
<table style=" background-color:#FFFFFF;
border: dashed 3px #6D7B8D; padding: 5px;
width: 99%;table-layout:fixed;" cellpadding="2"
cellspacing="2">
<tr style="height: 30px; background-color:#336699 ;
color:#FFFFFF ;border: solid 1px #659EC7;">
<td align="center">
<h3> Here is our WEB API Json result from ReactJS</h3>
</td>
<tr style="height: 30px; background-color:#d1d6dc ;
color:#FFFFFF ;border: solid 1px #659EC7;">
<td align="center">
<div id="reactContent" style="color:red"></div>
</td>
</tr>
</table>
</td>
</tr>
</table>
<script src="http://fb.me/react-0.13.1.js"></script>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/shanuWebAPISample.jsx"></script>
</body>
</html>
当我们运行程序时，我们可以看到如下输出：
4. 使用 MVC 和 WCF REST 服务创建 ReactJS 以显示数据库中的数据
现在让我们详细介绍如何使用 Entity Framework 6 创建 WCF REST 服务，以从 SQL Server 数据库获取数据，并通过 ReactJS 将结果绑定到 MVC view。
首先，我们创建一个示例数据库和表，以便使用 ReactJS 和 WCF REST 将结果从数据库显示到 MVC 页面。
创建数据库和表
-- =============================================
-- Author : Shanu
-- Create date : 2015-07-13
-- Description : To Create Database,Table and Sample Insert Query
-- Latest
-- Modifier : Shanu
-- Modify date : 2015-07-13
-- =============================================
--Script to create DB,Table and sample Insert data
USE MASTER
GO
-- 1) Check for the Database Exists .If the database is exist then drop and create new DB
IF EXISTS (SELECT [name] FROM sys.databases WHERE [name] = 'ItemDB' )
DROP DATABASE ItemDB
GO
CREATE DATABASE ItemDB
GO
USE ItemDB
GO
-- 1) //////////// StudentMasters
IF EXISTS ( SELECT [name] FROM sys.tables WHERE [name] = 'ItemDetail' )
DROP TABLE ItemDetail
GO
CREATE TABLE [dbo].[ItemDetail](
[ItemID] INT IDENTITY PRIMARY KEY,
[ItemName] [varchar](100) NOT NULL,
[Desc] [varchar](100) NOT NULL,
[Price] [varchar](20) NOT NULL
)
-- insert sample data to itemDetails table
INSERT INTO [ItemDetail] ([ItemName],[Desc],[Price])
VALUES ('NoteBook','HP Notebook 15 Inch','24500')
INSERT INTO [ItemDetail] ([ItemName],[Desc],[Price])
VALUES ('MONITOR','SAMSNG','8500')
INSERT INTO [ItemDetail] ([ItemName],[Desc],[Price])
VALUES ('MOBILE','SAMSUNG NOTE 5','59500')
INSERT INTO [ItemDetail] ([ItemName],[Desc],[Price])
VALUES ('MOUSE','ABKO','780')
INSERT INTO [ItemDetail] ([ItemName],[Desc],[Price])
VALUES ('HDD','LG','3780')
Select * from ItemDetail
-- --------------------------------------------
创建我们的数据库和表后，现在，我们首先创建我们的 WCF REST 应用程序。
创建 WCF REST 服务
在 Visual Studio 2015 中创建我们的 MVC Web 应用程序。安装好 Visual Studio 2015 后，点击 开始 -> 程序，然后选择 Visual Studio 2015，然后点击 Visual Studio 2015。
打开 Visual Studio 2015，然后选择“文件” -> “新建” -> “项目...”，然后选择 WCF 服务应用程序，然后选择您的项目路径并为您的 WCF 服务命名，然后点击 确定。
创建 WCF 服务后，我们将在解决方案资源管理器中看到“IService.CS”和“Service1.svc”，如下所示。
在 IService.CS 中，创建我们的 DataContract 和 OperationContract 方法来获取数据。以下是添加到 DataContract 和 OperationContract 方法中的代码，用于获取数据。
public interface IService1
{
[OperationContract]
[WebInvoke(Method = "GET",
RequestFormat = WebMessageFormat.Json,
ResponseFormat = WebMessageFormat.Json,
UriTemplate = "/GetItemDetails/")]
List<ShanuDataContract.itemDetailsDataContract> GetItemDetails();
// TODO: Add your service operations here
}
public class ShanuDataContract
{
[DataContract]
public class itemDetailsDataContract
{
[DataMember]
public string ItemID { get; set; }
[DataMember]
public string ItemName { get; set; }
[DataMember]
public string Desc { get; set; }
[DataMember]
public string Price { get; set; }
}
}
使用 ADO.NET 实体数据模型添加数据库
右键单击您的 WCF 项目，选择 添加新项，然后选择 ADO.NET 实体数据模型，然后点击 添加。
选择 从数据库创建 EF 设计器，然后点击“下一步”。
点击“新建连接”。
在这里，我们可以选择我们的数据库服务器名称，并输入您的数据库服务器 SQL Server 身份验证用户名和密码。我们已经创建了名为“ItemDB”的数据库，因此我们可以选择该数据库并点击 确定。
点击 下一步 并选择需要使用的表。在我们的示例中，我们需要使用“ItemDB”和“ItemDetail”。选择这两个表，然后点击“完成”。
在这里，我们可以看到我们已经创建了我们的 ItemDataModel。
Service1.SVC
“Service.SVC.CS”实现了 IService 接口，并重写并定义了所有 Operation Contract 方法。
例如，这里我们可以看到我在 Service1 类中实现了 IService1。创建了我们实体模型的对象，并在 GetItemDetails 中使用 LINQ 查询，我从 ItemDetails 表中选择了数据，并将结果添加到了列表中。
public class Service1 : IService1
{
ItemDBEntities OME;
public Service1()
{
OME = new ItemDBEntities();
}
public List<ShanuDataContract.itemDetailsDataContract> GetItemDetails()
{
var query = (from a in OME.ItemDetails
select a).Distinct();
List<ShanuDataContract.itemDetailsDataContract> ItemDetailsList =
new List<ShanuDataContract.itemDetailsDataContract>();
query.ToList().ForEach(rec =>
{
ItemDetailsList.Add(new ShanuDataContract.itemDetailsDataContract
{
ItemID = Convert.ToString(rec.ItemID),
ItemName = rec.ItemName,
Desc = rec.Desc,
Price =rec.Price
});
});
return ItemDetailsList;
}
}
Web.Config
在 WCF 项目的“Web.Config”中，进行以下更改：
- 将
<add binding="basicHttpsBinding" scheme="https" />更改为<add binding="webHttpBinding" scheme="http" /> - 将
</behaviors>替换为
<endpointBehaviors>
<behavior>
<webHttp helpEnabled="True"/>
</behavior>
</endpointBehaviors>
运行 WCF 服务
现在我们已经创建了 WCF REST 服务，让我们运行并测试我们的服务。这里，我们可以看到结果：
现在，我们已经完成了 WCF 部分，现在是时候创建我们的 MVC ReactJS 应用程序了。
我们可以向现有项目添加一个新项目，并创建一个新的 MVC Web 应用程序，如下所示：
点击 新建 -> 项目，然后选择 Web -> ASP.NET Web 应用程序。选择您的项目位置并输入您的 Web 应用程序名称。
选择 MVC，并在 为...添加文件夹和核心引用 中，选择 Web API，然后点击 确定。
MVC 应用程序创建完成后，下一步是向我们的应用程序添加 ReactJS。
安装 ReactJS 包
如果 ReactJS 包丢失，请将该包添加到您的项目中。
右键单击您的 MVC 项目，然后点击 管理 NuGet 程序包。搜索 ReactJS -> 选择 ReactJS tools for ASP.NET MVC 4 and 5，然后点击 安装。
创建我们的 JSX 文件
右键单击 Scripts 文件夹，然后点击 添加 -> 新建项。
选择 Web -> 选择 JavaScript 文件 -> 输入带有“JSX”扩展名的脚本文件名，例如“shanuWebAPISample.jsx”，然后点击 添加。
现在我们可以看到我们的 JSX 文件已创建。这里，我们可以添加我们的 ReactJS 脚本。这是我们的 JSX 的完整代码，它会将数据结果显示到 MVC View。
var ItemDetailList = React.createClass({
render: function() {
var itemTable = this.props.data.map(function (itemarray) {
return (
<ItemArray>
<table >
<tr >
<td width="40"></td>
<td width="140" align="center">
{itemarray.ItemID}
</td>
<td width="240" align="center" >
{itemarray.ItemName}
</td>
<td width="120" align="right" >
{itemarray.Price}
</td>
<td width="420" align="center">
{itemarray.Desc}
</td>
<td></td>
</tr>
</table>
</ItemArray>
);
});
return (
<div >
{itemTable}
</div>
);
}
});
var ItemArray = React.createClass({
render: function() {
return (
<div>
{this.props.children}
</div>
);
}
});
var ItemContainer = React.createClass({
getInitialState: function(){
return{data: []};
},
componentWillMount: function(){
var xhr = new XMLHttpRequest();
xhr.open('get', this.props.url, true);
xhr.onload = function() {
var itemData = JSON.parse(xhr.responseText);
this.setState({ data: itemData });
}.bind(this);
xhr.send();
},
render: function(){
return(
<ItemDetailList data={this.state.data} />
);
}
});
React.render(<ItemContainer url="https://:39290/Service1.svc/getItemDetails/" />,
document.getElementById('reactContent'));
代码部分说明
在上面的 WEB API 示例中，我解释了如何传递 URL 并将结果绑定到 Div 标签，然后将其绑定到 DOM。在这里，我使用了相同的方法，但将 URL 传递为我的 WCF URL：“https://:39290/Service1.svc/getItemDetails/”。在这里，我获取结果并将数据以表格形式显示在 div 标签内。
当我们运行程序时，我们可以看到如下输出：
关注点
注意：在我附加的 zip 文件中，您可以找到所有四个源示例：两个用于 HTML 示例，一个用于 MVC 和 Web API，一个用于 MVC 和 WCF REST 使用 ReactJS。
希望您喜欢这篇文章。感谢阅读。
历史
- 2015 年 9 月 5 日：初始版本