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

Question

how to call a partial view inside a bootstrap modal dialog in mvc with parameter for details page. modal is not opening with my code any suggestion what is wrong with it. and one more thin i forgot to mention i am getting

500 (Internal Server Error)

in my console. here is my code.

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

webgrid in a view in which i have the anchor tag on which click i have to open the modal.

@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

in You Index Page to load the partial view

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

and in your javascript file

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

And in You Index Page do something Like

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

Answer 2

You will want to essentially bind the partial view to your current view like this...

Create a script on the page that will handle the modal popup functions and recognize server posts on the partial view to close the modal

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

Create an 'a' link and include the 'data-crud' attribute to call the binding functions you could use data-whatever in the js function but I use this mainly for CRUD operations.

Here though, include the actual URL of the partial view.

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

Now in your controller, return a PartialView

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

Now in your Parent view (Containing the grid) drop in a container modal to view team details

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

Finally, create a partial view to show your team details...This is what should bind to the main page, within the modal. If you'll notice, the HTML consists of bootstrap modal divs to construct the rest of the modal that we created a container for on the Grid page.

@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 provides a good example of this here... http://www.advancesharp.com/blog/1125/search-sort-paging-insert-update-and-delete-with-asp-net-mvc-and-bootstrap-modal-popup-part-1