javascript - asp.net View 中的模态框无法正常工作

Question

在我的强类型 View 中，我正在循环访问来自数据库的对象列表。这些对象中的每一个都显示在一个大屏幕中，其中有一个按钮“之前扮演过 Angular 色”。单击后，模式将打开，我想在输入框中输入一些数据，并通过 ajax 调用将其保存到我的数据库中。我想要输入的数据的一部分是循环中每个对象具有的唯一 ID。到目前为止，通过我的代码，我成功地通过单击获取了第一个对象的 id，但是当我单击其余对象的按钮时，没有任何反应。

这是我认为的脚本:

    <script type="text/javascript">
  $(document).ready(function () {

    $(function () {

        var idW;
    $('#mdl').on('click', function () {
       var parent = $(this).closest('.jumbotron');
       var name = parent.find('input[name="mdlname"]').val();
       var id = parent.find('input[name="mdlwrid"]').val(); 
       var idW = id;

       console.log(idW);
       var titleLocation = $('#myModal').find('.modal-title');
       titleLocation.text(name);

       $('#myModal').modal('show');

     });
});

    $('#mdlSave').on('click', function () {
        console.log('x');
        addPastRoleAjax();

    });
    function addPastRoleAjax() {
        $.ajax({
            type: "POST",
            url: '@Url.Action("addPastRole", "WorkRoles")',
            dataType: "json",
            data: {

                wrId: idW,
                dateStart: $("#wrdateStart").val(),
                dateEnd: $("#wrknamedateEnd").val()


            },
            success: successFunc
        });

        function successFunc(data, status) {


            if (data == false) {
                $(".alert").show();
                $('.btn').addClass('disabled');

                //$(".btn").prop('disabled', true);
            }

        }


</script>

循环:

    @foreach (var item in Model)
{

    <div class="jumbotron">
        <input type="hidden" name="mdlwrid" value="@item.WorkRoleId" />
        <input type="hidden" name="mdlname" value="@item.RoleName" />

        <h1>@Html.DisplayFor(modelItem => item.RoleName)</h1>
        <p class="lead">@Html.DisplayFor(modelItem => item.RoleDescription)</p>
        <p> @Html.ActionLink("Focus on this one!", "addWorkRoleUser", new { id = item.WorkRoleId }, new { @class = "btn btn-primary btn-lg" })</p>
        <p> <button type="button" id ="mdl" class="btn btn-default btn-lg" data-toggle="modal" data-target="#myModal">Had role in the past</button> </p>
    </div>

}

模态:

<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title"></h4>
        </div>
        <div class="modal-body">
            <p>Some text in the modal.</p>
            <input id="wrdateStart" class='date-picker' />
            <input id="wrknamedateEnd" class='date-picker' />

        </div>
        <div class="modal-footer">
            <button type="button" id="mdlSave" class="btn btn-default" data-dismiss="modal">Save</button>
        </div>
    </div>
</div>

Answer 1

您的问题出在以下代码中:

   @foreach (var item in Model)
   {
        <div class="jumbotron">
           <input type="hidden" name="mdlwrid" value="@item.WorkRoleId" />
           <input type="hidden" name="mdlname" value="@item.RoleName" />
           <h1>@Html.DisplayFor(modelItem => item.RoleName)</h1>
           <p class="lead">@Html.DisplayFor(modelItem => item.RoleDescription)</p>
           <p> @Html.ActionLink("Focus on this one!", "addWorkRoleUser", new { id = item.WorkRoleId }, new { @class = "btn btn-primary btn-lg" })</p>
           <p> <button type="button" id ="mdl" class="btn btn-default btn-lg" data-toggle="modal" data-target="#myModal">Had role in the past</button> </p>
       </div>
  }

您使用了 foreach 循环，并在其中创建了 具有相同 id 的按钮元素。

<button type="button" id ="mdl" class="btn btn-default btn-lg" data-toggle="modal" data-target="#myModal">Had role in the past</button>

因此，foreach 让您可以创建许多具有相同 id 的按钮。这是错误的，这就是为什么你会出现这种行为(只有第一个按钮起作用)。解决方案:改用类。