javascript - ASP MVC 将值传递到模态窗口

Question

我有一个带有模式窗口的 View 。当我单击打开模式窗口时，我想将参数 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 执行类似的操作在模态中