Javascript 使用 Bootstrap 模态窗口作为 PartialView

Using Bootstrap Modal window as PartialView

提问by KWondra

I was looking to using the Twitter Bootstrap Modal windowsas a partial view. However, I do not really think that it was designed to be used in this fashion; it seems like it was meant to be used in a fairly static fashion. Nevertheless, I think it'd be cool to be able to use it as a partial view.

我希望使用Twitter Bootstrap Modal 窗口作为局部视图。但是，我真的不认为它是为以这种方式使用而设计的。似乎它旨在以相当静态的方式使用。尽管如此，我认为能够将它用作局部视图会很酷。

So for example, let's say I have a list of Games. Upon clicking on a link for a given game, I'd like to request data from the server and then display information about that game in a modal window "over the top of" the present page.

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

I've done a little bit of research and found this postwhich is similar but not quite the same.

我做了一些研究，发现这篇文章很相似，但并不完全相同。

Has anyone tried this with success or failure? Anyone have something on jsFiddle or some source they'd be willing to share?

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

Thanks for your help.

谢谢你的帮助。

回答by Shane Courtrille

Yes we have done this.

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

In your Index.cshtml you'll have something like..

在您的 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>

Then in JS for the same page (inlined or in a separate file you'll have something like this..

然后在同一页面的 JS 中（内联或在一个单独的文件中，你会有这样的东西..

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

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

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

With a method on your controller that looks like this..

使用控制器上的方法，看起来像这样..

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

You will of course need a view called GetGameListing.cshtml inside of your Views folder..

您当然需要在您的 Views 文件夹内有一个名为 GetGameListing.cshtml 的视图。

回答by ken

I do this with mustache.jsand templates (you could use any JavaScript templating library).

我使用mustache.js和模板（你可以使用任何 JavaScript 模板库）来做到这一点。

In my view, I have something like this:

在我看来，我有这样的事情：

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

...which lets me keep my templates in a partial view called Modal.ascx:

...这让我可以将我的模板保存在名为 的部分视图中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>

I create placeholders for each modal in my view:

我在我的视图中为每个模态创建占位符：

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

...and make ajax calls with jQuery:

...并使用 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>

Then, you just need a trigger somewhere:

然后，您只需要在某处触发：

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

回答by Flavia Obreja

I have achieved this by using one nice example i have found here. I have replaced the jquery dialog used in that example with the Twitter Bootstrap Modal windows.

我通过使用我在这里找到的一个很好的例子来实现这一点。我已经用 Twitter Bootstrap Modal 窗口替换了该示例中使用的 jquery 对话框。

回答by Брайков

Complete and clear example project http://www.codeproject.com/Articles/786085/ASP-NET-MVC-List-Editor-with-Bootstrap-ModalsIt displays create, edit and delete entity operation modals with bootstrap and also includes code to handle result returned from those entity operations (c#, JSON, javascript)

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

回答by eaglei22

I use AJAX to do this. You have your partial with your typical twitter modal template html:

我使用 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>

Then you have your controller method, I use JSON and have a custom class that rendors the view to a string. I do this so I can perform multiple ajax updates on the screen with one ajax call. Reference here: Examplebut you can use an PartialViewResult/ActionResult on return if you are just doing the one call. I will show it using JSON..

然后你有你的控制器方法，我使用 JSON 并有一个自定义类，将视图呈现为字符串。我这样做是为了我可以通过一个 ajax 调用在屏幕上执行多个 ajax 更新。此处参考：示例，但如果您只是进行一次调用，则可以在返回时使用 PartialViewResult/ActionResult。我将使用 JSON 显示它..

And the JSON Method in Controller:

和控制器中的 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
  );
}

And then, in the view using your modal: You can package the AJAX in your partial and call @{Html.RenderPartial... Or you can have a placeholder with a div:

然后，在使用您的模式的视图中：您可以将 AJAX 打包在您的部分中并调用 @{Html.RenderPartial... 或者您可以使用带有 div 的占位符：

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

then your ajax:

然后你的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');
    }
  });
};

Then the button to your modal:

然后按钮到您的模态：

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

回答by peeps3216

Put the modal and javascript into the partial view. Then call the partial view in your page. This will handle form submission too.

将 modal 和 javascript 放入局部视图中。然后调用页面中的局部视图。这也将处理表单提交。

Partial View

局部视图

<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

Javascript

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

Then just call your partial inside the form of your page.

然后只需在您的页面表单中调用您的部分即可。

Create.cshtml

创建.cshtml

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

     @Html.Partial("ConfirmDialog") 
 }