私の c# MVC4 アプリケーションでは、2 つの部分ビューを使用しています。部分ビュー 1 は ID Partial_Analysis の div にあり、部分ビュー 2 は ID Display_Average の div にあります。各ビューには、datatables.net データテーブルが含まれています。部分ビュー 1 のテーブル内で行が選択されると、jquery ajax post が作成され、部分ビュー 2 が更新され、部分ビュー 1 で行われた行選択に基づいて結果を表示する更新されたデータテーブルが表示されます。
<script type="text/javascript" charset="utf-8">
$(document).ready(function () {
$('.rowselection').click(function (e) {
var tdata = $('#form1').serialize();
$.ajax({
type: "POST",
data: tdata,
url: "Home/PartialAverage",
success: function (result) { success(result); }
});
});
function success(result) {
$("#Display_Average").html(result);
}
});
</script>
特定のボタンをクリックすると、部分ビュー 1 が更新されます。
<script type="text/javascript" charset="utf-8">
$(document).ready(function () {
$('#ChangeName').click(function (e) {
var tdata = $('#form1').serialize();
var origname = $('#NameDiv').find('input[name="Name"]').first().val();
var newname = $('#NameDiv').find('input[name="updatedName"]').first().val();
$.ajax({
type: "POST",
data: {
mCollection: tdata,
Name: origname,
updatedName: newname
},
url: "Home/ChangeName",
success: function (result) { success(result); }
});
});
function success(result) {
$("#Partial_Analysis").html(result);
}
});
</script>
この部分ビュー 1 の更新時に、2 番目の部分ビューも更新します。無限ループを引き起こすこれを試しました。
<script type="text/javascript" charset="utf-8">
$(document).ready(function () {
$('#Partial_Analysis').ajaxSuccess(function (e) {
var tdata = $('#form1').serialize();
$.ajax({
type: "POST",
data: {
mCollection: tdata,
},
url: "Home/PartialAverage",
success: function (result) { success(result); }
});
});
function success(result) {
$("#Display_Average").html(result);
}
});
</script>