Asp.netコアのボタンへのデータバインド

Question

私はASP.NET Core MVCを学んでいます。 私はこのモデルがあります：

public class Todo 
{ 
    public int Id { get; set; } 
    [Required] 
    public string Name { get; set; } 
    [MaxLength(4096)] 
    public string Content { get; set; } 
    public bool isCompleted { get; set; } = false; 
    public DateTime DateCreated { get; set; } = DateTime.UtcNow; 
    public string UserName { get; set; } 
} 

をそして私のようなボタンにisCompletedをバインドしたい：私はそのボタンをクリックしたとき、それは値が変更されますです。現在、私は、Ajaxを使用しています：

CompleteTodo = function (id, isCompleted) { 
    if (isCompleted === true) { 
     var data = "{\n \"isCompleted\": false,\n}" 
    } else { 
     var data = "{\n \"isCompleted\": true,\n}" 
    } 
    var settings = { 
     "async": true, 
     "crossDomain": true, 
     "url": "http://localhost:3000/api/todos/"+id, 
     "method": "PUT", 
     "headers": { 
      "content-type": "application/json", 
      "cache-control": "no-cache", 
     }, 
     "data": data 
    } 

    $.ajax(settings).done(function (response) { 
     console.log(response); 
    }); 
} 

問題がある、私はコールの後、ボタンのクラスを変更することはできません、私のbuttonタグ：

<button id="ButtonComplete" href="#" onclick='CompleteTodo(@item.Id,@item.isCompleted.ToString().ToLower())' class="waves-effect waves-light @(item.isCompleted?"blue":"green") btn">@if (!item.isCompleted) 
       { <i class="material-icons">done</i>} 
       else 
       { <i class="material-icons">clear</i> }</button> 

だから私はそれをどのように行うことができます

を？ありがとうございました。

Answer 1

サーバーサイドバインドを使用するため、ページクラスを更新しないとボタンクラスは変更されません。 ajaxが完了したらページを更新してください：

$.ajax(settings).done(function (response) { 
    console.log(response); 
    location.reload(false); 
}); 

またはJavaScriptを使用してクライアント側でクラスを変更（追加/削除）してください。

ps：ajaxコールitem.isCompletedが期待どおりに変更されたことを確認してください。