TwitterBootstrapModalウィンドウを部分ビューとして使用することを検討していました。ただし、このように使用するように設計されているとは思いません。かなり静的な方法で使用することを意図していたようです。とはいえ、部分的なビューとして使用できるのは素晴らしいことだと思います。
たとえば、ゲームのリストがあるとします。特定のゲームのリンクをクリックしたら、サーバーにデータを要求し、現在のページの「上部」にあるモーダルウィンドウにそのゲームに関する情報を表示したいと思います。
私は少し調査を行ったところ、似ているがまったく同じではない この投稿を見つけました。
誰かがこれを成功または失敗で試しましたか？誰かがjsFiddleまたは彼らが共有したいと思ういくつかのソースに何かを持っていますか？
ご協力いただきありがとうございます。
はい、これを行いました。
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というビューが必要です。
私は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">×</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>
<%}%>
私はここで見つけた1つの素晴らしい例を使用してこれを達成しました。その例で使用されているjqueryダイアログをTwitterBootstrapModalウィンドウに置き換えました。
完全で明確なサンプルプロジェクト http://www.codeproject.com/Articles/786085/ASP-NET-MVC-List-Editor-with-Bootstrap-Modals ブートストラップを使用したエンティティ操作モーダルの作成、編集、削除を表示し、コードも含まれていますそれらのエンティティ操作（c＃、JSON、javascript）から返された結果を処理する
私はこれを行うためにAJAXを使用しています。あなたはあなたの典型的なツイッターモーダルテンプレート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">
×
</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>
モーダルと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")
}