asp.net mvcからボタンをテキストに変更する

Question

私は今、テスト目的でこれをやっています。私がここでやっているのは、列の各行に対して2つのボタン（AcceptとDecline）があります。 [Accept]ボタンを選択すると、列の2つのボタンが削除され、「Accepted」というテキストラベルに置き換えられます。 [拒否]ボタンを選択すると、列の[受諾]ボタンと[拒否]ボタンが削除され、テキストラベル '拒否'に置き換えられます。私はまた、私が受け入れボタンを選択すると、私はその行の背景が緑色で、赤い背景を持つ拒否ボタンのために同じものにしたいと考えています。

もう1つ重要なことは、このテーブルを保存したいので、このページに戻ったときに前に行ったことが分かります。だから私はデータベーステーブル（テスト）にそのページの情報を保存するためのカラム 'Choice'を作成しました。しかし正直なところ、それを正しく行う方法は分かりません。だからここまで私がやったことがあります。どんな助けもありがとうございます。

ビュー：

<table class="table"> 
<tr> 
    <th> 
     @Html.DisplayName("Choice") 
    </th> 
</tr> 

@foreach (var item in Model) { 
<tr> 
    <td> 
     @Html.ActionLink("Accept", "test", "test", 
             new 
             { 
              id = item.testId, 
              choice = "accept" 
             }, 
             new 
             { 
              @class = "btn btn-success btn-xs" 
             }) 
     @Html.ActionLink("Decline", "test", "test", 
             new 
             { 
              id = item.testId, 
              choice = "decline" 
             }, 
             new 
             { 
              @class = "btn btn-danger btn-xs" 
             }) 
    </td> 
</tr> 
} 

</table> 

<script>  
$('td > a').on('click', function() { 
    $(this).closest('tr').addClass('selected');  
}); 
</script> 

のCss：

.selected { 
    background-color:red; 
} 

コントローラー：遅れて申し訳ありません

public ActionResult test(int id, string choice) 
    { 
     ...code 
     return RedirectToAction("Index"); 
    } 

Answer 1

。 MVC5、EF6コードファースト、Visual Studio 2015コミュニティを使って部分的に作業しています。現時点で私が使用しているものです。

私は受け入れプロパティのモデルでNULL可能ブール値を使用：

namespace SODemo1.Models 
{ 
    public class MyModel 
    { 
     public int Id { get; set; } 

     public string Text { get; set; } 

     public string Description { get; set; } 

     public bool? Accepted { get; set; } 
    } 
} 

コードの表示：

@model IEnumerable<SODemo1.Models.MyModel> 

@{ 
    ViewBag.Title = "Index"; 
} 

<h2>Index</h2> 

<p> 
    @Html.ActionLink("Create New", "Create") 
</p> 
<table class="table" id="MyTable"> 
    <tr> 
     <th> 
      @Html.DisplayNameFor(model => model.Text) 
     </th> 
     <th> 
      @Html.DisplayNameFor(model => model.Accepted) 
     </th> 
     <th> 
      @Html.DisplayNameFor(model => model.Description) 
     </th> 
     <th></th> 
    </tr> 

@foreach (var item in Model) { 
    <tr> 
     <td> 
      @Html.DisplayFor(modelItem => item.Text) 
     </td> 
     <td> 
      @Html.DisplayFor(modelItem => item.Description) 
     </td> 
     <td class="Accepted"> 
      @{ 
       if (item.Accepted == null) 
       { 
        @Html.ActionLink("Accept", "Edit", "MyModels", new { id = item.Id}, 
        new { @class = "btn btn-success btn-xs" }) 
        @Html.ActionLink("Decline", "Edit", "MyModels", new { id = item.Id}, 
        new { @class = "btn btn-danger btn-xs" }) 
       } 
       else if (item.Accepted == true) 
       { 
        <span>Accepted</span> 
       } 
       else if (item.Accepted == false) 
       { 
        <span>Declined</span> 
       } 
      } 
     </td> 
     <td> 
      @Html.ActionLink("Edit", "Edit", new { id=item.Id }) | 
      @Html.ActionLink("Details", "Details", new { id=item.Id }) | 
      @Html.ActionLink("Delete", "Delete", new { id=item.Id }) 
     </td> 
    </tr> 
} 

</table> 

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('#MyTable td span').each(function() { 
      if ($(this).text() === 'Declined') { 
       $(this).closest('tr').css('background-color', 'red'); 
      } 
      if ($(this).text() === 'Accepted') { 
       $(this).closest('tr').css('background-color', 'green'); 
      } 
     }); 
    }); 
</script> 

EDIT - 作業溶液hereとGitHubのリンク：ちょうどMyModelsコントローラを参照します（ブラウザでlocalhost:xxxx/MyModels）。

私はボタン/リンクを使用してjQueryの作業を得ることができた：

$('#MyTable td.accepted a').click(function() { 
     var model = @Html.Raw(Json.Encode(Model)); 
     $.ajax({ 
      url: this.href, 
      type: 'POST', 
      contentType: 'application/json; charset=utf-8', 
      data: JSON.stringify(model), 
      success: function(result) { 
       window.location.reload(true); 
      } 
     }); 
     return false; 
    }); 

しかしへのリンク/ボタンを変更する必要がありました：

@Html.ActionLink("Accept", "Edit", "MyModels", new { id = item.Id, Accepted = true, Text = item.Text, Description = item.Description }, 
new { @class = "btn btn-success btn-xs" }) 
@Html.ActionLink("Decline", "Edit", "MyModels", new { id = item.Id, Accepted = false, Text = item.Text, Description = item.Description }, 
new { @class = "btn btn-danger btn-xs" }) 

非常にエレガントではないが、それは働いている - 私に知らせて