asp.net core 学习笔记——视图的数据传递

最新推荐文章于 2023-05-11 11:57:20 发布

风絮_

最新推荐文章于 2023-05-11 11:57:20 发布

阅读量2.5k

点赞数 2

分类专栏： .net 文章标签： asp.net core 视图 htmlHelper

本文链接：https://blog.csdn.net/li3455277925/article/details/95730294

版权

.net 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

视图

数据传递

ViewData：键值对、使用索引器来访问数据、支持任意类型
ViewBag：动态类型、是ViewData的封装、使用动态属性来访问数据
如果ViewData和ViewBag里面存放相同名称的数据会覆盖

using Microsoft.AspNetCore.Mvc;

namespace WebApplication1.Controllers
{
    public class TestController : Controller
    {
        // 右键方法名,"添加视图"即可快速添加视图
        public  IActionResult Index()
        {
            ViewData["IntTestData"] = 100;
            ViewData["StringTestData"] = "this is a string";

            ViewBag.IntTest2Data = 200;
            ViewBag.StringTest2Data = "this is other string";
            return View();
        }
    }
}

页面渲染

Razon语法：
- @表示c#代码块或语句
- @*注释*@
- c#代码可与html代码混合

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body> 
    @* 这是一行注释 *@
    @{ 
        int i = 0;
    }

    @* 获取ViewData里面的数据 *@
    @ViewData["StringTestData"]
    @* 获取ViewBag里面的数据 *@
    @ViewBag.StringTest2Data
</body>
</html>

复杂数据类型的传递

控制器：

using System.Collections.Generic;
using Microsoft.AspNetCore.Mvc;

namespace WebApplication1.Controllers
{
    public class TestController : Controller
    {
        public  IActionResult Index()
        {
            List<string> lsData = new List<string>();
            lsData.Add("the first line");
            lsData.Add("the second line");
            lsData.Add("the third line");
            ViewBag.ListData = lsData;
            return View();
        }
    }
}

视图：

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body> 
    <ul>
        @foreach (var item in ViewBag.ListData)
        {
            <li>@item</li>
        }
    </ul>
</body>
</html>

Form表单提交

传统html方式

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body> 
    <form action="/test/checkuser" method="post">
        username: <input type="text" name="username" /><br />
        password: <input type="password" name="password" /><br />
                  <input type="submit" value="登录" />
    </form>
</body>
</html>

HtmlHelper

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body> 
    <form action="/test/checkuser" method="post">
        username: @Html.TextBox("username")<br />
        password: @Html.Password("password")<br />
                  <input type="submit" value="登录" />
    </form>
</body>
</html>

控制器：

using Microsoft.AspNetCore.Mvc;

namespace WebApplication1.Controllers
{
    [Controller]
    public class Test : Controller
    {
        public  IActionResult Index()
        {
            return View();
        }
        [HttpPost]
        public IActionResult CheckUser(string username, string password)
        {
            return Content($"username:{username} password:{password}");
        }
    }
}

Form表单数据呈现

在Controller中放置数据

using Microsoft.AspNetCore.Mvc;

namespace WebApplication1.Controllers
{
    [Controller]
    public class Test : Controller
    {
        public  IActionResult Index()
        {
            ViewBag.Username = "xiaoming";
            return View();
        }
    }
}

在视图界面进行数据绑定

html方式

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body> 
    <input type="text" name="username" value="@ViewBag.Username" />
</body>
</html>

HtmlHelper方式

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body> 
    @Html.TextBox("username", (string)ViewBag.Username, null, new { attr1 = "value1" })
</body>
</html>

查看网页源代码(发现增加了attr1属性)：

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body> 
    <input attr1="value1" id="username" name="username" type="text" value="xiaoming" />
</body>
</html>

风絮_

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
asp.net core 学习笔记——视图的数据传递

视图数据传递ViewData：键值对、使用索引器来访问数据、支持任意类型ViewBag：动态类型、是ViewData的封装、使用动态属性来访问数据如果ViewData和ViewBag里面存放相同名称的数据会覆盖using Microsoft.AspNetCore.Mvc;namespace WebApplication1.Controllers{ public clas...
复制链接

扫一扫