Javascript/AJAX操作在@foreach循环（MVC#）中的每个实例上都不起作用

我有3个javascipt/AJAX调用，它们在@foreach循环中的ahrefs上进行

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

脚本正在发布到MVC控制器。对于第一组按钮，它可以正常工作，但对于第二组按钮，它却不起作用？！我肯定我错过了一些简单的东西！一些建议将不胜感激！谢谢安东

 @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>
}

@model Alfred.Models.DashboardModel
@{var IconColour=”“；}
@foreach（Model.Location中的var位置）
{
@foreach（Model.Devices中的var设备）
{
if（Device.LocationId==Location.ID）
{
如果（Device.StateId==1）
{IConColor=Device.IConColor；}
其他的
{IConColor=“#A0”；}
@设备层
@设备名称
}
}
}
@节脚本{
$（文档）.ready（函数（）{
$（'#UpdateState'）。单击（函数（）{
var url=“/Dashboard/ChangeState”；
var DeviceId=$（this.attr（'data-DeviceId'）；
console.log（'Data'+DeviceId）；
$.post（url，{DeviceId}，函数（数据）
{
window.location.reload（）；
});
})
$（'#IncreaseLevel'）。单击（函数（）{
var url=“/Dashboard/IncreaseLevel”；
var DeviceId=$（this.attr（'data-DeviceId'）；
console.log（'Data'+DeviceId）；
$.post（url，{DeviceId}，函数（数据）
{
window.location.reload（）；
});
})
$（“#降低级别”）。单击（函数（）{
var url=“/Dashboard/DecreaseLevel”；
var DeviceId=$（this.attr（'data-DeviceId'）；
console.log（'Data'+DeviceId）；
$.post（url，{DeviceId}，函数（数据）{
window.location.reload（）；
});
})
})
}

由于重复的

id

属性和

$（'#UpdateState'）

选择器，您生成的html无效。选择器将只返回带有

id=“UpdateState”

的第一个元素。而是使用类名。你的html应该是

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

---

然而，如果您的用户只是想重新加载整个页面，那么使用ajax就有点毫无意义，并且违背了使用ajax的全部目的。您尚未显示控制器代码，但假设您希望切换对象状态（true/false），则您的方法应更新数据库并返回一个

JsonResult

，指示是否成功（例如

返回Json（true）

或

返回Json（null）；

）然后，您可以测试返回值并更新DOM（例如，您可以切换类名来改变元素的颜色，以直观地指示其当前状态）

由于重复的

id

属性，您生成的html无效。改用类名，然后执行

window.location.reload（）时，使用ajax绝对没有意义-斯蒂芬是对的
然后
$（'.UpdateState'）。单击（函数（）{}）收听所有按钮。Stephen。感谢您的回复，您的建议非常有效！你是绝对正确的，只是刷新页面是没有意义的，我添加了这个作为中间步骤，以允许我测试控制器逻辑，并确保我的状态在所有正确的条件下发生变化（基本上是为了节省我大量刷新）。我刚刚了解了AJAX和JSON，但是我正在我的控制器中捕获一个结果，我完全计划返回JSON结果并使用它来指示一个已更改的状态（可能使用Knockout？），我真的看不出使用Knockout有什么意义。另外，还不太清楚为什么您有一个属性
IConColor
。假设您有两种颜色，比如红色和绿色来表示状态，那么从样式设置中使用css会更容易，在成功回调中，使用
.toggleClass（）
函数属性IConColor从数据库中的设备表中读取。不同的设备具有不同的IConColor。我正在使用IConColor向用户指示设备已打开。因此，例如，如果设备是灯光，则IConColor设置为黄色，如果其扬声器，则IConColor设置为黑色，则可能有多达30/40个不同的设备，从而有不同的颜色。关闭值始终为灰色。我还没有遇到过.toggleClass（）（这是我第一个正确的编码项目），所以我将对此进行研究。谢谢，好的。我现在明白了。您只需在css文件中添加一个样式，例如
.off{color:grey；}
，然后如果使用
$（…）.toggleClass（'off'）
，它将添加该类并将颜色更改为灰色。如果随后再次使用
.toggleClass（'off'）
，它将删除该类，并且颜色将恢复为其原始值。
$('.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
    {
        ....
    });
})