HTML and CSS Reference
In-Depth Information
7.
In the Views\Shared folder, open the
_Layout.cshtml
file. Inside the
nav
element you'll
see three
@Html.ActionLink()
methods that setup the navigation options on the home
page. Add the following line to this section to add a navigation link to the new chat page:
<li>@Html.ActionLink("Begin Chat", "Chat", "Home")</li>
Implementing the Chat Web Page
Now you'll implement the chat page. This will support four separate chat sessions. You'll first add the markup
for the elements that you'll need and then apply a
style
element to make the page look better. Then you'll add
JavaScript to access the websocket and communicate with the websocket server that you created.
eXerCISe 13-6. IMpLeMeNtING the Chat paGe
1.
open the
chat.cshtml
file and replace the
body
element with the markup shown in
Listing 13-12.
Listing 13-12.
Adding the page markup
<body onload="connect();">
<div>
<div>
<p id="agentName">@User.Identity.Name</p>
<pre id="output"></pre>
</div>
<div id="div1" class="client">
<p id="client1" class="clientName">unassigned</p>
<div id="chat1" class="chat">
</div>
<input type="text" id="input1" class="input" value="" />
<input type="submit" value="Send" onclick="send('1');" />
</div>
<div id="div2" class="client">
<p id="client2" class="clientName">unassigned</p>
<div id="chat2" class="chat">
</div>
<input type="text" id="input2" class="input" value="" />
<input type="submit" value="Send" onclick="send('2');" />
</div>
<div id="div3" class="client">
<p id="client3" class="clientName">unassigned</p>
<div id="chat3" class="chat">
</div>
<input type="text" id="input3" class="input" value="" />
<input type="submit" value="Send" onclick="send('3');" />
