さて、これをやろうとしている人たちの投稿を見つけることができませんでした.
ベンダー データのリストを含む jQuery DataTable を含む MVC4 カミソリ ビューがあります。1 列目には、テーブルの右側にある非表示の div で部分ビューを開く、 info/edit/delete の 3 つのボタンを追加しました。foreach を実行してモデルをループし、Ajax Actionlinks を含むテーブル行と各項目のデータ列を書き込むことができます。これはすべてうまくいきます。
リストに数千の行が含まれており、最初のページの読み込みが非常に遅かったため、DataTables でサーバー側の処理を使用することにしたときに問題が発生しました。サーバー側の処理は正常に動作していますが、Ajax ActionLinks を最初の列に戻す方法がわかりません。
参考までに、この記事に従って、フィルタリング、並べ替え、およびページングを使用してサーバー側の処理をセットアップしましたが、これはすべて正常に機能します。
mRenderを使用してアンカー タグにボタンを追加しましたが、機能しません。ちらっと見ると、私の Ajax リクエストが 404 を返しているのがわかります。
Ajax GET 404 - Not Found - http://localhost/Vendor/Details/1?X-Requested-With=XMLHttpRequest
DataTable を初期化する HTML とコードは次のとおりです。
<div id="ListContent">
<table id="VendorList">
<thead>
<tr>
<th></th>
<th>Vendor Name</th>
<th>Vendor District</th>
</tr>
</thead>
<tbody>
@* DataTables renders the data here *@
</tbody>
</table>
</div>
<div id="DetailContentWrapper" class="collapsed">
<div class="closeLink"></div>
<div id="DetailContent">
@* info/edit/delete partial views should load here *@
</div>
</div>
<script>
$(document).ready(function () {
$('#VendorList').dataTable({
"bServerSide": true,
"sAjaxSource": '@Url.Action("AjaxHandler")',
"bProcessing": true,
"bJQueryUI": true,
"bAutoWidth": false,
"sPaginationType": "full_numbers",
"aoColumns": [
{
"mData": "VendorId", "bSearchable": false, "sWidth": "90px",
"mRender": function( data, type, full)
{
return '<a class="detailsButton" title="Details" href="/Vendor/Details/' + data + '" data-ajax-update="#DetailContent" data-ajax-mode="replace" data-ajax-method="GET" data-ajax-loading="#progress" data-ajax-begin="ExpandRightColumn" data-ajax="true"> </a> '
+ '<a class="editButton" title="Edit" href="/Vendor/Edit/' + data + '" data-ajax-update="#DetailContent" data-ajax-mode="replace" data-ajax-method="GET" data-ajax-loading="#progress" data-ajax-begin="ExpandRightColumn" data-ajax="true"> </a> '
+ '<a class="deleteButton" title="Delete" href="/Vendor/Delete/' + data + '" data-ajax-update="#DetailContent" data-ajax-mode="replace" data-ajax-method="GET" data-ajax-loading="#progress" data-ajax-begin="ExpandRightColumn" data-ajax="true"> </a> ';
}
},
{ "mData": "VendorName" },
{ "mData": "VendorDistrict" }
]
});
});
</script>
私が再現しようとしている Ajax ActionLink は次のようになります。
@Ajax.ActionLink(" ", "Details", new { id = item.VendorId }, new AjaxOptions()
{
UpdateTargetId = "DetailContent",
InsertionMode = InsertionMode.Replace,
HttpMethod = "GET",
LoadingElementId = "progress",
OnBegin = "ExpandRightColumn"
}, new { @class = "detailsButton", title="Details" })
上記の ActionLink から得られる HTML は次のとおりです。
<a class="detailsButton" title="Details" href="/VendorMap/Details/1" data-ajax-update="#DetailContent" data-ajax-mode="replace" data-ajax-method="GET" data-ajax-loading="#progress" data-ajax-begin="ExpandRightColumn" data-ajax="true"> </a>
これが私が mRender で使用している理由ですが、結果の HTML は同じですが、mRender の非 ajax リンクは MVC と同じように配線されていないため、404 をスローしています。
私もmRenderに渡そうとしました:
return '@@Ajax.ActionLink(" ", "Details", new { id = ' + data + ' }, new AjaxOptions() { UpdateTargetId = "DetailContent", InsertionMode = InsertionMode.Replace, HttpMethod = "GET", LoadingElementId = "progress", OnBegin = "ExpandRightColumn" }, new { @@class = "detailsButton", title="Details" })';
しかし、予想どおり、そのチャンクを最初の列にテキストとして表示するだけでした。
基本的に、Ajax Actionlink のように動作するように、アンカー タグをワイヤリングする必要があります。わかりにくかったら申し訳ありませんが、他に提供できる情報があれば教えてください。
私はいくつかの進歩を遂げましたが、再び立ち往生しています。jQuery を使用して Ajax Actionlink をレンダリングすることは不可能だと確信していますが、アクション メソッドを呼び出して、結果の部分ビューをレンダリングすることはできます。mRender の値を次のように更新しました。
"mRender": function( data, type, full)
{
return '<a class="detailsButton" title="Details" id="details' + data + '" onClick="showDetails(' + data + ');"> </a>'
+ '<a class="editButton" title="Edit" id="edit' + data + '" onClick="showEdit(' + data + ');"> </a>'
+ '<a class="deleteButton" title="Delete" id="delete' + data + '" onClick="showDelete(' + data + ');"> </a>';
}
次に、次の機能を実装しました。
function showDetails(id) {
ExpandRightColumn()
$.get('@@Url.Action("Details", "Vendor", new { id = "' + id + '"} )', function (data) {
$('#DetailContent').html(data);
});
}
function showEdit(id) {
ExpandRightColumn()
$.get('@@Url.Action("Edit", "Vendor", new { id = "' + id + '"} )', function (data) {
$('#DetailContent').html(data);
});
}
function showDelete(id) {
ExpandRightColumn()
$.get('@@Url.Action("Delete", "Vendor", new { id = "' + id + '"} )', function (data) {
$('#DetailContent').html(data);
});
}
ExpandRightColumn() は、結果の部分ビューがレンダリングされる DetailContent div を表示するだけです。$.get(Url.Action は Vendor コントローラーに移動し、Details/Edit/Delete アクション メソッドを呼び出し、html としてレンダリングされた部分ビューを返します。それを DetailContent div に貼り付ける必要があります。ソースは次のとおりです。
Url.Action をテストしたところ、正しい URL が返されました。URL を参照すると、正しい部分ビューが表示されます。ただし、その URL で $.get を実行しようとすると、サーバーは 404 を返します。