在ASP.NET MVC中的几个模型属性的UI元素

Question

我一直在做一些搜索，发现这ASP.NET MVC 3 - Partial vs Display Template vs Editor Template，但我仍然不清楚，因为什么和应该如何使用几个模型属性的“自定义UI控件”。

我心里有两个例子：

FistName MiddleInitial姓氏 或电话分机

我想有某种可重复使用的UI控件/模板，我可以用的。

说，我有一个局部视图，我在创建和编辑视图中使用，称为_ClientForm。在这个视图中，我的模型中有Contact1和Contact2以及相关的属性。现在，我想为它们创建一个共同的外观并且并排显示。另外，它们都具有Phone/Ext属性，并且我希望某种视觉控件能够在我的模型中每次有这两个属性时重新使用它。

我不清楚我应该使用什么，我应该如何去执行。

只是为了明确我的意思。

现在我有下面的代码

@using WebDemo.Helper 
@model CardNumbers.Objects.Client 
<fieldset> 
    <legend>Client Info</legend> 

    @Html.ValidationSummary(true) 

    <input type="hidden" id="fntype" name="fntype"> 
    @Html.HiddenFor(model => model.Id) 
    @Html.EditorFor(model => model.Number, EditorTemplate.TextBox) 

    @Html.EditorFor(model => model.Name, EditorTemplate.TextBox) 

    @Html.EditorFor(model => model.Address, EditorTemplate.EditBox) 

    <div id="ContactsInfo"> 
     @*Contact 1*@ 
     <div id="Contact1"> 

      @Html.EditorFor(model => model.Contact1, EditorTemplate.TextBox) 
      @Html.EditorFor(model => model.Email1, EditorTemplate.TextBox) 
      @Html.EditorFor(model => model.Phone1, EditorTemplate.TextBox) 
      @Html.EditorFor(model => model.Ext1, EditorTemplate.TextBox) 

     </div> 

     @*Contact2*@ 
     <div id="Contact2"> 

      @Html.EditorFor(model => model.Contact2, EditorTemplate.TextBox) 

      @Html.EditorFor(model => model.Email2, EditorTemplate.TextBox) 
      @Html.EditorFor(model => model.Phone2, EditorTemplate.TextBox) 
      @Html.EditorFor(model => model.Ext2, EditorTemplate.TextBox) 
     </div> 
    </div> 
    @*<div class="clear"></div>*@ 
    <div id="SaveCancel" class="float-right"> 
     <button type="Submit" id="btnSave">Save</button> 
     <button type="reset" id="btnCancel">Cancel</button> 
    </div> 
</fieldset> 

视图代码已经有点用在这里 http://dotnetspeak.com/index.php/2012/10/asp-net-mvc-template-and-knockout-js

这样描述的技术简化，因为你看到的局部视图我有2周的div与联系信息和每个div内我也有电话/分机与我想放在彼此接近。

所以，我想我需要一些可重用的两个：联系信息和电话/分机。

我还显示我的客户端类进行了一些进一步的说明： using System;

using System.ComponentModel.DataAnnotations; 
using System.ComponentModel; 

using DataAnnotationsExtensions; 
using System.ComponentModel.DataAnnotations.Schema; 
using System.Collections.Generic; 

namespace CardNumbers.Objects 
{ 
    public class Client 
    { 
     //public Client() 
     //{ 
     // this.ClientOrders = new List<ClientOrder>(); 

     // this.Reorders = new List<Reorder>(); 
     //} 

     [Key] 
     [Column("ClientId",TypeName = "int")] 
     public virtual int Id { get; set; } 
     [Required] 
     [DisplayName("Client No")] 
     [Column("client_no", TypeName = "smallint")] 
     public virtual Int16 Number { get; set; } 

     [Required] 
     [Column("client_name", TypeName = "varchar")] 
     [DisplayName("Client Name")] 
     [MaxLength(30, ErrorMessage = "Client Name should not be longer than 30 characters")] 
     [MinLength(3, ErrorMessage = "Client Name is too short")] 
     public virtual string Name { get; set; } 

