webmail.cshtml

@page
@model WebMailModel
@{
    ViewData["Title"] = "WebMail";
}

<h2>WebMail</h2>
<ul class="folders" data-bind="foreach: folders">
    <li data-bind="text: $data,
               css: { selected: $data == $root.chosenFolderId() },
               click: $root.goToFolder"></li>
</ul>
<table class="mails" data-bind="with: chosenFolderData">
    <thead><tr><th>From</th><th>To</th><th>Subject</th><th>Date</th></tr></thead>
    <tbody data-bind="foreach: mails">
        <tr data-bind="click: $root.goToMail">
            <td data-bind="text: from"></td>
            <td data-bind="text: to"></td>
            <td data-bind="text: subject"></td>
            <td data-bind="text: date"></td>
        </tr>
    </tbody>
</table>

<div class="viewMail" data-bind="with: chosenMailData">
    <div class="mailInfo">
        <h1 data-bind="text: subject"></h1>
        <p><label>From</label>: <span data-bind="text: from"></span></p>
        <p><label>To</label>: <span data-bind="text: to"></span></p>
        <p><label>Date</label>: <span data-bind="text: date"></span></p>
    </div>
    <p class="message" data-bind="html: messageContent" />
</div>


@section scripts{
    
    <script>
        require(["js/webmail"]);
    </script>

}

@section styles{ 
    <link href="~/css/webmail.css" rel="stylesheet" type="text/css" />
}