@using MvcSample.Web.Models
@model User
@{
    Layout = "/Views/Shared/_Layout.cshtml";
    ViewBag.Title = "Home Page";
    string nullValue = null;

    ViewBag.Anon = new
    {
        Name = "FirstName LastName",
        Address = new { Street = "123 Fake St.", City = "Redmond", State = "WA", Country = "USA", },
    };
}

@section header {
    <style type="text/css">
        #qux {
            display: none;
        }

        #qux.foo {
            color: red;
        }
    </style>
}

@section footer {
    <script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.0.min.js"></script>
    <script>
        $(function () {
            $("#qux").fadeIn(3000, function () {
                $(this).addClass("foo")
            });
        });
    </script>
}

@functions {
    public async Task<string> AsyncValueRetrieval()
    {
        return "Hello World";
    }
    
    public Task RenderHelloWorldPartial(User model)
    {
        // Imagine this method was a super complex method that was used as a helper method.
        return Html.RenderPartialAsync("HelloWorldPartial", model);
    }
}

<div class="jumbotron">
    <h1>ASP.NET</h1>
    <p class="lead">ASP.NET is a free web framework for building great Web sites and Web applications using HTML, CSS and JavaScript.</p>
    <p><a href="http://asp.net" class="btn btn-primary btn-large">Learn more &raquo;</a></p>
</div>
<div class="row">
    <h3 title="@Model.Name" class="@nullValue">Hello @Model.Name! Happy @Model.Age birthday.</h3>
    <h3 id ="qux">This value was retrieved asynchronously: @(await AsyncValueRetrieval())</h3>
    <h3>Partial Async: @await Html.PartialAsync("HelloWorldPartial", Model)</h3>
    <h3>Render Partial Async (Custom model): @{ await RenderHelloWorldPartial(new User()
                                                {
                                                    Name="Bob"
                                                }); 
                                              }</h3>

    <div class="col-md-4">
        <h2>Getting started</h2>
        <p>
            ASP.NET MVC gives you a powerful, patterns-based way to build dynamic websites that
            enables a clean separation of concerns and gives you full control over markup
            for enjoyable, agile development.
        </p>
        <p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301865">Learn more &raquo;</a></p>
    </div>
    <div class="col-md-4">
        <h2>Get more libraries</h2>
        <p>NuGet is a free Visual Studio extension that makes it easy to add, remove, and update libraries and tools in Visual Studio projects.</p>
        <p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301866">Learn more &raquo;</a></p>
    </div>
    <div class="col-md-4">
        <h2>Web Hosting</h2>
        <p>You can easily find a web hosting company that offers the right mix of features and price for your applications.</p>
        <p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301867">Learn more &raquo;</a></p>
    </div>
</div>

<div class="row">
    <div style="float: left; border: 5px solid blue; padding-right: 10px;">
        <table>
            <tr>
                <td>
                    <label class="control-label col-md-2">ForModel</label>
                </td>
                <td>
                    '@Html.NameForModel()'
                </td>
                <td>
                    '@Html.ValueForModel()'
                </td>
            </tr>
            <tr>
                <td>
                    <label class="control-label col-md-2">Name</label>
                </td>
                <td>
                    '@Html.Name("Name")'
                </td>
                <td>
                    '@Html.Value("Name")'
                </td>
            </tr>
            <tr>
                <td>
                    <label class="control-label col-md-2">m.Address</label>
                </td>
                <td>
                    '@Html.NameFor(m => m.Address)'
                </td>
                <td>
                    '@Html.ValueFor(m => m.Address)'
                </td>
            </tr>
            <tr>
                <td>
                    <label class="control-label col-md-2">Anon.Address.Street</label>
                </td>
                <td>
                    '@Html.Name("Anon.Address.Street")'
                </td>
                <td>
                    '@Html.Value("Anon.Address.Street")'
                </td>
            </tr>
        </table>
    </div>

    <div style="float: left; border: thick solid lightskyblue; margin-left: 15px; padding-right: 10px">
        <form action="/Home/Hello" method="post">
            <table>
                <tr>
                    <td>
                        <label class="control-label col-md-2">Model.Name</label>
                    </td>
                    <td>
                        @Html.TextBox("Name")
                    </td>
                </tr>
                <tr>
                    <td>
                        <label class="control-label col-md-2">Model.Address</label>
                    </td>
                    <td>
                        @Html.TextBoxFor(m => m.Address, htmlAttributes: new { @class = "form-control" })
                    </td>
                </tr>
                <tr>
                    <td>
                        <label class="control-label col-md-2">Anon.Name</label>
                    </td>
                    <td>
                        @Html.TextBox("Anon.Name")
                    </td>
                </tr>
                <tr>
                    <td>
                        <label class="control-label col-md-2">Anon.Address.Street</label>
                    </td>
                    <td>
                        @Html.TextBox("Anon.Address.Street", (object)ViewBag.Anon.Address.Street)
                    </td>
                </tr>
                <tr>
                    <td>
                        <label class="control-label col-md-2">Anon.Address.City</label>
                    </td>
                    <td>
                        @Html.TextBox("Anon.Address.City", value: null, format: "{0} (3)")
                    </td>
                </tr>
                <tr>
                    <td>
                        <label class="control-label col-md-2">Anon.Address.State</label>
                    </td>
                    <td>
                        @Html.TextBox("Anon.Address.State", value: null, htmlAttributes: new { @class = "form-control" })
                    </td>
                </tr>
                <tr>
                    <td>
                        <label class="control-label col-md-2">Anon.Address.Country</label>
                    </td>
                    <td>
                        @Html.TextBox("Anon.Address.Country", value: null, format: "{0} (4)",
                         htmlAttributes: new { @class = "form-control" })
                    </td>
                </tr>
            </table>

            <div class="form-group">
                <div class="col-md-2">
                    <input type="submit" value="Save" class="btn btn-default" />
                </div>
            </div>
        </form>
    </div>

    <div style="float: left; border: 5px solid red;">
        @await Component.InvokeAsync("Tags", 15)
    </div>
