如何使用参数在锚点单击时调用 bootstrap 模态对话框

Question

如何在 mvc 中使用参数调用 bootstrap 模式对话框内的部分视图以获取详细信息页面。模态没有打开我的代码任何建议它有什么问题。还有一个我忘了说我越来越薄

500 (Internal Server Error)

在我的控制台中。这是我的代码。

局部视图

@model Flight.ViewModels.ViewTeamList
<div class="modal-body">
        <div class="row">
            <div class="col-md-4 col-sm-4">
                @Html.CustomLabel("lblTeam", " Team Name:")
            </div>
            <div class="col-md-8 col-sm-8">
                @Model.TeamDetails.TeamName
            </div>
        </div>
        <div class="row">
            <div class="col-md-4 col-sm-4">
                @Html.CustomLabel("lblCTUserCount", "User Count")
            </div>

            <div class="col-md-8 col-sm-8 pull-left">
                @Model.TeamDetails.UserCount
            </div>

        </div>
    </div>

视图中的 webgrid，其中我有锚标记，单击它我必须打开模式。

@model Flight.ViewModels.ViewTeamList

<script type="text/javascript"> 
    var TeamDetailPostBack = '@Url.Action("Details", "Team", new { area = "CTAdmin" })'
</script>
@using (Html.BeginForm("Index", "Team", FormMethod.Post))
{
    <div class="row">
        <div class="col-md-12 col-sm-12">
            @*  For Count *@
            @{ var teamList = Model.TeamList.ToList(); }
            @if (teamList.Count() > 0)
            {
                <div class="table-responsive">
                    @{
                var grid = new WebGrid(source: teamList.ToList(), defaultSort: "TeamName", canPage: true, rowsPerPage: 10);
                    }
                    @grid.WebGridSelectAll(

                    headerStyle: "gridHeader",
                    tableStyle: "table table-condensed table-striped table-bordered table-hover no-margin",
                    checkBoxValue: "TeamId",
                    columns: new[]{
                    grid.Column("TeamName",format: @<a href="#" class="detailstt" data-id="@item.TeamId">@item.TeamName</a>,header: Html.CustomText("lblCTTeamName", "Team Name")),

                    grid.Column("UserCount",format: @<a href="#" class="details" data-id="@item.TeamId">@item.UserCount</a>, header: Html.CustomText("lblCTUserCount", "# of User(s)"))
                    }
                      )
                </div>
            }
        </div>
    </div>
}
<div id='dialogDiv' class='modal hide fade in'>
    <div id='dialogContent'></div>
    </div>
 <script src="~/Scripts/Team.js?d=@DateTime.Now.ToFileTimeUtc()"></script>

javascript file named Team.js in which i have placed the code to open the dialog

$(document).ready(function () {
    $('a.detailstt').click(function () {
            var $buttonClicked = $(this);
            var id = $buttonClicked.attr('data-id');
            var newUrl = "/Team/Details?id=" + id;
            $.ajax({
                url: newUrl,
                type: "GET",  //these is must               
                cache: false,  //these is for IE
                contentType: "application/json; charset=utf-8",
                dataType: "json"
            }).done(function (data) {

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

});

Answer 1

您需要像这样将分部视图绑定到当前视图...

在页面上创建一个脚本来处理模态弹出功能并识别局部视图上的服务器帖子以关闭模态

$(function () {
    $.ajaxSetup({ cache: false });
    $('body').delegate('a[data-crud]', "click", function (e) {
        $('#teamModalContent').load(this.href, function () {
            $('#teamModal').modal({
                backdrop: 'static',
                keyboard: true
            }, 'show');
            bindForm(this);
        });
        return false;
    });
});

function bindForm(dialog) {
$('form', dialog).submit(function () {
    $('#progress').attr('class', 'fa fa-spinner fa-spin');
    $.ajax({
        url: this.action,
        type: this.method,
        data: $(this).serialize(),
        success: function (result) {
            if (result.success) {
                $('#teamModal').modal('hide');
                //$('#progress').hide();
                location.reload();
            } else {
                //$('#progress').hide();
                $('#teamModalContent').html(result);
                bindForm();
            }
        }
    });
    return false;
  });
}

创建一个 'a' link 并包含 'data-crud' 属性来调用绑定函数，你可以在 js 函数中使用 data-whatever 但我使用这个主要针对CRUD操作。

虽然在这里，包括局部视图的实际 URL。

<a data-crud='' href='/MyController/ViewTeam/" + item.TeamId + "' id='" + item.TeamId + "' title='View Team'></a>

现在在你的控制器中，return 一个 PartialView

    [HttpGet]
    public ActionResult Vieweam(int TeamID = 0)
    {
        var team = _Repository.GetTeam(TeamID);
        return PartialView("_ViewTeam", team);
    }

现在在您的父视图（包含网格）中放入容器模式以查看团队详细信息

<div id='teamModal' class='modal fade in'>
<div class="modal-dialog">
    <div class="modal-content">
        <div id='teamModalContent'></div>
    </div>
</div>

最后，创建一个局部视图来显示您的团队详细信息...这是应该在模态中绑定到主页的内容。 如果您注意到，HTML 由 bootstrap 模态 div 组成，用于构造我们在网格页面上为其创建容器的模态的其余部分。

@model ITmvc.Models.TeamModal
<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal"     aria-hidden="true">×</button>
    <h3 class="modal-title">Asset Details</h3>
</div>
@using (Html.BeginForm())
{
     <div class="modal-body">
      @*Bind Team Details Here*@
     </div>
        <div class="modal-footer">

    <button type="submit" class="btn btn-warning"><i id="progress" class="fa fa-database"></i>&nbsp;Save Team</button>
    <button class="btn btn-danger" data-dismiss="modal"><i class="fa fa-times"></i>&nbsp;Close</button>
</div>
}

Ali Adravi 在这里提供了一个很好的例子... http://www.advancesharp.com/blog/1125/search-sort-paging-insert-update-and-delete-with-asp-net-mvc-and-bootstrap-modal-popup-part-1

Answer 2

在你的索引页面加载局部视图

<div id='myModal' class='modal fade in'>
        <div class="modal-dialog">
            <div class="modal-content">
                <div id='myModalContent'></div>
            </div>
        </div>
    </div>

并在您的 javascript 文件中

$("a.detailstt").click(function () {
        var $buttonClicked = $(this);
        var id = $buttonClicked.attr('data-id');
        $.ajax({
            type: "GET",
            url: TeamDetailPostBackURL,
            contentType: "application/json; charset=utf-8",
            data: { "TeamId": id },
            datatype: "json",
            success: function (data) {
                $('#myModalContent').html(data);
                $('#myModal').modal('show');
            },
            error: function () {
                alert("Error: Dynamic content load failed.");
            }
        });

在你的索引页中做一些类似的事情

<script type="text/javascript">
    var TeamDetailPostBackURL = '@Url.Action("ActionMethod", "Controller"})'
</script>

如何使用参数在锚点单击时调用 bootstrap 模态对话框

How to call a bootstrap modal dialog on anchor click with parameter

asp.net-mvc

jquery

bootstrap-modal