Javascript操作并不能在@foreach循环(MVC C#)中的每个实例上运行
Javascript操作并不能在@foreach循环(MVC C#)中的每个实例上运行
提问于 2015-11-12 21:13:31
我有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>
}回答 1
Stack Overflow用户
回答已采纳
发布于 2015-11-12 21: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 (例如，您可以切换一个类名以更改元素的颜色以直观地指示其当前状态)。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/33681467
复制相关文章
相似问题
腾讯云开发者
