Использование окна Bootstrap Modal как PartialView

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

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

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

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

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

ОТВЕТЫ

Ответ 1

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

В вашем Index.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 внутри вашей папки Views.

Ответ 2

Я делаю это с помощью mustache.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>
<%}%>

Ответ 3

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

Ответ 4

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

Ответ 5

Я использую 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>

Ответ 6

Поместите модальный и javascript в частичное представление. Затем вызовите частичное представление на вашей странице. Это также обработает отправку формы.

Частичный вид

<div id="confirmDialog" class="modal fade" data-backdrop="false">
 <div class="modal-dialog" data-backdrop="false">
    <div class="modal-content">
        <div class="modal-header">
            <h4 class="modal-title">Missing Service Order</h4>
        </div>
        <div class="modal-body">
            <p>You have not entered a Service Order. Do you want to continue?</p>
        </div>
        <div class="modal-footer">
            <input id="btnSubmit" type="submit" class="btn btn-primary" 
              value="Submit" href="javascript:" 
               onClick="document.getElementById('Coordinate').submit()" />
            <button type="button" class="btn btn-default" data- 
                                               dismiss="modal">Cancel</button>
        </div>
    </div>
  </div>
</div>

Javascript

  <script type="text/javascript" language="javascript">
$(document).ready(function () {
    $("#Coordinate").on('submit',
        function (e) {
            if ($("#ServiceOrder").val() == '') {
                e.preventDefault();
                $('#confirmDialog').modal('show');
               }
            });
    });
</script>

Тогда просто позвоните своему частичку внутри формы вашей страницы.

Create.cshtml

 @using (Html.BeginForm("Edit","Home",FormMethod.Post, new {id ="Coordinate"}))
 {
     //Form Code

     @Html.Partial("ConfirmDialog") 
 }