     [StringLength(100)] 
     [DisplayName("First Contact")] 
     [DisplayFormat(NullDisplayText = "")] 
     [Column("Contact1",TypeName = "varchar")] 
     public virtual string Contact1 { get; set; } 

     [Email] 
     [StringLength(100)] 
     [Column("c1_email", TypeName = "varchar")] 
     public virtual string Email1 { get; set; } 

     [DataType(DataType.PhoneNumber)] 
     [Column("C1_Phone", TypeName = "varchar")] 
     [StringLength(10)] 
     [DisplayName("Phone")] 
     public virtual string Phone1 { get; set; } 

     [StringLength(5)] 
     [Column("C1_Ext", TypeName = "varchar")] 
     [DisplayName("Ext")] 
     public virtual string Ext1 { get; set; } 

     [StringLength(100)] 
     [DisplayName("Second Contact")] 
     [Column("Contact2", TypeName = "varchar")] 
     public virtual string Contact2 { get; set; } 

     [Email] 
     [StringLength(100)] 
     [Column("C2_Email", TypeName = "varchar")] 
     public virtual string Email2 { get; set; } 

     [DataType(DataType.PhoneNumber)] 
     [StringLength(10)] 
     [DisplayName("Phone")] 
     [Column("C2_Phone", TypeName = "varchar")] 
     public virtual string Phone2 { get; set; } 

     [StringLength(5)] 
     [DisplayName("Ext")] 
     [Column("C2_Ext",TypeName = "varchar")] 
     public virtual string Ext2 { get; set; } 

     [DataType(DataType.MultilineText)] 
     public virtual string Address { get; set; } 

     [ForeignKey("EnteredByOperator")] 
     public string EnteredBy { get; set; } 

     [InverseProperty("ClientsEnteredBy")] 
     public virtual Operator EnteredByOperator { get; set; } 

     [ForeignKey("ModifiedByOperator")] 
     public string ModifiedBy { get; set; } 

     [InverseProperty("ClientsUpdatedBy")] 
     public virtual Operator ModifiedByOperator { get; set; } 

     [DataType(DataType.DateTime)] 
     [DisplayName("Created on")] 
     public DateTime EnteredOn { get; set; } 

     [DataType(DataType.DateTime)] 
     [DisplayName("Modified on")] 
     public DateTime? ModifiedOn { get; set; } 

     public virtual ICollection<ClientOrder> ClientOrders { get; set; } 

     public virtual ICollection<Reorder> Reorders { get; set; } 
    } 
}` 

`

非常感谢提前。

Answer 1

我会添加2 EditorFor模板。

• 一个是编辑个人联系信息
• 一个，或者为一个接触信息的列表或者是包含两个接触的相关信息专门的视图模型。该模板将依次在所有包含的联系信息视图模型上调用编辑器，该视图模型将呈现第一个模板。

的ViewModels

public class ContactDetails 
{ 
    public string Name {get;set;] 
    public string Email {get; set;} 
} 
public class ContactsInfo 
{ 
    public ContactDetails Contact1 {get; set; } 
    public ContactDetails Contact2 {get; set; } 
} 
public class Client { 
    public ContactsInfo ContactsInfo {get; set;} 
} 

主视图

@model client 
...other html.... 
@Html.EditorFor(m => m.ContactsInfo) 
...other html.... 

编辑模板ContactsInfo。CSHTML

@model ContactsInfo 
<div id="ContactsInfo"> 
    <div id="Contact1"> 
     @Html.EditorFor(m => m.Contact1) 
    </div> 
    <div id="Contact2"> 
     @Html.EditorFor(m => m.Contact2) 
    </div> 
</div> 

编辑模板ContactDetails.cshtml

@model ContactDetails 
    @Html.EditorFor(model => model.Contact1, EditorTemplate.TextBox) 
    @Html.EditorFor(model => model.Email1, EditorTemplate.TextBox) 
    @Html.EditorFor(model => model.Phone1, EditorTemplate.TextBox) 
    @Html.EditorFor(model => model.Ext1, EditorTemplate.TextBox)