只有第一行的按钮在 table 中起作用

Question

我有一个 MVC 应用程序，其中包含模型中的 returns 个项目，并且在 table 上为每一行添加了一个按钮，问题是只有第一个项目运行良好休息甚至不调用该方法。我没有运气就完成了我的研究。这是我认为的代码。我做错了什么吗？请帮忙

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

`

Answer 1

按钮 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++;
    }

创建一个名为 "MyButton" 的 class 或您想要的任何名称。然后使用 JQuery 捕获点击。从数据属性中提取脚本 ID 并 post 它。

$(document).on('click', '.MyButton', function () {

    var scriptid = $(this).data("scriptid");

    $.ajax({
        type: "POST",
        url: "/Script/RunScript/",
        data: {id:scriptid}
    });

});

希望对您有所帮助。

Answer 2

您当前的代码正在为循环的每次迭代生成一个带有 btnRun 作为 Id 的按钮。这意味着，如果您的模型是 10 个项目的集合，您的代码将生成 10 个按钮，所有按钮都具有相同的 Id 值。

元素的 ID' 应该是唯一的。您当前代码生成的标记无效，因为它生成了多个元素相同的 Id 属性值。

jquery 选择器表达式 $("#btnRun") 将 return 您第一个匹配选择器表达式的项目。在这种情况下，即使您单击不同行中的按钮，您也会获得第一项。

您可以删除按钮上的 Id 属性，并使用更通用的 jquery 选择器（例如：css class selector/name 选择器/数据属性选择器等)

这是一个示例，其中我将 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);
        });
    });

});

由于我们在 razor 视图中使用了 Url.Action 帮助程序来生成 url，现在您的 javascript 代码也可以轻松移动到外部 js 文件。

个人喜好

只有第一行的按钮在 table 中起作用

Only the button on the first row is working in a table

html

asp.net-mvc

c#-3.0