我有一个MVC应用程序，它返回模型中的项目，并且每个行的表格上都添加了一个按钮，问题是只有第一个完美地工作的项目才能调用方法。我没有运气就完成了我的研究。这是我视图中的代码。有什么我做错了吗？请帮忙。
<section class="container">
<section class="panel">
<section class="panel-heading panel-border-danger ">
<h2 class="panel-heading-text ">
<i></i> Script Management
</h2>
</section>
<link href="~/Content/Site.css" rel="stylesheet" />
<section >
<table class="table table-responsive" id="tblScripManager">
<thead>
<tr>
<th>
@Html.DisplayNameFor(model => model.scriptName)
</th>
<th>
@Html.DisplayNameFor(model => model.logFileName)
</th>
<th>
@Html.DisplayNameFor(model => model.Active)
</th>
<th>
@Html.DisplayNameFor(model => model.AllowToRun)
</th>
<th>
@Html.DisplayNameFor(model => model.scriptdescription)
</th>
<th> Last Run </th>
<th> Time Taken</th>
<th> Errors </th>
<th> Re-Run </th>
</tr>
</thead>
<tbody>
@foreach (var item in Model)
{
<tr>
<td>
@Html.DisplayFor(modelItem => item.scriptName)
</td>
<td>
@Html.DisplayFor(modelItem => item.logFileName)
</td>
<td>
@Html.DisplayFor(modelItem => item.Active)
</td>
<td>
@Html.DisplayFor(modelItem => item.AllowToRun)
</td>
<td>
@Html.DisplayFor(modelItem => item.scriptdescription)
</td>
<td>
@Html.DisplayFor(modelItem => item.lastRun)
</td>
<td>
@Html.DisplayFor(modelItem => item.timeTaken)
</td>
@if (item.Errors == "No Errors")
{
<td>@Html.DisplayFor(modelItem => item.Errors)</td>
}
else
{
<td style="cursor:pointer"> <a id="myBtn" class="btn-group">@Html.DisplayFor(modelItem => item.Errors)</a></td>
}
<td>
<input id="btnRun" type="button" value="Run Script" onclick="location.href='@Url.Action("Script", "RunScript")?id=' + document.getElementById('@item.scriptId').value" />
</td>
</tr>
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content" style="padding-top: 10px; padding-left: 10px; padding-right:30px; left: 50px; top: 70px; width: 70%; height: 50%; ">
<span class="close">×</span>
<p style="line-break:strict">@Html.DisplayFor(modelItem => item.ErrorList)</p>
</div>
</div>
}
</tbody>
</table>
</section>
</section>
</section>
<script>
$(document).ready(function () {
$("#btnRun").click(function () {
$.getJSON('@Url.Action("RunScript")', { scriptId: '4' }, function (data) {
console.log(data);
//$("#run").val(data);
});
});
});
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function () {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function () {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function (event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
$('.modal').click(function () {
$('#my-dialog').load(this.href, function () {
$(this).dialog('open');
});
return false;
});
</script>
`
答案 0 :(得分：1)
按钮ID不是唯一的。生成一个如下所示的唯一ID，它应该没问题。
我还会使用Jquery和css选择器调用帖子。
var itemCount = 0;
@foreach (var item in Model)
{
<tr>
<td>
@Html.DisplayFor(modelItem => item.scriptName)
</td>
<td>
@Html.DisplayFor(modelItem => item.logFileName)
</td>
<td>
@Html.DisplayFor(modelItem => item.Active)
</td>
<td>
@Html.DisplayFor(modelItem => item.AllowToRun)
</td>
<td>
@Html.DisplayFor(modelItem => item.scriptdescription)
</td>
<td>
@Html.DisplayFor(modelItem => item.lastRun)
</td>
<td>
@Html.DisplayFor(modelItem => item.timeTaken)
</td>
@if (item.Errors == "No Errors")
{
<td>@Html.DisplayFor(modelItem => item.Errors)</td>
}
else
{
<td style="cursor:pointer"> <a id="myBtn" class="btn-group">@Html.DisplayFor(modelItem => item.Errors)</a></td>
}
@{var buttonid = "btnRun" + itemCount};
<td>
<input id="@buttonid" type="button" class="MyButton" value="Run Script" data-scriptid="@item.scriptId"/>
</td>
</tr>
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content" style="padding-top: 10px; padding-left: 10px; padding-right:30px; left: 50px; top: 70px; width: 70%; height: 50%; ">
<span class="close">×</span>
<p style="line-break:strict">@Html.DisplayFor(modelItem => item.ErrorList)</p>
</div>
</div>
itemCount++;
}
创建一个名为“MyButton”的类或任何你想要的类。然后使用JQuery捕获单击。从数据属性中提取脚本ID并发布。
$(document).on('click', '.MyButton', function () {
var scriptid = $(this).data("scriptid");
$.ajax({
type: "POST",
url: "/Script/RunScript/",
data: {id:scriptid}
});
});
希望有所帮助。
答案 1 :(得分：0)
对于循环的每次迭代，您当前的代码正在生成一个btnRun为Id的按钮。这意味着，如果您的模型是10个项目的集合，那么您的代码将生成10个按钮，所有按钮都具有相同的Id值。
元素ID＆＃39;应该是独特的。当前代码生成的标记无效，因为它生成多个元素相同的Id属性值。
jquery选择器表达式$("#btnRun")将返回与选择器表达式匹配的第一个项目。在这种情况下，即使您单击另一行中的按钮，也会获得第一个项目。
您可以删除按钮上的Id属性，并使用更通用的jquery选择器连接click事件（例如：css类选择器/名称选择器/数据属性选择器等）
这是一个示例，我将html5数据属性添加到按钮，并将带有（路由值）的url存储到RunScript操作方法。
<td>
<button data-url="@Url.Action("RunScript", "Script",
new {scriptId = item.scriptId})"> Run Script</button>
</td>
您将点击事件连接到具有data-url属性的输入元素
$(function () {
$("button[data-url]").click(function(e) {
e.preventDefault();
var url = $(this).data("url");
$.getJSON(url).done(function(data) {
console.log(data);
});
});
});
由于我们在剃刀视图中使用了Url.Action助手来生成网址，现在您的javascript代码也可以轻松移动到外部js文件中。
我个人更喜欢