使用Ajax將消息的狀態從未讀更新為已讀-MVC

Question

我正在嘗試從未讀到讀取的每個消息的更新狀態，並且當我單擊列表中的第一條消息的按鈕時更新狀態將起作用，但是當我單擊列表中的第二條或第三條消息的按鈕時更新狀態不起作用上班。 任何人都可以請我幫忙或指出正確的方向！

提前致謝 ：）

視圖：

 <div class="content">
    @{ int i = 0;}
    foreach (var item in Model.Comment_Lists.GroupBy(l => l.MSG).Select(g => .First()))    {
            if (item.se == "Kunde")
            {
              <div  class="bs-callout bs-callout-success">
              <div class="col-xs-3 text-right">
              <button data-toggle="collapse"  data-target="#ShowMSG_@i" id="btnChangestu" class="btn btn-sm btn-success btn-icon"></button></div>
              <span class="text-muted"><small> @item.Date.ToString("dd/MMMM/yyy")</small></span><br />
              <span class="text-muted"><small> @item.MSGType</small></span>
              <input type="hidden" name="IDMSG" id="IDMSG" value="@item.id" />
              <input type="hidden" name="ChangeStu" id="ChangeStu" value="Read Message" />
              <div class="collapse" id="ShowMSG_@i">
                  <p><span>@item.MSG </span></p>
              </div>
              </div>
              }
                i++;
           }
         </div>

JavaScript的：

<script>

    $(document).ready(function () {    
        $("#btnChangestu").click(function (e) {
            e.preventDefault();    
            $.ajax({
                type: "POST",
                url: "/Account/UpdateMSGStatus",
                data: {
                    IDMSG: $("#IDMSG").val(),
                    ChangeStu: $("#ChangeStu").val()
                },
                dataType: 'json',
                success: function (result) {    
                    if (!$.trim(result)) {
                        alert("What follows is blank: ");
                    }
                    else {                            
                        result.ID = IDMSG;
                        result.MSGType = ChangeStu;    
                        console.log("Send");    
                    }    
                },
                error: function () {
                    console.log('something went wrong - debug it!');
                }
            })    
        });
    });
</script>

控制器：

public JsonResult UpdateMSGStatus(int? IDMSG , string ChangeStu)
{
    var u = db.Besked.Where(a => a.ID == IDMSG).FirstOrDefault();
    if (u != null)
    {
        u.MSGType = ChangeStu;
        u.ID = IDMSG;
        db.SaveChanges();
    }
    return Json(u, JsonRequestBehavior.AllowGet);
}

Answer 1

重復的id屬性是無效的html，並且您的jQuery選擇器（ IDMSG: $("#IDMSG").val()等）將只會選擇具有該id的第一個元素。

在這種情況下，沒有理由使用隱藏的輸入。 而是將這些值作為data屬性進行廣告，然后在.click()事件中進行讀取，然后為按鈕使用class名而不是id 。

請注意，我只包括IDMSG ，不ChangeStu既然你硬編碼的價值

<button data-id="@item.id" class="btn btn-sm btn-success btn-icon edit" data-toggle="collapse" data-target="#ShowMSG_@i></button>

然后腳本變成

$('.edit.).click(function (e) {
    e.preventDefault(); 

    // read the value
    var id = $(this).data('id');

        $.ajax({
            type: "POST",
            url: '@Url.Action("UpdateMSGStatus", "Account"), // don't hard code urls
            data: {
                IDMSG: id,
                ChangeStu: 'Read Message' 
            },
            dataType: 'json',
            success: function (result) {