HTML and CSS Reference
In-Depth Information
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
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();">
<p id="agentName">@User.Identity.Name</p>
<pre id="output"></pre>
<div id="div1" class="client">
<p id="client1" class="clientName">unassigned</p>
<div id="chat1" class="chat">
<input type="text" id="input1" class="input" value="" />
<input type="submit" value="Send" onclick="send('1');" />
<div id="div2" class="client">
<p id="client2" class="clientName">unassigned</p>
<div id="chat2" class="chat">
<input type="text" id="input2" class="input" value="" />
<input type="submit" value="Send" onclick="send('2');" />
<div id="div3" class="client">
<p id="client3" class="clientName">unassigned</p>
<div id="chat3" class="chat">
<input type="text" id="input3" class="input" value="" />
<input type="submit" value="Send" onclick="send('3');" />
Search WWH ::

Custom Search