Tuesday, June 16, 2015

Customizing Templates in ASP.NET MVC

Customizing Templates?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
using System.ComponentModel.DataAnnotations;
using System.Web.Mvc;
 
public class SampleModel {
    public static SampleModel Create() {
        return new SampleModel {
            Boolean = true,
            EmailAddress = "admin@contoso.com",
            Decimal = 21.1234M,
            Integer = 42,
            Hidden = "Uneditable",
            HiddenAndInvisible = "Also uneditable",
            Html = "This is <b>HTML</b> enabled",
            MultilineText = "This\r\nhas\r\nmultiple\r\nlines",
            NullableBoolean = null,
            Password = "supersecret",
            String = "A simple string",
            Url = "http://www.microsoft.com/",
        };
    }
 
    public bool Boolean { get; set; }
 
    [DataType(DataType.EmailAddress)]
    public string EmailAddress { get; set; }
 
    public decimal Decimal { get; set; }
 
    [HiddenInput]
    public string Hidden { get; set; }
 
    [HiddenInput(DisplayValue = false)]
    public string HiddenAndInvisible { get; set; }
 
    [DataType(DataType.Html)]
    public string Html { get; set; }
 
    [Required]
    [Range(10, 100)]
    public int Integer { get; set; }
 
    [DataType(DataType.MultilineText)]
    public string MultilineText { get; set; }
 
    public bool? NullableBoolean { get; set; }
 
    [DataType(DataType.Password)]
    public string Password { get; set; }
 
    public string String { get; set; }
 
    [DataType(DataType.Url)]
    public string Url { get; set; }
 
    [DisplayFormat(NullDisplayText = "(null value)")]
    public ChildModel ChildModel { get; set; }
}
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
using System.ComponentModel.DataAnnotations;
 
[DisplayColumn("FullName")]
public class ChildModel {
    [Required, StringLength(25)]
    public string FirstName { get; set; }
 
    [Required, StringLength(25)]
    public string LastName { get; set; }
 
    [ScaffoldColumn(false)]
    public string FullName {
        get {
            return FirstName + " " + LastName;
        }
    }
}
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
using System.Web.Mvc;
 
public class HomeController : Controller {
    static SampleModel model = SampleModel.Create();
 
    public ViewResult Index() {
        return View(model);
    }
 
    public ViewResult Edit() {
        return View(model);
    }
 
    [HttpPost]
    [ValidateInput(false)]
    public ActionResult Edit(SampleModel editedModel) {
        if (ModelState.IsValid) {
            model = editedModel;
            return RedirectToAction("Details");
        }
 
        return View(editedModel);
    }
}
?
1
2
3
4
5
6
7
8
9
10
11
12
<%@ Page
    Language="C#"
    MasterPageFile="~/Views/shared/Site.master"
    Inherits="ViewPage<SampleModel>" %>
 
<asp:Content ContentPlaceHolderID="MainContent" runat="server">
    <h3>Details</h3>
    <fieldset style="padding: 1em; margin: 0; border: solid 1px #999;">
        <%= Html.DisplayForModel() %>
    </fieldset>
    <p><%= Html.ActionLink("Edit", "Edit") %></p>
</asp:Content>
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<%@ Page
    Language="C#"
    MasterPageFile="~/Views/shared/Site.master"
    Inherits="ViewPage<SampleModel>" %>
 
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <h3>Edit</h3>
    <% using (Html.BeginForm()) { %>
        <fieldset style="padding: 1em; margin: 0; border: solid 1px #999;">
            <%= Html.ValidationSummary("Broken stuff:") %>
            <%= Html.EditorForModel() %>
            <input type="submit" value="  Submit  " />
        </fieldset>
    <% } %>
    <p><%= Html.ActionLink("Details", "Index") %></p>
</asp:Content>
The Default Display
Tabular Layout?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>
<% if (Model == null) { %>
    <%= ViewData.ModelMetadata.NullDisplayText %>
<% } else if (ViewData.TemplateInfo.TemplateDepth > 1) { %>
    <%= ViewData.ModelMetadata.SimpleDisplayText %>
<% } else { %>
    <table cellpadding="0" cellspacing="0" border="0">
    <% foreach (var prop in ViewData.ModelMetadata.Properties.Where(pm => pm.ShowForDisplay && !ViewData.TemplateInfo.Visited(pm))) { %>
        <% if (prop.HideSurroundingHtml) { %>
            <%= Html.Display(prop.PropertyName) %>
        <% } else { %>
            <tr>
                <td>
                    <div class="display-label" style="text-align: right;">
                        <%= prop.GetDisplayName() %>
                    </div>
                </td>
                <td>
                    <div class="display-field">
                        <%= Html.Display(prop.PropertyName) %>
                    </div>
                </td>
            </tr>
        <% } %>
    <% } %>
    </table>
<% } %>
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>
<% if (ViewData.TemplateInfo.TemplateDepth > 1) { %>
    <%= ViewData.ModelMetadata.SimpleDisplayText %>
<% } else { %>
    <table cellpadding="0" cellspacing="0" border="0">
    <% foreach (var prop in ViewData.ModelMetadata.Properties.Where(pm => pm.ShowForEdit && !ViewData.TemplateInfo.Visited(pm))) { %>
        <% if (prop.HideSurroundingHtml) { %>
            <%= Html.Editor(prop.PropertyName) %>
        <% } else { %>
            <tr>
                <td>
                    <div class="editor-label" style="text-align: right;">
                        <%= prop.IsRequired ? "*" : "" %>
                        <%= Html.Label(prop.PropertyName) %>
                    </div>
                </td>
                <td>
                    <div class="editor-field">
                        <%= Html.Editor(prop.PropertyName) %>
                        <%= Html.ValidationMessage(prop.PropertyName, "*") %>
                    </div>
                </td>
            </tr>
        <% } %>
    <% } %>
    </table>
<% } %>
Shallow Dive vs. Deep Dive
Opinionated Input Builders

No comments:

Post a Comment