搭配使用 HTML5 和 jQuery UI Datepicker 快顯行事曆搭配 ASP.NET MVC - 第 3 部分

作者： Rick Anderson

本教學課程將教導您如何在 ASP.NET MVC Web 應用程式中使用編輯器範本、顯示範本和 jQuery UI datepicker 快顯視窗行事曆的基本概念。

使用複雜類型

在本節中，您將建立網址類別別，並瞭解如何建立範本以顯示它。

在 Models 資料夾中，建立名為 Person.cs 的新類別檔案，您將在其中放置兩種類型：類別 Person 和 Address 類別。 類別 Person 將包含類型為 Address 的屬性。 此 Address 類型是複雜類型，這表示它不是 、 或 double 之類的 intstring 其中一個內建類型。 相反地，它有數個屬性。 新類別的程式碼如下所示：

public class Address {
    public string StreetAddress { get; set; }
    public string City { get; set; }
    public string PostalCode { get; set; }
}

public class Person {
    public int ID { get; set; }
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public string Phone { get; set; }
    public Address HomeAddress;
}

在控制器中 Movie ，新增下列 PersonDetail 動作以顯示人員實例：

public ActionResult PersonDetail(int id = 0) {
     return View(GetPerson(id));
}

然後將下列程式碼新增至控制器， Movie 以使用一些範例資料填入 Person 模型：

Person GetPerson(int id) {
    var p = new Person
    {
        ID = 1,
        FirstName = "Joe",
        LastName = "Smith",
        Phone = "123-456",
        HomeAddress = new Address
        {
            City = "Great Falls",
            StreetAddress = "1234 N 57th St",
            PostalCode = "95045"
        }
    };
    return p;
}

開啟 Views\Movies\PersonDetail.cshtml 檔案，並新增檢視的 PersonDetail 下列標記。

@model Person
@{
    ViewBag.Title = "PersonDetail";
}
<h2>Person Detail</h2>
@Html.DisplayForModel()

按 Ctrl+F5 執行應用程式，並流覽至 Movies/PersonDetail。

檢 PersonDetail 視不包含 Address 複雜類型，如此螢幕擷取畫面所示。 (未顯示位址。)

模型 Address 資料不會顯示，因為它是複雜類型。 若要顯示位址資訊，請再次開啟 Views\Movies\PersonDetail.cshtml 檔案，並新增下列標記。

@Html.DisplayFor( x => x.HomeAddress )

現在檢視的完整標記 PersonDetail 看起來像這樣：

@model MvcMovie.Models.Person

@{
    ViewBag.Title = "PersonDetail";
}

<h2>Person Detail</h2>

@Html.DisplayForModel()
@Html.DisplayFor( x => x.HomeAddress )

再次執行應用程式並顯示 PersonDetail 檢視。 位址資訊現在會顯示：

建立複雜類型的範本

在本節中，您將建立將用來呈現 Address 複雜類型的範本。 當您為 Address 類型建立範本時，ASP.NET MVC 會自動使用它來格式化應用程式中任何位置的位址模型。 這可讓您從應用程式中的一個位置控制型別的 Address 轉譯。

在 Views\Shared\DisplayTemplates 資料夾中，建立名為 Address的強型別部分檢視：

按一下 [新增]，然後開啟新的 Views\Shared\DisplayTemplates\Address.cshtml 檔案。 新的檢視包含下列產生的標記：

@model MvcMovie.Models.Address

<fieldset>
    <legend>Address</legend>

    <div class="display-label">StreetAddress</div>
    <div class="display-field">
        @Html.DisplayFor(model => model.StreetAddress)
    </div>

    <div class="display-label">City</div>
    <div class="display-field">
        @Html.DisplayFor(model => model.City)
    </div>

    <div class="display-label">PostalCode</div>
    <div class="display-field">
        @Html.DisplayFor(model => model.PostalCode)
    </div>
</fieldset>

執行應用程式並顯示 PersonDetail 檢視。 這次， Address 您剛才建立的 Address 範本是用來顯示複雜類型，因此顯示看起來如下：

摘要：指定模型顯示格式和範本的方式

您已瞭解您可以使用下列方法來指定模型屬性的格式或範本：

• 將 DisplayFormat 屬性套用至模型中的屬性。 例如，下列程式碼會導致沒有時間顯示日期：

  [DisplayFormat(DataFormatString = "{0:d}")]
  public DateTime ReleaseDate { get; set; }
  

• 將 DataType 屬性套用至模型中的屬性，並指定資料類型。 例如，下列程式碼會導致沒有時間顯示日期。

  [DataType(DataType.Date)]
  public DateTime ReleaseDate { get; set; }
  

  如果應用程式在Views\Shared\DisplayTemplates資料夾或Views\Movies\DisplayTemplates資料夾中包含date.cshtml範本，該範本將用來轉 DateTime 譯屬性。 否則，內建 ASP.NET 範本化系統會將 屬性顯示為日期。

• 在 Views\Shared\DisplayTemplates 資料夾中建立顯示範本，或名稱符合您要格式化之資料類型 的 Views\Movies\DisplayTemplates 資料夾。 例如，您看到 Views\Shared\DisplayTemplates\DateTime.cshtml 是用來轉譯 DateTime 模型中的屬性，而不需要將屬性新增至模型，也不需要將任何標記新增至檢視。

• 在模型上使用 UIHint 屬性來指定要顯示模型屬性的範本。

• 在檢視中明確將顯示範本名稱新增至 Html.DisplayFor 呼叫。

您使用的方法取決於您在應用程式中執行哪些動作。 混用這些方法並不常見，以取得您所需的格式設定類型。

在下一節中，您將切換齒輪，並從自訂資料的顯示方式移至自訂輸入方式。 您會將 jQuery datepicker 連結至應用程式中的編輯檢視，以提供指定日期的 Slick 方法。

上一個下一個