web-dev-qa-db-ja.com

BootstrapモーダルウィンドウをPartialViewとして使用する

Twitter Bootstrapモーダルウィンドウ を部分ビューとして使用することを検討していました。ただし、この方法で使用するように設計されているとは思いません。かなり静的な方法で使用されることを意図していたようです。それにもかかわらず、私はそれを部分的なビューとして使用できるとクールだと思います。

たとえば、ゲームのリストがあるとします。特定のゲームのリンクをクリックすると、サーバーにデータを要求し、現在のページの上部にあるモーダルウィンドウにそのゲームに関する情報を表示したいと思います。

私は少し研究をして、 この投稿 を見つけました。これは似ていますが、まったく同じではありません。

誰かが成功または失敗してこれを試しましたか？誰かがjsFiddleや彼らが共有したいと思うソースに何かを持っていますか？

ご協力いただきありがとうございます。

javascriptasp.net-mvctwitter-bootstrapmodal-dialog
63
KWondra

はい、これを行いました。

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というビューが必要になります。

123
Shane Courtrille

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

here を見つけたニースの例を使用してこれを達成しました。その例で使用されているjqueryダイアログをTwitter Bootstrap Modalウィンドウに置き換えました。

4
Flavia Obreja

完全で明確なサンプルプロジェクト 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を使用し、ビューを文字列に変換するカスタムクラスがあります。これを行うと、1回のajax呼び出しで画面上で複数のajax更新を実行できます。ここでの参照： 例 ただし、1回の呼び出しのみを行う場合は、戻り時に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
eaglei22