Question

在我的强类型视图中，我循环遍历来自数据库的对象列表。这些对象中的每一个都在一个jumbotron中呈现，它有一个按钮“之前有过角色”。点击模式打开，我想在输入框中输入一些数据，并通过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循环，其中create个按钮元素具有相同的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的按钮。这是错误的，这就是为什么你得到这种行为（只有第一个按钮工作）。解决方案：改为使用类。

asp.net视图中的模态无法正常工作

1 个答案: