Witam,
Strona wyświetla użytkowników których można zaprosić do znajomych klikając w przycisk. Po kliknięciu wykonuje się kod ajax i metoda w kontrolerze, po zaproszeniu zamiast przycisku pojawia się napis "Wysłano zaproszenie". Widok dla każdego takiego użytkownika którego można zaprosić jest wyświetlany za pomocą takiego widoku częściowego:
@using System.Security.Claims;
@using Domain.Entities.User;
@model ApplicationUser
<div class="singleUserinformation">
@if (Model.HasProfilePicture())
{
<img class="img-rounded" src="@Model.ProfilPicture.Picture.PhotoString" />
}
else
{
<img class="img-rounded" src="~/images/anonim_men.jpg" />
}
<br />
<span>@Model.UserName</span> <br />
<span>@Model.FirstName</span> <br />
<span>@Model.LastName</span> <br />
@{
RelationshipBetweenUsers relationshipBetweenUsers = Model.GetRelationshipWithUser(User.GetUserId());
if (relationshipBetweenUsers == RelationshipBetweenUsers.NoRelationship)
{
<button type="button" onclick="SendInvitationToFriends('@Model.Id', '@Model.UserName')">Zaproś do znajomych</button>
}
else if (relationshipBetweenUsers == RelationshipBetweenUsers.SendedInvitationToFriends)
{
<p>Wysłano zaproszenie</p>
}
else if (relationshipBetweenUsers == RelationshipBetweenUsers.ReceivedInvitationToFriends)
{
<p>Zaakceptuj zaproszenie</p>
}
else if (relationshipBetweenUsers == RelationshipBetweenUsers.Friends)
{
<p>Już jesteście znajomymi</p>
}
}
</div>
Funkcja js:
function SendInvitationToFriends(userId, userName) {
$.ajax({
url: '/Friends/SendInvitationToFriends',
method: 'GET',
contentType: "application/json; charset=utf-8",
data: { userId: userId },
context: document.body,
success: function () {
var element = $(".singleUserinformation > span:contains(" + userName + ")").parent();
if (element != null) {
element.load("/User/DisplayUserPartial", { userId: userId });
}
}
});
}
Div się przeładowuje z poprawną treścią, jednak wartości marginesów, paddingu i obramowania się sumują ze starymi wartościami przez co wszystko się nieładnie przesuwa.
Jak temu zaradzić?
Jeszcze kod css:
.singleUserinformation {
padding:10px;
margin:10px;
background-color:aliceblue;
border:1px solid black;
height:auto;
text-align:center;
width:250px;
float:left;
}
.singleUserinformation img {
width:100px;
height:100px;
border:1px solid black;
}