title: Display different details in a modal when clicking a button in a list MVC5
body: <p>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</p>
  
  <p>When I click on different restaurants in the list the information that is displayed in the modal is the same for each restaurant.</p>
  
  <p>Here is the code that I'm using</p>
  
  <pre><code> @foreach (var item in Model)
              {
          &lt;!-- Modal --&gt;
                  &lt;div class="modal fade" id="myModal" role="dialog"&gt;
                      &lt;div class="modal-dialog"&gt;
  
                          &lt;!-- Modal content--&gt;
                          &lt;div class="modal-content"&gt;
                              &lt;div class="modal-header"&gt;
                                  &lt;button type="button" class="close" data-dismiss="modal"&gt;&amp;times;&lt;/button&gt;
                                  &lt;center&gt;&lt;h2 id="modalTitle" class="modal-title"&gt;@item.RestaurantName&lt;/h2&gt;&lt;/center&gt;
                              &lt;/div&gt;
                              &lt;div class="modal-body"&gt;
                                  &lt;ul class="details"&gt;
                                      &lt;li class="modalListItem"&gt;
                                          &lt;i class="fa fa-info-circle fa-5" aria-hidden="true"&gt;&lt;/i&gt;
                                          &lt;span&gt;@item.RestaurantDescription&lt;/span&gt;
                                      &lt;/li&gt;
                                      &lt;li class="modalListItem"&gt;
                                          &lt;i class="fa fa-envelope fa-5" aria-hidden="true"&gt;&lt;/i&gt;
                                          &lt;span&gt;@item.RestaurantEmailAddress&lt;/span&gt;
                                      &lt;/li&gt;
                                      &lt;li class="modalListItem"&gt;
                                          &lt;i class="fa fa-clock-o fa-5" aria-hidden="true"&gt;&lt;/i&gt;
                                          &lt;span&gt;Opens from @item.OpeningTime.TimeOfDay - @item.ClosingTime.TimeOfDay&lt;/span&gt;
                                      &lt;/li&gt;
                                      &lt;li class="modalListItem"&gt;
                                          &lt;i class="fa fa-list-alt fa-5" aria-hidden="true"&gt;&lt;/i&gt;
                                          &lt;span&gt;@item.FurtherDetails&lt;/span&gt;
                                      &lt;/li&gt;
                                      &lt;li class="modalListItem"&gt;
                                          &lt;i class="fa fa-map-marker fa-5" aria-hidden="true"&gt;&lt;/i&gt;
                                          &lt;span&gt;@item.RestaurantAddress @Html.ActionLink("Directions", "GetDirections", new { id = item.RestaurantID }, new { @class = "btn btn-primary btn-xs" })&lt;/span&gt;
                                      &lt;/li&gt;
                                      &lt;li class="modalListItem"&gt;
                                          &lt;i class="fa fa-bookmark-o fa-5" aria-hidden="true"&gt;&lt;/i&gt;
                                          &lt;span&gt;Would you like to make a reservation? @Html.ActionLink("Reserve", "CreateReservation", new { id = item.RestaurantID }, new { @class = "btn btn-success btn-xs" })&lt;/span&gt;
                                      &lt;/li&gt;
                                  &lt;/ul&gt;
                              &lt;/div&gt;
                              &lt;div class="modal-footer"&gt;
                                  &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
  
                      &lt;/div&gt;
                  &lt;/div&gt;
              }
  </code></pre>
  
  <p>Here is the code which has the button</p>
  
  <pre><code>&lt;table id="restaurantTable" class="table table-striped table-bordered" cellspacing="0" width="100%"&gt;
                      &lt;thead&gt;
                          &lt;tr&gt;
                              &lt;th&gt;Restaurant Name&lt;/th&gt;
                              &lt;th&gt;Type Of Restaurant&lt;/th&gt;
                              &lt;th&gt;Phone&lt;/th&gt;
                              &lt;th&gt;Address&lt;/th&gt;
                              &lt;th&gt;Options&lt;/th&gt;
                          &lt;/tr&gt;
                      &lt;/thead&gt;
                      &lt;tbody&gt;
  
                          @foreach (var item in Model)
                          {
                              &lt;tr&gt;
                                  &lt;td&gt;
                                      @Html.DisplayFor(modelItem =&gt; item.RestaurantName)
                                  &lt;/td&gt;
                                  &lt;td&gt;
                                      @Html.DisplayFor(modelItem =&gt; item.RestaurantType)
                                  &lt;/td&gt;
                                  &lt;td&gt;
                                      @Html.DisplayFor(modelItem =&gt; item.RestaurantPhoneNo)
                                  &lt;/td&gt;
                                  &lt;td&gt;
                                      @Html.DisplayFor(modelItem =&gt; item.RestaurantAddress)
                                  &lt;/td&gt;
                                  &lt;td&gt;
                                      &lt;button type="button" class="btn btn-info btn-xs" data-toggle="modal" data-target="#myModal"&gt;More info&lt;/button&gt; |
                                      @*@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" })
                                  &lt;/td&gt;
                              &lt;/tr&gt;
                          }
  
                      &lt;/tbody&gt;
                  &lt;/table&gt;
              }  
  </code></pre>