Javascript/AAJAX操作没有在@foreach循环(MVC C#)中的每个实例上运行

本文关键字：运行 实例 MVC 操作 AAJAX 循环 @foreach Javascript | 更新日期: 2023-09-27 18:21:53

我有3个javascipt/AAJAX调用，它们是在@foreach循环中对ahref进行的。

从本质上讲，"设备"表中的每一行都会在网格中创建4个按钮。

脚本正在发布到MVC控制器。它对第一组按钮很有效，但对第二组按钮什么都不起作用？！我确信我错过了一些简单的东西！一些建议将不胜感激！感谢Anton

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

Javascript/AAJAX操作没有在@foreach循环(MVC C#)中的每个实例上运行

由于id属性和$('#UpdateState')选择器重复，您生成的无效html将只返回具有id="UpdateState"的第一个元素。而是使用类名。你的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的全部目的。您尚未显示控制器代码，但是假设您想要切换对象状态（true/false），那么您的方法应该是更新数据库并返回一个指示成功或否的JsonResult（例如return Json(true)或return Json(null);）。然后您可以测试返回值并更新DOM（例如，您可以切换类名以更改元素的颜色，从而直观地指示其当前状态）

相关文章：