使用 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");    

                    }    

                },

   

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) {&nbsp; &nbsp; e.preventDefault();&nbsp;&nbsp; &nbsp; // read the value&nbsp; &nbsp; var id = $(this).data('id');&nbsp; &nbsp; &nbsp; &nbsp; $.ajax({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type: "POST",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; url: '@Url.Action("UpdateMSGStatus", "Account"), // don't hard code urls&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; IDMSG: id,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ChangeStu: 'Read Message'&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; dataType: 'json',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; success: function (result) {&nbsp; &nbsp;