总结ASP.NET MVC Web Application中将数据显示到View中的几种方式

时间:2024-01-01 09:40:57

当我们用ASP.NET MVC开发Web应用程序的时候,我们都是将需要呈现的数据通过"Controllers"传输到"View"当中,怎么去实现,下面我介绍一下我在实际工作当中用到过的几种方式。

创建一个ASP.NET MVC Web Application

在Visual Studio中创建ASP.NET Web Application应用程序,在向导的下一个窗口中选择空的模板。

总结ASP.NET MVC Web Application中将数据显示到View中的几种方式

创建Model

接着我们在Models文件夹下创建一个Product类,用来传递数据。

     public class Product
{
public int ProductID { get; set; }
public string ProductName { get; set; }
public decimal Price { get; set; }
public int Count { get; set; }
public string Description { get; set; }
}

创建Controller

接着在Controllers文件下创建一个Controller, 命名为"ProductController"。
总结ASP.NET MVC Web Application中将数据显示到View中的几种方式

创建View

然后我们在Views -> Product目录下创建一个View,命名为Index

总结ASP.NET MVC Web Application中将数据显示到View中的几种方式

到此,我们创建好了ModelViewController,在开始运行之前,我们需要更改一下默认路由配置。打开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 = "Product", action = "Index", id = UrlParameter.Optional }
);
}
}

好了,下面我们就正式开始实现数据从"Controller"到"View"的实现。

1. 使用ViewData。

ViewData是一个字典,它存放的是键值对。

打开新建好的ProductController.cs,使用using引入Product类所在的命名空间,在IndexAction里创建一个Product对象并且赋值给一个ViewData

using TransDataToView.Models;
         public ActionResult Index()
{
Product product = new Product
{
ProductID = ,
ProductName = "BMW X5",
Price = ,
Count = ,
Description = "BMW SUV"
}; ViewData["Product"] = product; return View();
}

接着,我们打开新建好的Index View文件,对Controller里的ViewData数据进行接收处理。

 @using TransDataToView.Models
@{
Layout = null;
} <!DOCTYPE html> <html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<div>
@{
var product = (Product)ViewData["Product"];
}
<h2>
Product ID: @product.ProductID <br />
Product Name: @product.ProductName <br />
Price: @product.Price <br />
Count: @product.Count <br />
Description: @product.Description
</h2>
</div>
</body>
</html>

总结ASP.NET MVC Web Application中将数据显示到View中的几种方式

因为我们需要将ViewData数据转换成需要的Product对象数据,所以这里要引入Produdct类所在的命名空间,使用@符号,也就是Razor语法来引入,定义,赋值等操作。

2. 使用ViewBag。

ViewBag它跟ViewData一样,都是字典值,但它存放的不是键值对,而是dynamic动态类型,这是ASP.NET MVC3新增的部分。

同样我们在Index Action里将Proudct对象赋值给一个ViewBag

        public ActionResult Index()
{
Product product = new Product
{
ProductID = ,
ProductName = "BMW X5",
Price = ,
Count = ,
Description = "BMW SUV"
}; ViewBag.Product = product; return View();
}

同样,我们打开Index View文件,对Controller里的ViewBag数据进行接收处理。

 @{
Layout = null;
} <!DOCTYPE html> <html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<div>
<h3>
Product ID: @ViewBag.Product.ProductID <br />
Product Name: @ViewBag.Product.ProductName <br />
Price: @ViewBag.Product.Price <br />
Count: @ViewBag.Product.Count <br />
Description: @ViewBag.Product.Description
</h3>
</div>
</body>
</html>

可以看到ViewBag不需要转型直接就可以使用里面的数据了。

3. 使用TempData。

TempData也是字典,它的使用完全等同于ViewData,两者之间最大的差异是TempData对数据的保存是临时性的。也就是它请求后,数据就被清除,也就是只能通过一次Controller传递。通常用于Action之间的一次性传递,所以它一般不直接用于传递到View中。

我们增加一个名为"TempDataIndex"的Action

Controller:

         public ActionResult Index()
{
ViewData["Message"] = "This is a View Data Message."; if (TempData["Message"] != null)
ViewData["Message"] = TempData["Message"]; return View();
} public ActionResult TempDataIndex()
{
TempData["Message"] = "This is a Temp Data Message."; return RedirectToAction("Index");
}

View:

     <div>
<h3>
@ViewData["Message"]
</h3>
</div>

我们运行程序。结果如下:
总结ASP.NET MVC Web Application中将数据显示到View中的几种方式

此时TempData数据为null,我们导航到/Product/TempDataIndex下,结果如下:

总结ASP.NET MVC Web Application中将数据显示到View中的几种方式

我们看到通过TempDataIndex的Action里,TempData["Message"]有了数据,然后转向了Index的Action方法里,所以TempData的值赋给了ViewData。这是我们刷新一下页面,结果如下:

总结ASP.NET MVC Web Application中将数据显示到View中的几种方式

4. 使用View(object)。

通过直接传递object数据到View中。

         public ActionResult Index()
{
Product product = new Product
{
ProductID = ,
ProductName = "BMW X5",
Price = ,
Count = ,
Description = "BMW SUV"
}; return View(product);
}

那么在View文件中需要绑定Controller里传递的对象。

 @using TransDataToView.Models
@model TransDataToView.Models.Product
@{
Layout = null;
} <!DOCTYPE html> <html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<div>
<h2>
Product ID: @Model.ProductID <br />
Product Name: @Model.ProductName <br />
Price: @Model.Price <br />
Count: @Model.Count <br />
Description: @Model.Description
</h2>
</div>
</body>
</html>

@model TransDataToView.Models.Product 意思就是绑定的是Product对象的Model,然后使用@Model.字段属性名来取值。

好了,本篇就先到此,希望对你有所帮助,谢谢!