asp.net 視圖中的模態無法正常工作

Question

在我的強類型視圖中，我正在遍歷來自數據庫的對象列表。 這些對象中的每一個都顯示在一個超大屏幕中，其中有一個按鈕“之前有過角色”。 單擊模式打開，我想在輸入框中輸入一些數據並通過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按鈕。 那是錯誤的，這就是為什么你會得到這種行為（只有第一個按鈕起作用）。 解決方案：改用類。