Untitled

@model List<GetAllChatUsersResult>
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <script src="~/Scripts/jquery-1.10.2.js"></script>
    <link href="~/StyleSheet/StyleSheet1.css?v3" rel="stylesheet" />
    <meta name="viewport" content="with=device-width" />
    <title>Index</title>
    <script>
        var ActifUser = null;
        $(document).ready(function () {

            $(".User").on("click", function () {
                if (ActifUser) {

                    $(ActifUser).css("background-color", "");
                }
                $(this).css("background-color", "PaleGoldenRod");
                var Users = new Object();
                //alert($('#LoggedUser').html());
                //alert($(this).attr("data-IdUser"));
               Users.User1 = $('#LoggedUser').html();
                Users.User2 = $(this).attr("data-IdUser");
                //$AJAX
                $.ajax({

                    type: "POST",
                    url: "/Home/GetMessage",
                    data: JSON.stringify(Users),
                    dataType: "Json",
                    contentType: "application/json",
                    //success: showMsg
                    success: function (Messages) {
                        PutMessages(Messages, Users.IdUser2);
                    }

                });
                //function showMsg(data) {
                //    $("#UserMessages").css('visibility', 'visible');
                //    $("#UserMessages").html(data[0].Message);
                //}

                ActifUser = this;
            });

        });

        function PutMessages(Messages, MyUser) {
            //alert(Message); Je Recoit bien les messages
            $("#UserMessages").empty();

            for (MessageIndex in Messages) {
                var MessageBody = $("<div/>");
                MessageBody.addClass("MessageBody");
                var MessageDiv = $("<div/>").appenTo(MessageBody);
                if (Messages[MessageIndex].IdSender.toUpperCase() == MyUser.toUpperCase()) {
                    MessageDiv.addClass('MessageLeft');
                }
                else {
                    MessageDiv.addClass('MessageRight');
                }
                $(MessageDiv).html(Messages[MessageIndex].Message);
                $("#UserMessages").append(MessageBody);
            }
        }

    </script>


</head>
<body>
    <div id="LoggedUser">@ViewData["LoggedUser"]</div>
    <div id="UserList">

        @{
            foreach (var Chatuser in Model)
            {
            <div class="User" data-IdUser="@Chatuser.IdUser">

                <img data-reference="@Chatuser.IdUser" class="AvatarUser" src="/Home/GetAvatar/@Chatuser.IdUser" />
                <br/>
                <label> @Chatuser.Nom</label>
                <br />
                <label> @Chatuser.Prenom</label>
                <br />
                @switch (Chatuser.Status)
                {
                    case 0:
                        <span class="StatusRed">Non Connecté</span>
                        break;
                    case 1:
                        <span class="StatusGreen">Connecté</span>
                        break;
                }
            </div>

                }
            }
    </div>


<div id="UserMessages">

</div>
</body>
</html>