Asp.Net MVC 4中的復選框

Question

我有復選框。 當我選中復選框時，希望它自動將其在數據庫中的值更改為true，並刷新視圖並調用JQuery方法。

我也有一個復選框和標簽。 我希望復選框在選中時消失，標簽中的文本也要更改。

    <h2>Tasks</h2>
<fieldset>
<legend>Tasks</legend>
    <table class="table">
        @foreach(var item in ViewBag.x)
        {
            <tr class="clr">
                <td style="width:520px">
                    @item.User.UserName
                </td>
                <td>
                    @item.date.ToString("MM/dd/yyyy")
                </td>
                </tr>
            <tr class="clr">
                <td>
                    @item.Discription
                </td>
                <td></td>
                </tr>

                <tr>
                    <td ></td>
                <td>
                    <div><input type="checkbox" id="ch" class="ch" /><span id="d"  >Done</span></div>
               </td>

            </tr>
        }

我將如何在JQuery或ASP MVC中做到這一點？

圖片范例

Answer 1

您可以偵聽復選框上的change事件，然后對服務器進行ajax調用以對數據庫進行更新，並讓您的操作方法返回響應。 您可以檢查此響應並隱藏/顯示任何所需內容。

您可能希望將用戶ID與復選框相關聯，因為您需要針對特定​​用戶進行此更新。您可以將用戶ID保留在復選框的html 5數據屬性中。 同樣，您似乎正在硬編碼復選框的ID值和循環中的跨度，這將為多個復選框產生相同的值。 id值應唯一 。 因此，讓我們從標記中刪除id屬性值，因為我們現在不使用它。

<div>
   <input type="checkbox" data-user="@item.UserId" class="ch" />
   <span class="msg">Done</span>
</div>

而您的JavaScript代碼將是

$(function(){

   $("input.ch").change(function(e){

      var _this=$(this);

      var userId=_this.data("user");
      var isChecked=_this.prop("checked");
      $.post("@Url.Action("Change","Home")", { isChecked :isChecked, userId:userId },
                                                                          function(re){
          if(re.status==="success")
          {
            _this.closest("div").find("span.msg").html(re.message); //update span content
            _this.remove();  // remove checkbox
          }
          else
          {
            alert("Failed to update!");               
          }
      });
   });    

});

我正在使用Url.Action幫助器方法來生成action方法的相對URL。 如果您將腳本包含在razor視圖中，則此代碼將起作用，但是，如果您的javascript代碼位於外部js文件中，則應構建應用程序根目錄的路徑，並通過此變量將其傳遞給外部js文件，如本說明中所述回答 。

假設您的HomeController中有一個Change操作方法，該方法接受isChecked值

[HttpPost]
public ActionResult Change(int userId, bool isChecked)
{

  try
  {
    // to do: using userId  and isChecked param value, update your db
     return Json( new { status="success", message="done"});
  }
  catch(Exception ex)
  {
     //to do : Log ex
     return Json( new { status="error", message="Error updating!"});
  }
}