• 同步 异步 加载分部视图


    主页面:
    @{
        Layout = null;
    }
     
    <! DOCTYPE html>
     
    < html>
    < head>
        <title >Index </ title>
        <script src ="@ Url.Content("~/Scripts/jquery-1.7.1.js" )"></ script >
        <script type ="text/javascript">
            @* 异步加载分部视图 *@
            $( function() {
                $( '#btn').click( function() {
                    $.ajax({                   
                        url: "/Home/GetDataDemo" ,
                        success: function(data) {
                            $( '#tBody').html(data);
                        }
                    });
                });
            })
        </script >
    </ head>
    < body>
        <div >
            < h1>< font color ="red">主页面 </ font></ h1 >
            < table border="1">
                < thead>
                    < th> 姓名 </th >
                    < th> 年龄 </th >
                    < th> 地址 </th >
                </ thead>
                < tbody id="tBody">
                    @*1.通过Action请求 *@
                    @* @{ Html.RenderAction("GetDataDemo", "Home");}  *@
                    @*    @Html.Action("GetDataDemo","Home") *@
                    @*2.通过  请求Index页面的时候就需要在Index方法传递ViewData["data"]过来 *@
                    @* @{ Html.RenderPartial("TableBody", ViewData["data"]);} *@
                    @*@Html.Partial("TableBody",ViewData["data"]) *@
                   
                    @*注意问题:1.RenderAction和RenderPartial需要大括号包括起来,而且注意不能少分号
                                2.注意传递数据给分部视图的时候不能为"动态"即ViewBag.Data
                                3.分部视图如果没有使用强类型,可以使用动态,但是ViewBag.data中的"data"必须和
                                  ViewData["data"]中的["data"]一致,否则报错,当然大小写没有关系
                    *@
                </ tbody>
            </ table>
            @* 点击按钮异步加载分部视图 *@
            < input id="btn" type ="button" name ="name" value ="动态加载分部视图" />
        </div >
    </ body>
    </ html>
    -------------------------------------------------------------------------------------------------------------
    分部视图
    @model IList<MvcApplication1.Controllers. Person>
              
    @{
        foreach ( var person in Model)
        {
            < tr>
                < td> @person.Name </ td>
                < td> @person.Age </ td>
                < td> @person.Address </ td>
            </ tr>
        }
    }
     
    @* 也可以使用动态*@
    @* @{
        foreach (var person in ViewBag.data)
        {
            <tr>
                <td>@person.Name</td>
                <td>@person.Age</td>
                <td>@person.Address</td>
            </tr>
        }
    } *@
     
    --------------------------------------------------------------------------
    后台代码:
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.Mvc;
     
    namespace MvcApplication1.Controllers
    {
        public class HomeController : Controller
        {
            //
            // GET: /Home/
     
            public ActionResult Index()
            {
                ViewData[ "data" ] = GetData();
                //ViewBag.Data = GetData();
                return View();
            }
     
            public ActionResult GetDataDemo()
            {
                return PartialView( "TableBody" , GetData());
            }
     
            private IList< Person> GetData()
            {
                IList< Person> persons = new List< Person>()
                {
                    new Person() {Name = "张三" , Address = "北京" , Age = 15},
                    new Person() {Name = "李四" , Address = "上海" , Age = 16},
                    new Person() {Name = "黄六" , Address = "深圳" , Age = 17},
                    new Person() {Name = "小小" , Address = "广州" , Age = 18}
                };
                return persons;
            }
     
        }
        public class Person
        {
            public string Name { set; get; }
            public int Age { set; get; }
            public string Address { set; get; }
        }
    }
  • 相关阅读:
    前端构建工具gulp入门教程
    写网站经常需要用到的代码汇总
    前端需要掌握的知识
    百度搜索功能
    Photoshop教程
    1.电脑系统重装
    ansible安装二进制kubernetes-1.14.1
    Ansible-基础
    kubernetes之监控Operator部署Prometheus(三)
    kubernetes之监控Prometheus实战--邮件告警--微信告警(二)
  • 原文地址:https://www.cnblogs.com/ddddai/p/3385193.html
Copyright © 2020-2023  润新知