Html 表中只有第一行上的按钮起作用

我有一个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">&times;</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>

脚本管理
@DisplayNameFor（model=>model.scriptName）
@Html.DisplayNameFor（model=>model.logFileName）
@DisplayNameFor（model=>model.Active）
@DisplayNameFor（model=>model.AllowToRun）
@DisplayNameFor（model=>model.scriptdescription）
最后一轮
耗时
错误
重新运行
@foreach（模型中的var项目）
{
@DisplayFor（modelItem=>item.scriptName）
@DisplayFor（modelItem=>item.logFileName）
@DisplayFor（modeleItem=>item.Active）
@DisplayFor（modelItem=>item.AllowToRun）
@DisplayFor（modelItem=>item.scriptdescription）
@DisplayFor（modelItem=>item.lastRun）
@DisplayFor（modelItem=>item.TimeTake）
@如果（item.Errors==“无错误”）
{
@DisplayFor（modelItem=>item.Errors）
}
其他的
{
@DisplayFor（modelItem=>item.Errors）
}
&时代；
@Html.DisplayFor（modelItem=>item.ErrorList）
}
$（文档）.ready（函数（）{
$（“#btnRun”）。单击（函数（）{
$.getJSON（'@Url.Action（“RunScript”），{scriptId:'4'}，函数（数据）{
控制台日志（数据）；
//$（“#运行”）.val（数据）；
});
});
});
//获取模态
var modal=document.getElementById（'myModal'）；
//获取打开模式对话框的按钮
var btn=document.getElementById（“myBtn”）；
//获取关闭模态的元素
var span=document.getElementsByClassName（“关闭”）[0]；
//当用户单击该按钮时，打开模式对话框
btn.onclick=函数（）{
modal.style.display=“块”；
}
//当用户单击（x）时，关闭模式对话框
span.onclick=函数（）{
modal.style.display=“无”；
}
//当用户单击模式之外的任何位置时，将其关闭
window.onclick=函数（事件）{
如果（event.target==模态）{
modal.style.display=“无”；
}
}
$（'.modal'）。单击（函数（）{
$（“#我的对话框”）.load（this.href，函数（）{
$（this.dialog（'open'）；
});
返回false；
});

---

`

按钮id不是唯一的。生成一个唯一的id，如下所示，它应该是确定的

我还将使用Jquery和css选择器调用post

 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">&times;</span>
                 <p style="line-break:strict">@Html.DisplayFor(modelItem => item.ErrorList)</p>
             </div>
         </div>

        itemCount++;
    }

---

希望有帮助。

按钮id不是唯一的。生成一个唯一的id，如下所示，它应该是确定的

我还将使用Jquery和css选择器调用post

 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">&times;</span>
                 <p style="line-break:strict">@Html.DisplayFor(modelItem => item.ErrorList)</p>
             </div>
         </div>

        itemCount++;
    }

---

希望有帮助。

您当前的代码正在为循环的每个迭代生成一个按钮，该按钮的Id为

btnRun

。这意味着，如果您的模型是10个项目的集合，那么您的代码将生成10个按钮，所有按钮都具有相同的

Id

值

元素的“Id”应该是唯一的。当前代码生成的标记无效，因为它生成多个相同

Id

属性值的元素

jquery选择器表达式

$（“#btnRun”）

将返回与选择器表达式匹配的第一项。在这种情况下，即使您单击了另一行中的按钮，也将获得第一项

您可以删除按钮上的

Id

属性，并使用更通用的jquery选择器（例如：css类选择器/名称选择器/数据属性选择器等）连接单击事件

下面是一个示例，我将向按钮添加一个html5数据属性，并将url与（路由值）一起存储到

RunScript

action方法中

<td>
    <button  data-url="@Url.Action("RunScript", "Script",
                                     new {scriptId = item.scriptId})"> Run Script</button>
</td>

由于我们在razor视图中使用了

Url.Action

helper来生成Url，现在您的javascript代码是c

$(function () {

    $("button[data-url]").click(function(e) {
        e.preventDefault();
        var url = $(this).data("url");
        $.getJSON(url).done(function(data) {
            console.log(data);
        });
    });

});