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

【问题标题】：Modal in asp.net view not working properlyasp.net 视图中的模态无法正常工作
【发布时间】：2017-06-14 23:07:07
【问题描述】：

在我的强类型视图中，我正在循环访问来自数据库的对象列表。这些对象中的每一个都显示在一个大屏幕中，其中有一个按钮“以前曾担任过角色”。单击模式打开时，我想在输入框中输入一些数据并通过 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>

【问题讨论】：

标签： javascript jquery ajax asp.net-mvc twitter-bootstrap

【解决方案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 的按钮。这是错误的，这就是为什么你会出现这种行为（只有第一个按钮有效）。解决方案：改用类。

【讨论】：