Question

我已经介绍了许多关于使用Boostrap模式显示MVC部分视图的博客和文章。似乎我完全可以看到我所查看的材料，但它仍然没有显示模态。我只需要在模态中显示具有相册细节的局部视图。当我通过浏览器加载URL时，控制器正常工作。

这是显示模式的索引HTML 代码：

<tbody>
            @foreach( var album in Model.Albums)
            {
                <tr data-toggle="modal" data-target="#albumModal" data-url="@Url.Action("Album", new { id = album.Id })">
                    <td>@album.Title</td>
                    <td>@album.Artist</td>
                    <td>@album.Genre</td>
                    <td>@album.Year</td>
                </tr>
            }
        </tbody>

部分视图

<div class="modal fade" id="albumModal" tabindex="-1" role="dialog" aria-labelledby="albumModalLabel">
<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="albumModalLabel">Album Details</h4>
        </div>
        <div class="modal-body">
            <div class="row">
                <div class="col-md-4">
                    <div class="row">
                        <label>Album<input class="form-control" type="text" id="title" /></label>
                    </div>
                    <div class="row">
                        <label>Artist <input class="form-control" type="text" id="artist" /></label>
                    </div>
                    <div class="row">
                        <label>Genre <input class="form-control" type="text" id="genre" /></label>
                    </div>
                    <div class="row">
                        <label>Year <input class="form-control" type="text" id="year" /></label>
                    </div>
                </div>
                <div class="col-md-8">
                    <table class="table table-condensed table-striped">
                        <thead>
                            <tr>
                                <th>Track</th>
                                <th>Song Title</th>
                                <th>Length</th>
                            </tr>
                        </thead>
                        <tbody class="tracks"></tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
    </div>
</div>

的HomeController

[HttpGet]
public ActionResult Album(int? id)
{
    if (id == null) return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
    var albumInfo = _service.GetAlbumInfo((int) id);
    if (albumInfo == null) return HttpNotFound();
    return PartialView("_Album", albumInfo);
}

脚本

        $(document).ready(function() {
        $('.list-element').click(function () {
            debugger;
            var $buttonClicked = $(this);
            var url = $buttonClicked.attr('data-url');


            $.get(url, function (data) {
                $('#albumContainer').html(data);

                $('#albumModal').modal('show');
            });
        });
    });

在几乎所有SO问题中，他们都没有使用数据目标，但我是。为了实现模态显示，我需要修改什么？

Answer 1

查看

[HttpGet]
public ActionResult Album(int? id)
{
    ShowModal modal = new ShowModal();   
    var albumInfo = _service.GetAlbumInfo((int) id);

    modal.Info1 = albumInfo.Info1;//and other fields
    return PartialView("_albumPartial", modal);
}

CONTROLLER

<script>
    $(document).ready(function () {
        $("#albumModal").on("show.bs.modal", function (e) {
            var button = $(event.relatedTarget) // Button that triggered the modal
            var url = button.data('url') // or button.attr("data-url") or get here just the id and create the URL here


            $.get(url, function (data) {
                $('#albumModal').html(data);
                $('#albumModal').modal('show');
            });
        });
    });
</script>

SCRIPT

ul {
  padding: 0;
  list-style-type: none;
}
#searchImg {
	padding: 0;
	display:inline-block;
	vertical-align:middle;
	margin-right:10px;
}
#searchTitle {
	padding:0;
	margin:0;
	display:inline-block;
  font-size:16px;
  font-weight:bold
}

Boostrap Modal无法在ASP.NET MVC上运行

1 个答案: