zoukankan      html  css  js  c++  java
  • mvc Html.Editor 自定义模板

    在View中显示Model中的各字段,默认是使用htmlhelper的EditorFor方法,在界面上显示的文本框。而使用EditorTemplates可在View上为特定字段显示自定义的界面。比如购物网站中经常有客户的地址管理功能,客户在下订单时可从中选择。本Demo就简单演示该功能在ASP.NET MVC3中如何实现,重点是练习EditorTemplates的使用。可在Views的share文件夹,或是控件器对应View中的文件夹里建立""文件夹,新建一局部视图的View,以要自己定义显示编辑界面的类保持同名,MVC框架会自动搜索到,记得这的“约定”很关键, ASP.NET MVC倡导的是约定胜于配置。
       练习环境:Visual Studio 2010 sp1 , ASP.NET MVC 3
       1. 建立ASP.NET MVC3项目。
       使用向导来建立一个空的ASP.NET MVC3项目,视图引擎使用Razor。
       2. 建立Model
       Model共有两个类:User和Address。User的Addresses属性是Address实例的集合,这即代表用户与地址的关系是一对多的关系。
       2.1建立Address类
       代码如下:
        namespace MvcEditorTemplateDemo.Models
    {
        public class Address
        {
            //发货地址
            public string Street { get; set; }
            //邮政编码
            public string PostalCode { get; set; }
            //城市
            public string City { get; set; }
        }
    }
        2.2 建立User类
        代码如下:
    namespace MvcEditorTemplateDemo.Models
    {
        public class User
        {
            public string Name { get; set; }
            public List<Address> Addresses { get; set; }
        }
    }
         2.3为了方便测试,给User类的构造函数生成一些数据,这些数据在实际应用中可从数据库中读取。
    public User()
            {
                Name = "张三";
                var a1 = new Address { City = "南宁", PostalCode = "530600", Street = "广西南宁市兴宁区望州南路78号" };
                var a2 = new Address { City = "南宁", PostalCode = "530600", Street = "广西南宁市青秀区金浦路458号" };
                var a3 = new Address { City = "南宁", PostalCode = "530600", Street = "广西南宁市西乡塘区五里亭38号" };
                Addresses = new List<Address> { a1, a2, a3 };
            }
        3.建立控制器
        代码:
    namespace MvcEditorTemplateDemo.Controllers
    {
        public class UserWithAddressController : Controller
        {
            //
            // GET: /UserWithAddress/

            public ActionResult Index()
            {
                return View(new User());
            }

        }
    }
        4. 建立视图
        给UserWithAddress控制器的Index方法添加视图:
    @model MvcEditorTemplateDemo.Models.User
    @{
        ViewBag.Title = "Index";
    }

    <h2>Index</h2>
    <p>
    @Html.Label("用户名")
    @Html.EditorFor(model => model.Name)
    </p>

    <h2>送货地址</h2>
    @Html.EditorFor(model=>model.Addresses)
         5.测试
         User的Addresses属性默认的编辑模板只是把Address的Street属性给编历了出来。如图:
         ASP.NET <wbr>MVC3 <wbr>自定义编辑模版


         6.创建自定义模板
         6.1建立模版文件夹
            在View的share文件夹下新建“EditorTemplates”文件夹,一定要命名为“EditorTemplates”。
         6.2建立自定义的视图
            在view/share/EditorTemplates文件夹下新建视图:Address(与类名要保持一致)。Model类为Address,勾选Create as a partial view。
         代码:
    @model MvcEditorTemplateDemo.Models.Address

    <div style="float:left;margin-right:20px;background-color: #b2c5e6;padding:5px;">
        <h3>
            送货地址</h3>
        <p>
            @Html.Label("城市")
            @Html.TextBoxFor(x => x.City)
        </p>
        <p>
            @Html.Label("地址")
            @Html.TextBoxFor(x => x.Street)
        </p>
        <p>
            @Html.Label("邮政编码")
            @Html.TextBoxFor(x => x.PostalCode)
        </p>   
    </div>
         7.测试
         MVC框架会自
         ASP.NET <wbr>MVC3 <wbr>自定义编辑模版


    对于使用下拉列表的字段,需要在

  • 相关阅读:
    echarts pie 图表 显示的label 中内容 字体大小自定义
    echarts pie 图表当名称太长时
    一个大屏监控的项目
    Web前端优化最佳实践及工具集锦
    分享网页到微信朋友圈的官方接口
    Explaining Delegates in C#
    Explaining Delegates in C#
    Explaining Delegates in C#
    Explaining Delegates in C#
    Explaining Delegates in C#
  • 原文地址:https://www.cnblogs.com/xiamou/p/3122759.html
Copyright © 2011-2022 走看看