on bootstrap modal dialog load get data from controller

Question

I have two controllers, both are having view.

control#1->view#1

control#2->view#2

on controller#1->view#1 I have data displayed in tabular format. in that data table, one column is hyperlink, when i click on that I want to pop up Bootstrap modal dialog. My retirement is Modal dialog should call action method of control#2 and display view#2 in modal dialog.

view#1:

@model xxx
<table id="myTable" class="table table-bordered">
    <thead>
        ....
    </thead>
    <tbody>
        @foreach (xx item in Model.xxx)
        {
             ....
             <td>@Html.ActionLink(item.Value.ToString(), "Display", "Controller#2", new { para1 = item.val1, para2 = item.val2}, null)</td> 
        }

@Html.ActionLink() is working fine it invokes Display() method of Controller#2 and eventually displays view#2. But now the requirement is view#2 should be popup modal dialog box.

FYI: both the views are using common _Layout.cshtml file.

Please help me doing this.

score 0 · Answer 1 · edited May 23 '17 at 10:28

0

The second view can't be a complete view with layout. It should be a partial view and called by ajax. Check this answer to learn how to implement it.

edited May 23 '17 at 10:28

Community

1
1

answered Jul 29 '16 at 18:32

Saeid

1,573
3
19
37

thanks.... ok. I have to change view to partial view. The link you gave uses java script. i want to achieve same results using BootStrap Modal dialog box. – bansi Jul 29 '16 at 19:13
Put your modal in your PartialView. When you click on the link, you need to load the modal content into a div (acts as a container), then call the modal via JavaScript. I'm at work right now, when I get home, I may write a sample for you. – Saeid Jul 29 '16 at 19:33

score 0 · Accepted Answer · answered Jul 30 '16 at 19:38

I've created a complete solution for you using @Ajax.ActionLink().To use Ajax.ActionLink it's very important that you add a reference to jquery.unobtrusive-ajax.min.js.In total you should have the following references in this order:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.ajax.unobtrusive/3.2.4/jquery.unobtrusive-ajax.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />

Controller:

public class HomeController : Controller
{
    public ActionResult Index()
    {
        var p1 = new Product { ID = 1, Description = "Product 1" };
        var p2 = new Product { ID = 2, Description = "Product 2" };
        return View(new List<Product> { p1, p2 });
    }

    public PartialViewResult GetDetails(string description)
    {
        return PartialView("_GetDetails", description);
    }
}

_GetDetails.cshtml partial view:

<div id="myModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">Modal Header</h4>
            </div>
            <div class="modal-body">
                <h3>@Model</h3>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

Main view:

@model IEnumerable<MVC_Master_Pages.Models.Product>

@{
    ViewBag.Title = "Home";
    Layout = null;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.ajax.unobtrusive/3.2.4/jquery.unobtrusive-ajax.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script type="text/javascript">
    function Done() {
        $('#myModal').modal('show');
    }
</script>
<table border="1">
    <thead>
        <tr>
            <th>ID</th>
            <th>Description</th>
            <th>Details</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var product in Model)
        {
            <tr>
                <td>@product.ID</td>
                <td>@product.Description</td>
                <td>
                    @Ajax.ActionLink("Details",
                 "GetDetails",
                 new { description = product.Description },
                 new AjaxOptions
                 {
                     UpdateTargetId = "details",
                     InsertionMode = InsertionMode.Replace,
                     OnSuccess = "Done()"
                 })
                </td>

            </tr>
        }
    </tbody>
</table>
<div id="details">
</div>

Output:

thanks! excellent. my pop up dialog displays data table, it has many columns. how can i adjust pop up windows width? — bansi, Aug 01 '16 at 18:47
Search the internet for "
overflow techniques" - you can try adding style="overflow-x:scroll; overflow-y:scroll;" to the
which contains the data that is too long — Denys Wessels, Aug 02 '16 at 04:13

on bootstrap modal dialog load get data from controller

2 Answers2