Javascript/AJAX 操作无法在 @foreach 循环中的每个实例上运行 (MVC C#)

Question

我在 @foreach 循环中对 ahrefs 进行了 3 个 javascipt/AJAX 调用。

本质上，在网格中为“设备”表中的每一行创建 4 个按钮。

脚本正在发送到 MVC Controller 。它对于第一组按钮工作正常，但对于第二组按钮却不起作用？!我确信我错过了一些简单的事情!一些建议将不胜感激!谢谢安东

 @model Alfred.Models.DashboardModel

@{ var IconColour = "";}
<div class="content">
@foreach (var Location in Model.Location)
{
    <section id="@Location.Section">
        @foreach (var Device in Model.Devices)
            {
                if (Device.LocationId == Location.ID)
                {
                    if (Device.StateId == 1)
                    { IconColour = Device.IconColour; }
                    else
                    { IconColour = "#A0A0A0"; }
                    <div class="mediabox">
                        <div align="center">
                            <a id="UpdateState" data-deviceid="@Device.ID"><i class="@Device.Icon" style="color: @IconColour"></i></a>
                            <div class="mediaboxbtn">
                                <div class="mediaboxbtnl">
                                    <a id="IncreaseLevel" data-deviceid="@Device.ID"><i class="@Device.Button1" style="color: @Device.Button1Colour"></i></a>
                                </div>
                                <div class="mediaboxbtnm">
                                    @Device.Level
                                </div>
                                <div class="mediaboxbtnr">
                                    <a id="DecreaseLevel" data-deviceid="@Device.ID"><i class="@Device.Button3" style="color: @Device.Button3Colour"></i></a>
                                </div>
                            </div>
                        </div>
                        <div align="center"><h3>@Device.Name</h3></div>
                    </div>
            }
        }
    </section>
}
</div><!-- /content -->
@section scripts {
<script type="text/javascript">
    $(document).ready(function () {
    $('#UpdateState').click(function () {
        var url = "/Dashboard/ChangeState";
        var DeviceId = $(this).attr('data-deviceid');
        console.log('Data ' + DeviceId);
        $.post(url, { DeviceId }, function (data)
        {
            window.location.reload ();
        });
    })

$('#IncreaseLevel').click(function () {
    var url = "/Dashboard/IncreaseLevel";
    var DeviceId = $(this).attr('data-deviceid');
    console.log('Data ' + DeviceId);
        $.post(url, { DeviceId }, function (data)
        {
            window.location.reload ();
        });
})

$('#DecreaseLevel').click(function () {
  var url = "/Dashboard/DecreaseLevel";
  var DeviceId = $(this).attr('data-deviceid');
  console.log('Data '+ DeviceId);
     $.post(url, { DeviceId }, function (data) {
        window.location.reload();
         });
        })

})
</script>
}

Answer 1

由于重复的 id 属性和 $('#UpdateState') 选择器，您生成的无效 html 将仅返回带有 id= 的第一个元素“更新状态”。而是使用类名。你的 html 应该是

<a class="UpdateState" data-deviceid="@Device.ID"><i class="@Device.Icon" style="color: @IconColour"></i></a>

并将脚本更改为

$('.UpdateState').click(function () {
    var url = '@Url.Action("ChangeState", "Dashboard")'; // don't hard code your url's
    var DeviceId = $(this).data('deviceid'); // use the data method
    $.post(url, { DeviceId: DeviceId }, function (data) // correct way to pass the data assuming your method parameter is named DeviceId
    {
        ....
    });
})

但是，如果您只是重新加载整个页面，则使用 ajax 有点毫无意义，并且违背了使用 ajax 的全部目的。您尚未显示 Controller 代码，但假设您想要切换对象状态(真/假)，那么您的方法应该更新数据库并返回指示成功或其他情况的 JsonResult (例如 return Json(true) 或 return Json(null);) 然后你可以测试返回值并更新 DOM(例如，你可以切换类名来改变元素以直观地指示其当前状态)