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 Sr. Software Developer at Kunz, Leigh, & Associates in Okemos, MI. 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 vogelvision@gmail.com.