asp.net-mvc - ASP.NETMVCのいくつかのモデルプロパティのUI要素

Question

私はいくつかの検索を行っており、このASP.NET MVC 3-パーシャルvsディスプレイテンプレートvsエディターテンプレートを見つけましたが、いくつかのモデルプロパティの「カスタムUIコントロール」に何をどのように使用すべきかまだ明確ではありません。

私は2つの例を念頭に置いています：

FistNameMiddleInitialLastNameまたはPhoneExt

使用できる、ある種の再利用可能なUIコントロール/テンプレートが必要です。

たとえば、作成ビューと編集ビューの両方で使用する_ClientFormと呼ばれる部分的なビューがあります。このビューでは、モデルにContact1とContact2および関連するプロパティがあります。ここで、両方に共通の外観を作成し、並べて表示したいと思います。また、どちらにもPhone / Extプロパティがあり、モデルにこれら2つのプロパティがあるたびに、何らかのビジュアルコントロールで再利用できるようにしたいと思います。

何を使用すべきか、実装をどのように進めるべきかが明確ではありません。

私が言っていることを明確にするためだけに。

今、私は次のコードで部分的なビューを持っています

@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内には、互いに近くに配置したい電話/内線もあります。

だから、私は連絡先情報と電話/内線の両方に再利用可能なものが必要だと思っています。

さらに明確にするために、Clientクラスも示します。

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; }
    }
}`

`

よろしくお願いします。

score 1 · Accepted Answer

2つのEditorForテンプレートを追加します。

個々の連絡先情報を編集するもの
1つは連絡先情報のリスト用、または2つの連絡先情報を含む特別なビューモデル用です。このテンプレートは、最初のテンプレートをレンダリングする、含まれているすべての連絡先情報ビューモデルのエディターを呼び出します。

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)

asp.net-mvc - ASP.NETMVCのいくつかのモデルプロパティのUI要素

1 に答える 1

Related

Reference