Использование модального окна Bootstrap в качестве PartialView

Я искал с помощью Twitter Bootstrap Modal windows как частичный вид. Однако я действительно не думаю, что он был разработан для использования таким образом; похоже, что он должен был использоваться довольно статичным образом. Тем не менее, я думаю, что было бы здорово использовать его в качестве частичного представления.

Так, например, допустим, у меня есть список игр. При нажатии на ссылку для данной игры, я хотел бы запросить данные с сервера, а затем отобразить информация об этой игре в модальном окне "поверх" настоящей страницы.

Я сделал немного исследования и нашел этот пост, который похож, но не совсем одинаковые.

кто-нибудь пробовал это успех или неудача? У кого-нибудь есть что-то на jsFiddle или какой-то источник, которым они хотели бы поделиться?

Спасибо за вашу помощь.

5 61
javascript asp.net-mvc twitter-bootstrap modal-dialog

5 ответов:

Да, мы сделали это.

в свой индекс.cshtml у вас будет что-то вроде..

<div id='gameModal' class='modal hide fade in' data-url='@Url.Action("GetGameListing")'>
   <div id='gameContainer'>
   </div>
</div>

<button id='showGame'>Show Game Listing</button>

затем в JS для той же страницы (встроенный или в отдельном файле вы будете иметь что-то вроде этого..

$(document).ready(function() {
   $('#showGame').click(function() {
        var url = $('#gameModal').data('url');

        $.get(url, function(data) {
            $('#gameContainer').html(data);

            $('#gameModal').modal('show');
        });
   });
});

С помощью метода на контроллере, который выглядит следующим образом..

[HttpGet]
public ActionResult GetGameListing()
{
   var model = // do whatever you need to get your model
   return PartialView(model);
}

вам, конечно, нужно представление под названием GetGameListing.cshtml внутри папки представлений..

115

Я делаю это с усы.js и шаблоны (вы можете использовать любую библиотеку шаблонов JavaScript).

на мой взгляд, у меня что-то вроде этого:

<script type="text/x-mustache-template" id="modalTemplate">
    <%Html.RenderPartial("Modal");%>
</script>

...что позволяет мне сохранить мои шаблоны в частичном представлении под названием Modal.ascx:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>
    <div>
        <div class="modal-header">
            <a class="close" data-dismiss="modal">&times;</a>
            <h3>{{Name}}</h3>
        </div>
        <div class="modal-body">
            <table class="table table-striped table-condensed">
                <tbody>
                    <tr><td>ID</td><td>{{Id}}</td></tr>
                    <tr><td>Name</td><td>{{Name}}</td></tr>
                </tbody>
            </table>
        </div>
        <div class="modal-footer">
            <a class="btn" data-dismiss="modal">Close</a>
        </div>
    </div>

Я создаю заполнители для каждого модального в моем представлении:

<%foreach (var item in Model) {%>
    <div data-id="<%=Html.Encode(item.Id)%>"
         id="modelModal<%=Html.Encode(item.Id)%>" 
         class="modal hide fade">
    </div>
<%}%>

...и сделать ajax звонки с jQuery:

<script type="text/javascript">
    var modalTemplate = $("#modalTemplate").html()
    $(".modal[data-id]").each(function() {
        var $this = $(this)
        var id = $this.attr("data-id")
        $this.on("show", function() {
            if ($this.html()) return
            $.ajax({
                type: "POST",
                url: "<%=Url.Action("SomeAction")%>",
                data: { id: id },
                success: function(data) {
                    $this.append(Mustache.to_html(modalTemplate, data))
                }
            })
        })
    })
</script>

тогда вам просто нужен триггер где-то:

<%foreach (var item in Model) {%>
    <a data-toggle="modal" href="#modelModal<%=Html.Encode(item.Id)%>">
        <%=Html.Encode(item.DutModel.Name)%>
    </a>
<%}%>
7

Я достиг этого, используя один хороший пример, который я нашел здесь. Я заменил диалоговое окно jquery, используемое в этом примере, модальными окнами Twitter Bootstrap.

4

полный и понятный пример проекта http://www.codeproject.com/Articles/786085/ASP-NET-MVC-List-Editor-with-Bootstrap-Modals Он отображает создание, редактирование и удаление модалов операций с сущностями с помощью bootstrap, а также включает код для обработки результата, возвращенного из этих операций с сущностями (c#, JSON, javascript)

3

Я использую AJAX для этого. У вас есть свой частичный с типичным модальным шаблоном twitter html:

<div class="container">
  <!-- Modal -->
  <div class="modal fade" id="LocationNumberModal" 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>
          <h4 class="modal-title">
            Serial Numbers
          </h4>
        </div>
        <div class="modal-body">
          <span id="test"></span>
          <p>Some text in the modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">
            Close
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

тогда у вас есть метод контроллера, я использую JSON и есть пользовательский класс, который отображает представление в строку. Я делаю это, чтобы я мог выполнять несколько обновлений ajax на экране с одним вызовом ajax. Ссылка здесь: пример но вы можете использовать PartialViewResult/ActionResult при возврате, если вы просто делаете один вызов. Я покажу его с помощью формат JSON..

и метод JSON в контроллере:

public JsonResult LocationNumberModal(string partNumber = "")
{
  //Business Layer/DAL to get information
  return Json(new {
      LocationModal = ViewUtility.RenderRazorViewToString(this.ControllerContext, "LocationNumberModal.cshtml", new SomeModelObject())
    },
    JsonRequestBehavior.AllowGet
  );
}

и затем, в представлении с помощью вашего модального: вы можете упаковать AJAX в свой частичный и вызвать @{Html.RenderPartial... Или вы можете иметь заполнитель с div:

<div id="LocationNumberModalContainer"></div>

тогда ваш ajax:

function LocationNumberModal() {
  var partNumber = "1234";

  var src = '@Url.Action("LocationNumberModal", "Home", new { area = "Part" })'
    + '?partNumber='' + partNumber; 

  $.ajax({
    type: "GET",
    url: src,
    dataType: "json",
    contentType: "application/json; charset=utf-8",
    success: function (data) {
      $("#LocationNumberModalContainer").html(data.LocationModal);
      $('#LocationNumberModal').modal('show');
    }
  });
};

затем кнопка для вашего модального:

<button type="button" id="GetLocBtn" class="btn btn-default" onclick="LocationNumberModal()">Get</button>
1