asp.net mvc 项目后台向页面传值

2019-06-20 本文已影响2人 Angeladaddy

一直想整理一下这个内容，今天终于有空（kun nan）了。

传值方式

强类型传值：ViewModel
弱类型传值：ViewData和ViewBag

强类型参数传值-ViewModel

后端和页面使用同一个模型进行强类型传值，可以很好的避免拼写错误，IDE也能更好的进行动态感知：

// controller
        public IActionResult Index()
        {
            var User = new User
            {
                Username="kingofyongchun",
                RealName="叶问",
            };
            ViewData["title"] = "传值测试";
            return View(User);
        }

@{
    Layout = null;
}
@model TestProject.ViewModels.User
<!DOCTYPE html>
<html>
<head>
    <title>@ViewData["title"]</title>
</head>
<body>
    <h1>viewmodel</h1>
    <p>username: @Model.Username</p>
    <p>realname: @Model.RealName</p>
</body>
</html>

User类可以是任何类，不过官方建议将其和数据库实体类分开；推荐的做法是在你的mvc工程中新建ViewModel命名空间；将视图模型全部写在下面。
User类最好是POCO类(Plain Old CLR Object), 只含属性，不含方法
值以参数的方式传递给View方法
View中首先用@model定义类型
使用@Model.xxx拿到实际值。

弱类型数值传递

弱类型数据的适用情形举例：

image.png

ViewData 属性是弱类型对象的字典。
ViewBag 属性是 ViewData 的包装器，为基础 ViewData 集合提供动态属性。
对于 ViewData 和 ViewBag，键查找都不区分大小写。
一些程序员压根不使用弱类型传递，他们认为这非常容易出错，见仁见智吧。

ViewData

ViewData本质是字典，其Key为自定义的string，如上面例子的title
传递字符串时，客户端取出时不需要转换，否则都需要类型转换。

public IActionResult SomeAction()
{
    ViewData["Greeting"] = "Hello";
    ViewData["Address"]  = new Address()
    {
        Name = "Steve",
        Street = "123 Main St",
        City = "Hudson",
        State = "OH",
        PostalCode = "44236"
    };

    return View();
}

@{
    // 非字符参数需要casting转换
    var address = ViewData["Address"] as Address;
}
   // string类型无需转换
@ViewData["Greeting"] World!

<address>
    @address.Name<br>
    @address.Street<br>
    @address.City, @address.State @address.PostalCode
</address>

控制器中也可以使用[ViewData]特性声明

    public class TestController: Controller
    {
        [ViewData]
        public string Message { get; set; }= "what a  killing hot day!";
        
        // GET: /<controller>/
        public IActionResult Index()
        {
            var User = new User
            {
                Username="kingofyongchun",
                RealName="叶问",
            };

            ViewData["title"] = "传值测试";
            ViewBag.Guest = "泰森";
            return View(User);
        }
    }

@{
    Layout = null;
}
@model BioVR.Entities.Models.User
<!DOCTYPE html>
<html>
<head>
    <title>@ViewData["title"]</title>
</head>
<body>
    <h1>ViewModel</h1>
    <p>username: @Model.Username</p>
    <p>realname: @Model.RealName</p>
    <h1>ViewData</h1>
    <p>@ViewData["Message"]</p>
    <h1>ViewBag</h1>
    <p>welcome @ViewBag.Guest !</p>
</body>
</html>

ViewBag

ViewBag是“动态强类型”，无需转换

 ViewBag.User = new User
{
   RealName="泰森"
}; 
return View();

<h1>ViewBag</h1>
<p>welcome @ViewBag.User.RealName !</p>

ViewBag和ViewData在底层共用数据，因此两者可以混合使用

@{
    Layout = "/Views/Shared/_Layout.cshtml";
    ViewBag.Title = "About Contoso";
    ViewData["Description"] = "Let us tell you about Contoso's philosophy and mission.";
}
<!DOCTYPE html>
<html lang="en">
<head>
    <title>@ViewData["Title"]</title>
    <meta name="description" content="@ViewBag.Description">
    ...

ViewData 和 ViewBag 之间差异的摘要

image.png

传值至javascript

这种需求也是非常常见的，有两种方法

使用隐藏标签：

<input id="errorInfo" type="hidden" value="@ViewBag.ErrorInfo" />
<script>
    if ($("#errorInfo").val()) {
        showNofity($("#errorInfo").val(), "danger");
    }; 
</script>

隐藏标签也可以使用TagHelper轻松定义：

@Html.HiddenFor(x=>x.MyProperty)

直接获取（最方便）

    <script>
        var username = '@Model.Username';
        //注意：viewbag或者viewdata直接这样拿会出现乱码
        @*var guestname = '@ViewBag.User.RealName'*@
       var guestname =  '@Html.Raw(@ViewBag.User.RealName)';
        alert(username + "/"+guestname);
    </script>

注意，上面如果直接从js获取ViewData或者ViewBag数据将出现乱码，而要经过@Html.Raw转换才可以。

ajax获取
这个就不推荐了，spa用这个方法获取，mvc就没这个必要了