Question

编辑：

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

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

但如果我有:(不起作用）

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

或

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

然后它不起作用

END UPDATE

这让我疯狂地经过一行一行，一切似乎都正确，但我不确定我还需要做些什么呢。

我遇到的问题是：

我正在将Id传递给模态弹出窗口，所以我有两个不同的Ids＆amp;模式弹出窗口。班级名称。第一个模态弹出窗口工作，它确实将Id传递给模态弹出窗口，但第二个模态弹出窗口不传递id。

第一模态：

//查看链接

<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);
});

第二模态：

//查看链接

<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

问题出在您的选择器上。两个模态都包含相同的$（＆＃34; .modal-body .hiddenid＆＃34;）。val（passedID）;这将始终在第一个.modal-body .hiddenid jquery发现的情况下运行，这确实是第一个模态中的隐藏输入。

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

HEre是一个正在运行的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和类来修复

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

两个莫代尔弹出;传递id

2 个答案: