向模态窗口传递值

ASP MVC Passing value into modal window

本文关键字：窗口 模态      更新时间：2023-09-26

我有这个视图与模态窗口。当我单击打开模态窗口时，我想将参数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>

您目前为您的集合中的每个项目生成一个模态，但给它一个id="myModal"，这是无效的html，意味着data-target="#myModal"只会打开第一个。将模态移到循环之外，这样你就只创建一个模态(同时也删除具有相同id属性的<h4 class="modal-title" id="myModal"></h4>元素)

然后将button 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做类似的事情

1。使用ID作为锚链接。
2.注意代码中的<a href='#' id='InstrumentIDLink'>Anchor Link Value=</a>行。它有Anchor Link Value=。当你打开模式，你可以看到Anchor Link Value=10320320，你也可以检查href。

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

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

仪器:

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

现在在控制器中你可以像

这样访问这个值
public ActionResult Action_Name(int id)
{
    //Do something
    return view();
}
相关文章：