两个模态弹出窗口；传递 id

Question

编辑：

我缩小了问题范围，发现如果我有：没有 MVC RAZOR 的纯输入标签，那么它会按预期工作

<input type="text" class="hiddenid2" /> //WORKED

但如果我有：（不起作用）

 @Html.Editor("id", "", new { htmlAttributes = new { @class = "hiddenId2" } })

或

 @Html.Editor("id", "", new { @class = "hiddenId2"  })

那就不行了

更新结束

逐行检查后，这让我发疯，一切似乎都是正确的，但我不确定我还需要在这里做什么。

我遇到的问题是：

我将 Id 传递给模式弹出窗口，所以我有两个具有不同 ID 和 class 名称的模式弹出窗口。第一个模态弹出窗口有效，它确实将 Id 传递给模态弹出窗口，但第二个模态弹出窗口不传递 id。

第一个模态：

//查看Link

<a href="/Home/Employee/@item.Id" data-id="@item.Id" 
data-toggle="modal" data-target="#myModal" 
class="modalLink">Load Employee</a>

查看：

@using (Html.BeginForm("Employee", "Home", FormMethod.Post))
{

    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">Record</h4>
                </div>
                <div class="modal-body">
                 @Html.Hidden("id", "", new { @class = "hiddenid" })
                </div>
                <div class="modal-footer">
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
}

JQuery:

$(.modalLink").click(function () {
     var passedID = $(this).data('id');
     $('#id').val(passedID);
     $(".modal-body .hiddenid").val(passedID);
});

第二个模态：

//查看Link

<a href="/Home/Employer/@item.Id" data-id="@item.Id" 
data-toggle="modal" data-target="#myModal2" 
class="modalLink2">Load Employer</a>

查看：

@using (Html.BeginForm("Employer", "Home", FormMethod.Post))
{

    <div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">Record</h4>
                </div>
                <div class="modal-body">
                 @Html.Hidden("id", "", new { @class = "hiddenid" })
                </div>
                <div class="modal-footer">
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
}

JQuery:

$(.modalLink2").click(function () {
     var passedID = $(this).data('id');
     $('#id').val(passedID);
     $(".modal-body .hiddenid").val(passedID);
});

Answer 1

问题出在您的选择器上。两种模式都包含相同的 $(".modal-body .hiddenid").val(passedID);这将始终对第一个 .modal-body .hiddenid jquery 查找进行操作，并且这确实始终是第一个模态中的隐藏输入。

您可以通过更改第二个模态的 class 名称来执行快速修复。

这里有一个运行example on Codepen

Html:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<a href="/Home/Employee/@item.Id" data-id="id-number-one" 
data-toggle="modal" data-target="#myModal" 
class="modalLink">Load Employee</a>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">Record</h4>
                </div>
                <div class="modal-body">
                   <input type="text" class="hiddenid"/>
                </div>
                <div class="modal-footer">
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->




<br>
<a href="/Home/Employer/@item.Id" data-id="id-number-two" 
data-toggle="modal" data-target="#myModal2" 
class="modalLink2">Load Employer</a>

<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Record</h4>
      </div>
      <div class="modal-body">
        <input type="text" class="hiddenid2"/>
      </div>
      <div class="modal-footer">
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

JS:

$(".modalLink").click(function () {
    var passedID = $(this).data('id');
     $('#id').val(passedID);
     $(".modal-body .hiddenid").val(passedID);
});

$(".modalLink2").click(function () {
     var passedID = $(this).data('id');
     $('#id').val(passedID);
     $(".modal-body .hiddenid2").val(passedID);
});

Answer 2

@Ji_in_coding：帮助我缩小 id 未通过的原因，我能够同时提供 class and id

我可以通过添加 id 和 class

来修复

@Html.Hidden("id", "", new { @class = "hiddenid2", id = "hiddenid2" })

两个模态弹出窗口；传递 id

Two Modal popup; passing id

javascript

css

asp.net-mvc

jquery

bootstrap-modal