Question

我有一个模态窗口的视图。当我点击打开模态窗口时，我想将参数item.InstrumentId传递到模态窗口，以便我可以点击链接，将我重定向到属于该特定工具的页面。 InstrumentId。我在下面成功地将InstrumentId传递到窗口，但问题是我不知道如何将该值传递到Html.ActionLink。关于如何进行的任何提示？

   @foreach (var item in Model)
    {
        <li class="list-group-item">
            <div class="row">
                <div class="col-md-4">
                    <h4>
                        Instrument: @item.InstrumentId
                    </h4>
                </div>
                <div class="col-md-4">
                    @item.Type
                </div>
                <div class="col-md-4">
                    <!-- Button trigger modal -->
                    <button type="button" class="open-dialog btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal" data-id="@item.InstrumentId">
                        View details
                    </button>

                    <script type="text/javascript">
                        $(document).on("click", ".open-dialog", function() {
                            var modalId = $(this).data('id');
                            $(".modal-dialog #myModal").val(modalId);
                        })
                    </script>
                    <!-- Modal -->
                    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                        <div class="modal-dialog" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                    <h4 class="modal-title" id="myModal"></h4>
                                </div>
                                <div class="modal-body">
                                    @item.Message
                                    <br/> <br/> <br/>
                                    <div class="row">
                                        <div class="col-md-4">
                                            Slide: <a href="/Home/Slide" class="Button">1234500323</a>
                                        </div>
                                        <div class="col-md-4">
                                            Instrument: @Html.ActionLink(item.InstrumentId, "Instrument", new {instrumentid = item.InstrumentId})
                                        </div>
                                        <div class="col-md-4">
                                            Checked: @item.Checked
                                        </div>
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                    <button type="button" class="btn btn-primary">Save changes</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </li>
    }

更新

<div>
<ul class="list-group">
    @foreach (var item in Model)
    {
        <li class="list-group-item">
            <div class="row">
                <div class="col-md-4">
                    <h4>
                        Instrument: @item.InstrumentId
                    </h4>
                </div>
                <div class="col-md-4">
                    @item.Type
                </div>
                <div class="col-md-4">
                    <!-- Button trigger modal -->
                    <button type="button" class="open-dialog btn btn-primary btn-sm" data-url="@Url.Action("Instrument", new {instrumentid = @item.InstrumentId})">
                        View details
                    </button>

                    <script type="text/javascript">
                        $(document).on("click", ".open-dialog", function() {
                            $('#details').attr('href', $(this).data('url')); // update the links url
                        });
                    </script>
                </div>
            </div>
        </li>
    }
</ul>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            </div>
            <div class="modal-body">
                @*@item.Message*@
                <br /> <br /> <br />
                <div class="row">
                    <div class="col-md-4">
                        Slide: <a href="/Home/Slide" class="Button">1234500323</a>
                    </div>
                    <div class="col-md-4">
                        Instrument: <a id="details" href="#">Details</a>
                    </div>
                    <div class="col-md-4">
                        Checked: @*@item.Checked*@
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

Answer 1

您当前为集合中的每个项目生成了一个模态，但是为其提供了id="myModal"这是无效的html，意味着data-target="#myModal"只会打开第一个。将模态移动到循环外部，这样您只创建一个模式（并删除同样具有<h4 class="modal-title" id="myModal"></h4>属性的id元素）

然后将按钮html更改为

<button type="button" class=".." .. data-url="@Url.Action("Instrument", new { instrumentid = item.InstrumentId })">

并将模态中的html更改为

Instrument: <a id="details" href="#">Details</a>

然后将脚本更改为

$(document).on("click", ".open-dialog", function() {
    $('#details').attr('href', $(this).data('url')); // update the links url
})

旁注：您可能希望在模态

中使用Checked: @item.Checked执行类似的操作

Answer 2

1.使用ID作为Anchor Link 2.在代码中注明此行<a href='#' id='InstrumentIDLink'>Anchor Link Value=</a>。它有Anchor Link Value=。当您打开模态时，您可以看到Anchor Link Value=10320320，也可以检查href。

＆＃13;

$('#myModal1').on('show.bs.modal', function(e) {
  var modalId = $(e.relatedTarget).data('id');
  $('#InstrumentIDLink').attr('href', 'url+'+ modalId)
  $('#InstrumentIDLink').text('Anchor Link Value='+ modalId);

})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.css" rel="stylesheet" />
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="container">
  <h3>Modal Example</h3>
  <!-- Button to trigger modal -->
  <div> <a href="#myModal1" class='open-dialog' role="button" 
           class="btn" data-toggle="modal" data-id='10320320'>Launch Modal (10320320)</a><br/>
    <a href="#myModal1" class='open-dialog' role="button" 
           class="btn" data-toggle="modal" data-id='10320321'>Launch Modal (10320321)</a>
  </div>
  <!-- Modal -->
  <div id="myModal1" class="modal hide" tabindex="-1" role="dialog">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    </div>
    <div class="modal-body"> <a href='#' id='InstrumentIDLink'>Anchor Link Value=</a>

    </div>
    <div class="modal-footer">
      <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
      <button class="btn btn-primary">Save changes</button>
    </div>
  </div>
</div>

＆＃13;

从bootstrap 3+开始，您可以使用e.relatedTarget来获取触发模态的元素

Answer 3

仪器：

@Html.ActionLink("Link_Text", "Action_Name", "Controller_Name", new { id=item.InstrumentId})

现在在您的COntroller中，您可以像

一样访问此值

public ActionResult Action_Name(int id)
{
    //Do something
    return view();
}

ASP MVC将值传递到模态窗口

3 个答案: