jquery - 如何使用参数在 anchor 单击时调用引导模式对话框

Question

如何使用详细信息页面的参数在 mvc 中的引导模式对话框内调用部分 View 。模式没有用我的代码打开任何建议它有什么问题。还有一点我忘了提及我正在得到

500 (Internal Server Error)

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

部分 View

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

在一个 View 中的 webgrid 中，我有一个 anchor 标记，单击该标记我必须打开模式。

@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

在您的索引页面加载部分 View

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