问Javascript操作并不能在@foreach循环(MVC C#)中的每个实例上运行
EN

Stack Overflow用户

提问于 2015-11-12 13:13:31

回答 1查看 104关注 0票数 1

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

实际上，在网格中为"device“表中的每一行创建了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>
}

jquery

ajax

asp.net-mvc

javascript

回答 1

Stack Overflow用户

回答已采纳

发布于 2015-11-12 13:58:27

生成无效的html是因为重复的id属性和$('#UpdateState')选择器只返回带有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 (例如，您可以切换一个类名以更改元素的颜色以直观地指示其当前状态)。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/33681467

复制

c# 中for和foreach循环的区别

javascript 编程算法 c#

　　　　（2）效率比for要高(C#是强类型检查,for循环对于数组访问的时候,要对索引的有效值进行检查)

vv彭

2020/10/27

4.9K0