私はデータテーブルとチャートを使用しています。モデルを介して標準データを返したいのですが、奇妙な理由でそれができず、コントロールは Json でのみ機能するようです。多分それは私の理解だけです。しかし、この時点で私は完全に迷っています。
私がやりたいことは、実際には（理論的には）非常に単純です。
アクション結果 1 は、Json の結果としてビューにページングされたデータを持つテーブルを返します。これは、データ テーブルが必要とするためです。これはうまくいきます。
これに対するコントローラーのアクション結果は次のとおりです。
public ActionResult AjaxVitalsHandler()
{
return PartialView();
}
[HttpPost]
[AccessRequired(AccessFeature.Vitals, AccessLevel.Read)]
public ActionResult AjaxVitalsHandler(JQueryDataTableParamModel param)
{
int start = param.iDisplayStart;
int perPage = Math.Min(param.iDisplayLength, 100);
int currentPage = (start / perPage) + 1;
int id = _accountSession.CurrentUserId;
//...Bunch of code here to do basic queries and get the data...All working fine.
return Json(new
{
sEcho = param.sEcho,
iTotalRecords = model.TotalItemCount,
iTotalDisplayRecords = model.TotalItemCount,
aaData = result
});
}
対応する部分ビューを次に示します (これは、RenderAction を使用してメイン ビューに読み込まれた部分ビューであり、特別なことは何もありません)。
<table class="table table-striped table-bordered table-hover"
id="vitalsTable"
data-request-url="@Url.Action("AjaxVitalsHandler")">
<thead>
<tr>
<th class="hidden-480">Date</th>
<th class="hidden-480">Weight (kg)</th>
<th class="hidden-480">Height (cm)</th>
<th class="hidden-480">BMI</th>
<th class="hidden-480">B/P</th>
</tr>
</thead>
</table>
最後に、対応する DataTables コード (何らかの奇妙な理由で、メイン ビューではなく部分ビューに配置するとエラーが発生します (私の質問ではありませんが、とにかく):
<script>
$(document).ready(function ()
{
var urlRequest = $('#vitalsTable').data("request-url");
$('#vitalsTable').dataTable({
"bSort": false,
"bServerSide": true,
"sAjaxSource": urlRequest,
"sServerMethod": "POST",
"bProcessing": true,
"bFilter": false,
"aLengthMenu": [[10], [10]],
"aoColumns": [
{ "mDataProp": "VitalsDate" },
{ "mDataProp": "weight" },
{ "mDataProp": "height" },
{ "mDataProp": "bmi" },
{ "mDataProp": "bp" },
]
});
});
</script>
アクションの結果 2 は、別のビューに同じデータを持つグラフを Json の結果として返します。これは正常に機能しますが、データの最初のページに対してのみです。
これに対するコントローラーのアクション結果は次のとおりです。
public ActionResult LoadVitalsChartData2()
{
return PartialView();
}
//[HttpPost]
[AccessRequired(AccessFeature.Vitals, AccessLevel.Read)]
public JsonResult LoadVitalsChartData()
{
int id = _accountSession.CurrentUserId;
//Bunch of code here to retrieve the data...Problem here.
//There seems to be no way to sync the Ajax call back to that it refreshes
//the data here too.
//Ideally what I want is that when the page button is pressed, it reloads this
//chart too and passes to it the relevant columns of data for plotting.
//Presently I can only get it to do the first page.
//The queries work, but how do I pass the relevant page data from the above
//action result so I am not just getting the first page of data every time.
return Json(new
{
weightData = weightResult,
xLabels = xAxisResult,
heightData = heightResult
//There is security issues around AllowGet inside a post method.
//I would like to fix this but it is also not my question.
}, JsonRequestBehavior.AllowGet);
}
対応する部分ビューを次に示します (これは、RenderAction を使用してメイン ビューに読み込まれた部分ビューであり、特別なことは何もありません)。
<div id="VitalsChart" class="chart"
data-request-url="@Url.Action("LoadVitalsChartData")">
</div>
最後に、これはサイトからコピーして貼り付けたもので、わずかに変更しただけの対応するチャートコードです。完全なコードをここに表示したい場合は、多くの読み物がありますが、どこにも表示されませんページングを行うには:
Charts.initCharts();
明らかに、現在表に表示されているデータをグラフに表示したいと考えています。つまり、テーブルに 10 個のアイテムが 10 個ずつページングされている場合、テーブルに 20 ～ 30 個のアイテムが表示されている場合、チャートにはそれらのアイテムのデータが表示されます。最初の項目 1 から 10 のデータのみが表示されます。チャート自体はページングを処理する必要はありません。表示する 10 項目とテーブルがいつ更新されるかを知るだけで済みます。これはすべて、テーブルに送信されたデータとそのページング イベントから入手できます。
では、これをテーブルから取り出してチャートに渡すにはどうすればよいでしょうか。
共有できるように、データを何らかの配列に抽出しようとしました。フロートチャートはこれを好みません。また、データを共通のアクション メソッドに抽出し、それを別の actionresult に渡そうとしましたが、その方法がわかりません。
クラスを定義してキャストすることにより、すべてのデータを匿名型から標準クラス型に変換しようとしました。しかし、私はまだエラーが発生します。
これは以前にも行われています。ページ テーブルと、そこに表示されるデータに対応するグラフ。C# MVC4 でこれを行うのが非常に難しいのはなぜですか。
Jsonの代わりに標準データで上記を使用できる方法があれば、解決策を知っているので笑っています。実際、私は解決策を持っています。データをクエリするときは、ページング ラッパーでラップして、必要なデータのみが返されるようにします。次に、ページ番号のみを Paging ラッパーに渡す同じデータセットの各アクション結果で 1 つずつ、2 つのクエリを実行します。残念ながら、これは EF と Linq を使用した標準の C# と Razor の場合です。私の素晴らしいコントロールには Json が必要です。これはずっと簡単なはずですが、何が欠けているのかわかりません。
これ以上のコードを投稿するのは難しいです。投稿が非常に長くなるように、さまざまな方法を試しました。しかし、孤立したものやその一部は、問題を混乱させるだけです。
最後に：これを行う方法の手がかりを得て、進歩を始めましたが、データテーブルサイトで探している例は良くありません. これは、これまでに正しく機能していない私の多くの試みの1つです（JavaScriptエラーではなく、標準のデータテーブルエラーが発生するだけです）：
$('#vitalsTable').live('page', function ()
{
var tbl = $('#vitalsTable').dataTable(
{
"aoColumnDefs": [{
"aTargets": [0],
"mData": function (source, type, val)
{
return "Hello";
}
}]
});
alert("Data ==> " + tbl);
Charts.initCharts();
});
私が実際にやろうとしているのは、ページが変更されたときにデータの列を取得し、このデータをグラフにプロットすることです。このページには 10 個のアイテムが含まれています。したがって、プロットのためにチャートに渡すことができる 10 個のアイテムを含むデータの列が必要です。
コードの別のスニペットは、上記のようにページ変更イベントを検出する必要があることを示唆しており、その前にこれを行う必要があります。
var my_chart = $.plot($("#vitalsTable"), [{}]);
次に、その中で次のようなことを行う必要があります。
my_chart.setData([new_data_set]);
my_chart.draw();
しかし、繰り返しますが、それを機能させる方法がわかりません。
助けてくれてありがとう。