Изменить статус кнопки (MVC)

Question

Я хочу сделать твиттер похожим на сайт микроблога, чтобы другие пользователи могли следить за моими сообщениями.

Для этого я создал страницу со всеми зарегистрированными пользователями.Перед каждым именем есть кнопка, чтобы следовать / отписаться от пользователя.(Как в Твиттере)

Просмотр -

@{
    ViewBag.Title = "Users";
}
@model MembershipUserCollection

@foreach (MembershipUser item in Model)
{
if(User.Identity.Name != item.UserName)
{

     <li>@item.UserName 
        <span id="sp-@item.UserName"><input id="@item.UserName" name="submit" type="submit" value="Follow" class="follow-user fg-button ui-state-default"/></span> 
     </li>
}

} 

<script type="text/javascript">
    $(".follow-user").live("click", function (e) {
        e.preventDefault();
        var data = $(this).attr("id");
        var spid = '#sp-' + data;
        var btnid = '#' + data;
        var val = $(this).attr('value');

        $.ajax({
            type: "POST",
            url: "User/FollowUser",
            data: { id: data },
            cache: false,
            dataType: "json",
            success: function () {
                if (val == 'Follow') {
                    $(btnid).attr('value', 'Unfollow');
                }
                else {
                    $(btnid).attr('value', 'Follow');
                }

            }
        });
    });
</script>

Контроллер -

public ActionResult Index()
{
    return View(Membership.GetAllUsers());
}

public void FollowUser(string id)
{
    ViewData["test"] = "test";
    var n = FollowingUser.CreateFollowingUser(0);
    n.FollowingId = id;
    n.FollowerId = User.Identity.Name;
    string message = string.Empty;
    var list = new List<FollowingUser>();

    list = (from a in db.FollowingUsers where a.FollowerId == User.Identity.Name && a.FollowingId == id select a).ToList();

    if (list.Count() == 0)
    {

        try
        {
            db.AddToFollowingUsers(n);
            db.SaveChanges();
        }

        catch (Exception ex)
        {
            message = ex.Message;
        }
    }

    else 
    {
        db.DeleteObject((from a in db.FollowingUsers where a.FollowerId == User.Identity.Name select a).FirstOrDefault());
        db.SaveChanges();
    }
}

Таблица следующих пользователей -

Теперь я хочу изменить статус кнопки при проверке загрузки страницы, независимо от того, за ним уже следили.

Ex- Если пользователь уже подписался, он должен отображаться, как показано ниже.

Answer 1

Когда вы показываете это представление пользователю, где отображается эта кнопка, также загружайте статус, если этот человек подписан или нет.

public ActionResult Index()
{
    var model  = new MemberShipViewModel();
    //We check here if the logged in user is already following the user being viewd

    foreach(var member in  Membership.GetAllUsers())
    {

      var user = (from a in db.FollowingUsers where a.FollowerId == User.Identity.Name && a.FollowingId == member.UserName select a).FirstOrDefault();
     model.Members.Add(new Member{UserName = member.UserName,IsFollowing=user!=null});
    }
    //This line will remove the logged in user.   
    model.Members.Remove(model.Members.First(m=>m.UserName==User.Identity.Name)); 


    return view(model);


}

В вашей модели индексного представления вам необходимо внести некоторые изменения.

 @model MemberShipViewModel

 @foreach (var item in Model)
 {

 <li>@item.UserName 

if(!item.IsFollowing)
{

    <span id="sp-@item.UserName"><input id="@item.UserName" name="submit" type="submit" value="Follow" class="follow-user fg-button ui-state-default"/></span> 
 }
 else
 {

    <span id="sp-@item.UserName"><input id="@item.UserName" name="submit" type="submit" value="Follow" class="unfollow-user fg-button ui-state-default"/></span> 

}


 </li>

}

$ (". follow-user"). live ("click", function (e) { e.preventDefault (); var data = $ (this) .attr ("id"); var spid = '# sp-' + data; var btnid = '#' + data; var val = $ (this) .attr ('value'); $ .Ajax ({ тип: "POST", URL: "Пользователь / FollowUser", данные: {id: data}, кеш: ложь, dataType: "json", success: function () { if (val == 'Follow') { $ (btnid) .attr ('value', 'Unfollow'); } еще { $ (btnid) .attr ('value', 'Follow'); } } }); });

Вам нужно написать немного javascript сейчас. Никто не собирается писать полное программное обеспечение для вас. Кажется, вам не хватает базовых навыков программирования.

ура