Question

如何在mvc中的bootstrap模式对话框中调用部分视图，其中包含参数详细信息页面。 modal没有打开我的代码任何建议它有什么问题。还有一个我甚至忘了提到我正在接受

500（内部服务器错误）

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

部分视图

@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>

名为Team.js的javascript文件，其中我已经放置了要打开的代码对话框

$(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

<索引页面中的

加载部分视图

<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>

Answer 2

您将希望基本上将局部视图绑定到当前视图，如此...

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

$(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;
  });
}

创建＆＃39; a＆＃39;链接并包含＆＃39; data-crud＆＃39;在js函数中调用可以使用数据的绑定函数的属性 - 但我主要用于CRUD操作。

此处，请包含部分视图的实际网址。

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

现在在你的控制器中，返回一个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，用于构建我们在Grid页面上创建容器的其余模态。

@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

如何在锚点上使用参数调用bootstrap模式对话框

2 个答案: