Building a Chat Web App With Signal R, Part 2: Listing 7

The KnockOut HTML personTemplate.

@model VSMSignalRPart2Demo.Models.Person

@{
    ViewBag.Title = "Person";
}

<h2>Person</h2>

<form data-bind="submit: createPerson">
    @Html.ValidationSummary(true)

    <div id="error" class="validation-summary-errors"></div>

    <fieldset>
        <legend>Person</legend>

        @Html.HiddenFor(model => model.Id)

        <div class="editor-label">
            @Html.LabelFor(model => model.FirstName)
        </div>
        <div class="editor-field">
            @Html.TextBoxFor(model => model.FirstName,  new { @data_bind = "value: newPersonFirstName" })
            @Html.ValidationMessageFor(model => model.FirstName)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.LastName)
        </div>
        <div class="editor-field">
            @Html.TextBoxFor(model => model.LastName, new { @data_bind = "value: newPersonLastName" })
            @Html.ValidationMessageFor(model => model.LastName)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Email)
        </div>
        <div class="editor-field">
            @Html.TextBoxFor(model => model.Email, new { @data_bind = "value: newPersonEmail" })
            @Html.ValidationMessageFor(model => model.Email)
        </div>

        <p>
            <input type="submit" value="Add Person" />
        </p>
    </fieldset>
</form>

<h2>People</h2>
<table data-bind="template: { name: 'personTemplate', foreach: people }, visible: people().length > 0">
    <thead>
        <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Email</th>
        </tr>
    </thead>
</table>

<script type="text/html" id="personTemplate">
    <!--Data Template-->
    <tr>
        <td><input class="ui-corner-all" data-bind="value: firstName, valueUpdate: 'afterkeydown'" /></td>
        <td><input class="ui-corner-all" data-bind="value: lastName, valueUpdate: 'afterkeydown'" /></td>
        <td><input class="ui-corner-all" data-bind="value: email, valueUpdate: 'afterkeydown'" /></td>
        <td><input class="ui-button" type="button" href="#" data-bind="click: removePerson" value="Delete" /></td>
    </tr>
</script>


@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
    <script src="~/Scripts/jquery.signalR-1.0.0-rc1.min.js"></script>
    <script src="/signalr/hubs" type="text/javascript"></script>
    <script src="~/Scripts/knockout-2.1.0.js"></script>
    <script src="~/Scripts/PersonManager.js"></script>
}

About the Author

Eric Vogel is a Senior Software Developer for Red Cedar Solutions Group in Okemos, Michigan. He is the president of the Greater Lansing User Group for .NET. Eric enjoys learning about software architecture and craftsmanship, and is always looking for ways to create more robust and testable applications. Contact him at [email protected].

comments powered by Disqus

Featured

  • Customize Your Own Audio Test Cues in Visual Studio 2019 v16.9 Preview 3

    Yes, developers can be alerted to a failed test with a fart sound.

  • Progress Touts New Third-Party Blazor UI Components

    Third-party dev tool specialist Progress announced an update to its .NET-centric offerings, touting new controls for Blazor, Microsoft's red-hot project for creating web apps with C#.

  • Entity Framework Core 6: What Developers Want

    Microsoft outlined its plan for Entity Framework Core 6, which in November will take its place as the data access component of the landmark .NET 6, a long-term support (LTS) release that will mark Microsoft's transition from the Windows-only .NET Framework to an open source, cross-platform umbrella offering of all things .NET.

  • AWS Open Sources .NET Porting Assistant GUI

    After previously open sourcing components of its Porting Assistant for .NET, Amazon Web Services open sourced the tool's GUI.

Upcoming Events