</div>

<div class="row">
    <div style="float: left; border: 5px solid green;">
        <table>
            <tr>
                <td>
                    <label class="control-label col-md-2">Display Name</label>
                </td>
                <td>
                    '@Html.Display("Name")'
                </td>
            </tr>
            <tr>
                <td>
                    <label class="control-label col-md-2">Display Dependent.Name</label>
                </td>
                <td>
                    '@Html.Display("Dependent.Name")'
                </td>
            </tr>
            <tr>
                <td>
                    <label class="control-label col-md-2">Display Alive</label>
                </td>
                <td>
                    '@Html.Display("Alive")'
                </td>
            </tr>
            <tr>
                <td>
                    <label class="control-label col-md-2">Display Dependent.Alive</label>
                </td>
                <td>
                    '@Html.Display("Dependent.Alive")'
                </td>
            </tr>
            <tr>
                <td>
                    <label class="control-label col-md-2">Display Age</label>
                </td>
                <td>
                    '@Html.Display("Age")'
                </td>
            </tr>
            <tr>
                <td>
                    <label class="control-label col-md-2">Display GPA</label>
                </td>
                <td>
                    '@Html.Display("GPA")'
                </td>
            </tr>
        </table>
    </div>
    <div style="float: left; border: 5px solid green;">
        <table>
            <tr>
                <td>
                    <label class="control-label col-md-2">DisplayFor Name</label>
                </td>
                <td>
                    '@Html.DisplayFor(model => model.Name)'
                </td>
            </tr>
            <tr>
                <td>
                    <label class="control-label col-md-2">DisplayFor Dependent.Name</label>
                </td>
                <td>
                    '@Html.DisplayFor(model => model.Dependent.Name)'
                </td>
            </tr>
            <tr>
                <td>
                    <label class="control-label col-md-2">DisplayFor Alive</label>
                </td>
                <td>
                    '@Html.DisplayFor(model => model.Alive)'
                </td>
            </tr>
            <tr>
                <td>
                    <label class="control-label col-md-2">DisplayFor Dependent.Alive</label>
                </td>
                <td>
                    '@Html.DisplayFor(model => model.Dependent.Alive)'
                </td>
            </tr>
            <tr>
                <td>
                    <label class="control-label col-md-2">DisplayFor Age</label>
                </td>
                <td>
                    '@Html.DisplayFor(model => model.Age)'
                </td>
            </tr>
            <tr>
                <td>
                    <label class="control-label col-md-2">DisplayFor GPA</label>
                </td>
                <td>
                    '@Html.DisplayFor(model => model.GPA)'
                </td>
            </tr>
        </table>
    </div>

    <div style="float: left; border: 5px solid green;">
        @Html.DisplayForModel()
    </div>

</div>