Display different details in a modal when clicking a button in a list MVC5

Question

Im trying to display more details about a restaurant when you click on a specific restaurant on a list. Currently I am displaying a list of restaurants in a list with a button saying more info. I want this information to show up in a modal

When I click on different restaurants in the list the information that is displayed in the modal is the same for each restaurant.

Here is the code that I'm using

 @foreach (var item in Model)
            {
        <!-- Modal -->
                <div class="modal fade" id="myModal" role="dialog">
                    <div class="modal-dialog">

                        <!-- Modal content-->
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal">&times;</button>
                                <center><h2 id="modalTitle" class="modal-title">@item.RestaurantName</h2></center>
                            </div>
                            <div class="modal-body">
                                <ul class="details">
                                    <li class="modalListItem">
                                        <i class="fa fa-info-circle fa-5" aria-hidden="true"></i>
                                        <span>@item.RestaurantDescription</span>
                                    </li>
                                    <li class="modalListItem">
                                        <i class="fa fa-envelope fa-5" aria-hidden="true"></i>
                                        <span>@item.RestaurantEmailAddress</span>
                                    </li>
                                    <li class="modalListItem">
                                        <i class="fa fa-clock-o fa-5" aria-hidden="true"></i>
                                        <span>Opens from @item.OpeningTime.TimeOfDay - @item.ClosingTime.TimeOfDay</span>
                                    </li>
                                    <li class="modalListItem">
                                        <i class="fa fa-list-alt fa-5" aria-hidden="true"></i>
                                        <span>@item.FurtherDetails</span>
                                    </li>
                                    <li class="modalListItem">
                                        <i class="fa fa-map-marker fa-5" aria-hidden="true"></i>
                                        <span>@item.RestaurantAddress @Html.ActionLink("Directions", "GetDirections", new { id = item.RestaurantID }, new { @class = "btn btn-primary btn-xs" })</span>
                                    </li>
                                    <li class="modalListItem">
                                        <i class="fa fa-bookmark-o fa-5" aria-hidden="true"></i>
                                        <span>Would you like to make a reservation? @Html.ActionLink("Reserve", "CreateReservation", new { id = item.RestaurantID }, new { @class = "btn btn-success btn-xs" })</span>
                                    </li>
                                </ul>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                            </div>
                        </div>

                    </div>
                </div>
            }

Here is the code which has the button

<table id="restaurantTable" class="table table-striped table-bordered" cellspacing="0" width="100%">
                    <thead>
                        <tr>
                            <th>Restaurant Name</th>
                            <th>Type Of Restaurant</th>
                            <th>Phone</th>
                            <th>Address</th>
                            <th>Options</th>
                        </tr>
                    </thead>
                    <tbody>

                        @foreach (var item in Model)
                        {
                            <tr>
                                <td>
                                    @Html.DisplayFor(modelItem => item.RestaurantName)
                                </td>
                                <td>
                                    @Html.DisplayFor(modelItem => item.RestaurantType)
                                </td>
                                <td>
                                    @Html.DisplayFor(modelItem => item.RestaurantPhoneNo)
                                </td>
                                <td>
                                    @Html.DisplayFor(modelItem => item.RestaurantAddress)
                                </td>
                                <td>
                                    <button type="button" class="btn btn-info btn-xs" data-toggle="modal" data-target="#myModal">More info</button> |
                                    @*@Html.ActionLink("More Info", "Details", new { id = item.RestaurantID }, new { @class = "btn btn-info btn-xs" }) |*@
                                    @Html.ActionLink("Reserve", "CreateReservation", new { id = item.RestaurantID }, new { @class = "btn btn-success btn-xs" }) |
                                    @Html.ActionLink("Directions", "GetDirections", new { id = item.RestaurantID }, new { @class = "btn btn-primary btn-xs" }) |
                                    @Html.ActionLink("Review", "Review", new { id = item.RestaurantID }, new { @class = "btn btn-primary btn-xs" })
                                </td>
                            </tr>
                        }

                    </tbody>
                </table>
            }

can you please show **list with a button saying more info** code. — Ashiquzzaman, May 08 '17 at 03:20
well, that's not how modal is work. You only create one modal. You must change and show dynamically the content of modal with javascript/jquery. http://stackoverflow.com/questions/10626885/passing-data-to-a-bootstrap-modal?rq=1 — andrefadila, May 08 '17 at 03:27

Ashiquzzaman · Accepted Answer · 2020-01-23T05:31:11.567

Calling bootbox with bootstrap 3 modal.

Example:

Model:

public class Restaurant
    {
        [Key]
        public int Id { get; set; }
        public string Name { get; set; }
        public string Website { get; set; }
        public string Address { get; set; }

    }

Controller:

 public class RestaurantController : Controller
    {
        public ActionResult Index()
        {
            var model =new List<Restaurant>();//load data from database
            return PartialView(model);
        }

        [HttpGet]
        public ActionResult Delails(int id)
        {
            var model = new Restaurant();//load data from database by RestaurantId
            return PartialView(model);
        }

    }

View:

index.cshtml:

@model IEnumerable<Restaurant>
<table id="dataTable" class="table table-bordered table-hover">
  <thead>
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.Name)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Website)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Address)
        </th>
        <th style="max-width:100px">Actions</th>
    </tr>
  </thead>
  <tbody>
     @foreach (var item in Model)
     {
     <tr class="dataItem">
         <td>
             @Html.DisplayFor(modelItem => item.Name)
         </td>
         <td>
             @Html.DisplayFor(modelItem => item.Website)
         </td>
         <td>
             @Html.DisplayFor(modelItem => item.Address)
         </td>
          <td>
             <span class="btn btn-xs btn-primary btnEdit" id="edit_@item.Id" onclick="createModal('@Url.Action("Details", "Restaurant" , new {id=item.Id })')">Details</span>
         </td>
     </tr>
     }
  </tbody>
 </table>
 <div class="modal fade" id="myModal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog">
        <div class="modal-content" id="modelContent">
        </div>
    </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js">

script>
    <script>
    function createModal(url){
          $('#modelContent').load(url);
          $('#myModal').modal('show');
    }
    </script>

Details.cshtml:

@model Restaurant
<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true"><i class="fa fa-times-circle"></i></span>
    </button>
    <h4 class="modal-title">Details Record</h4>
</div>
<div class="modal-body">
    <div>
<table class="table table-bordered">
   <tr>
       <td>@Html.DisplayNameFor(model => model.Name)</td>
       <td>@Html.DisplayFor(model => model.Name)</td>
   </tr>
   <tr> 
     <td>@Html.DisplayNameFor(model => model.Website)</td>
       <td>@Html.DisplayFor(model => model.Website)</td>
   </tr>
   <tr>
       <td>@Html.DisplayNameFor(model => model.Address)</td>
       <td>@Html.DisplayFor(model => model.Address)</td>
   </tr>
</table>
    </div>
</div>
<div class="modal-footer">
    <button type="button" class="btn btn-default"
            data-dismiss="modal">
        Close
    </button>
</div>

I think it's helpful for you.

Display different details in a modal when clicking a button in a list MVC5

1 Answers1