zoukankan      html  css  js  c++  java
  • MVC4视图

    编写一个视图显示列表信息实例。

    1、添加数据,通过ViewBag属性在视图中遍历数据。
    控制器中代码如下

    public ActionResult List() {
    var albums = new List<Album>();
    for(int i = 0; i < 10; i++) {
    albums.Add(new Album {Title = "Product " + i});
    }
    ViewBag.Albums = albums;
    return View();
    }

    视图部分代码

    <ul>
    @foreach (Album a in (ViewBag.Albums as IEnumerable<Album>)) {
    <li>@a.Title</li>
    }
    </ul>

    也可以通过动态数据的方式,但会失去智能感知

    <ul>
    @foreach (dynamic p in ViewBag.Albums) {
    <li>@p.Title</li>
    }
    </ul>

    在控制器中以模型的方式返回到视图中

    public ActionResult List() {
    var albums = new List<Album>();
    for (int i = 0; i < 10; i++) {
    
    albums.Add(new Album {Title = "Album " + i});
    }
    return View(albums);
    }

    引入模型数据类型方式。

    @model IEnumerable<MvcApplication1.Models.Album>
    <ul>
    @foreach (Album p in Model) {
    <li>@p.Title</li>
    }
    </ul>

    用using引入模型,定义数据模型类型,与上一中方式结果相同。

    @using MvcApplication1.Models
    @model IEnumerable<Album>
    <ul>
    @foreach (Album p in Model) {
    <li>@p.Title</li>
    }
    </ul>

    视图中写C#代码

    @{
    // this is a block of code. For demonstration purposes,
    // we'll create a "model" inline.
    var items = new string[] {"one", "two", "three"};
    }
    <html>
    <head><title>Sample View</title></head>
    <body>
    <h1>Listing @items.Length items.</h1>
    <ul>
    @foreach(var item in items) {
    <li>The item name is @item.</li>
    }
    
    </ul>
    </body>
    </html>

    @使用

    <li>Item_@item.Length</li>
    
    <li>Item_@(item.Length)</li>
    
    <p>
    You should follow
    @@haacked, @@jongalloway, @@bradwilson, @@odetocode
    </p>

    HTML Encoding防止脚本注入,html编码

    @{
    string message = "<script>alert('haacked!');</script>";
    }
    <span>@message</span>

     编码后的html代码

    <span>&lt;script&gt;alert(&#39;haacked!&#39;);&lt;/script&gt;</span>

    通过RAW进行解码

    @{
    string message = "<strong>This is bold!</strong>";
    }
    <span>@Html.Raw(message)</span>

    解码后的HTML

    <span><strong>This is bold!</strong></span>

    HTML编码自动减轻XSS漏洞,通过编码用户输入要显示为HTML,但它在JavaScript不能解析。

    <script type="text/javascript">
    $(function () {
    var message = 'Hello @ViewBag.Username';
    $("#message").html(message).show('slow');
    });
    </script>

    可以通过@Ajax.JavaScriptStringEncode(ViewBag.Username)

    <script type="text/javascript">
    $(function () {
    var message = 'Hello @Ajax.JavaScriptStringEncode(ViewBag.Username)';
    $("#message").html(message).show('slow');
    });
    </script>

    Code Blocks代码块

    @foreach(var item in stuff) {
    <li>The item name is @item.</li>
    }
    @foreach(var item in stuff) {<li>The item name is @item.</li>}
    <% foreach(var item in stuff) { %>
    <li>The item name is <%: item %>.</li>
    <% } %>
    @{
    string s = "One line of code.";
    ViewBag.Title "Another line of code";
    }
    @{Html.RenderPartial("SomePartial");}

    视图语法例子

    隐式代码表达式

    Razor <span>@model.Message</span>
    Web Forms <span><%: model.Message %></span>
    显示代码表达式

    RAZOR <span>ISBN@(isbn)</span>
    Web Forms <span>ISBN<%: isbn %></span>

    Razor <span>@Html.Raw(model.Message)</span>
    Web Forms <span><%: Html.Raw(model.Message) %></span>
    or
    <span><%= model.Message %></span>

    代码块

    Razor @{
    int x = 123;
    string y = ˝because.˝;
    }
    Web Forms <%
    int x = 123;
    string y = "because.";
    %>

    结合文本标记

    Razor @foreach (var item in items) {
    <span>Item @item.Name.</span>
    }
    Web Forms <% foreach (var item in items) { %>
    <span>Item <%: item.Name %>.</span>
    <% } %>

    混合代码和纯文本

    Razor @if (showMessage) {
    <text>This is plain text</text>
    }
    or
    @if (showMessage) {
    @:This is plain text.
    }
    Web Forms <% if (showMessage) { %>
    This is plain text.
    <% } %>

    转义代码分隔符

    Razor My Twitter Handle is &#64;haacked
    or
    My Twitter Handle is @@haacked
    Web Forms &lt;% expression %&gt; marks a code
    nugget.

    注释代码

    Razor @*
    This is a multiline server side comment.
    @if (showMessage) {
    <h1>@ViewBag.Message</h1>
    }
    All of this is commented out.
    *@
    Web Forms <%--
    This is a multiline server side comment.
    <% if (showMessage) { %>
    <h1><%: ViewBag.Message %></h1>
    <% } %>
    All of this is commented out.
    --%>

    调用泛型方法

    Razor @(Html.SomeMethod<AType>())
    Web Forms <%: Html.SomeMethod<AType>() %>

  • 相关阅读:
    Callback2.0
    设计模式之Composite
    设计模式之Proxy
    React Native DEMO for Android
    React Native 与 夜神模拟器的绑定
    Skipping 'Android SDK Tools, revision 24.0.2'; it depends on 'Android SDK Platform-tools, revision 20' which was not installed.
    .ui/qrc文件自动生成.py文件
    简单排序算法
    Big O
    设计模式之Adapter
  • 原文地址:https://www.cnblogs.com/lujianwei/p/2954407.html
Copyright © 2011-2022 走看看