使用Bootstrap Modal窗口作为PartialView-Java 学习之路

我当时希望使用Twitter Bootstrap Modal windows作为局部视图 . 但是，我并不认为它的设计是以这种方式使用的;它似乎意味着以相当静态的方式使用 . 尽管如此，我认为能够将其用作局部视图会很酷 .

例如，假设我有一个游戏列表 . 点击给定游戏的链接后，我想从服务器请求数据，然后在“当前页面顶部”的模态窗口中显示有关该游戏的信息 .

我做了一些研究，发现this post类似但不完全相同 .

有没有人尝试过成功或失败？任何人都有jsFiddle或他们愿意分享的某些来源？

谢谢你的帮助 .

5 回答

是的，我们已经这样做了 .

在你的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);
}

您当然需要在Views文件夹中使用名为GetGameListing.cshtml的视图 .

回复于 2024-05-15T20:09:04+08:00

我用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>
<%}%>

...并使用jQuery进行ajax调用：

<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>
<%}%>

回复于 2024-05-15T20:09:04+08:00

7

我通过使用一个很好的例子找到了here . 我已经用Twitter Bootstrap Modal窗口替换了该示例中使用的jquery对话框 .

回复于 2024-05-15T20:09:04+08:00
3

完整且清晰的示例项目http://www.codeproject.com/Articles/786085/ASP-NET-MVC-List-Editor-with-Bootstrap-Modals它使用bootstrap显示创建，编辑和删除实体操作模式，还包括处理从这些实体操作返回的结果的代码（c＃，JSON，javascript）

回复于 2024-05-15T20:09:04+08:00

116

我使用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更新 . 请参考此处：Example但如果您只是执行一次调用，则可以在返回时使用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>

回复于 2024-05-15T20:09:04+08:00

使用Bootstrap Modal窗口作为PartialView

5 回答

相关问题