[ad_1]
こんにちは
しばらくこの問題で立ち往生しているので、誰かが私を助けてくれることを期待していました。 Promise と wait を追加するさまざまな方法を試しましたが、あまりうまくいきません。
ダイナミックなグリッドを作成しようとしています。 5 つの要素がビューに渡された場合、3 つのボタンを持つ 1 つのパネルと 2 つのボタンを持つ 1 つのパネルが構築されます。 2 つの要素が渡された場合は、2 つのボタンを持つ 1 つのパネルになります。
JavaScript は渡されたリストを適切なセクションに分割し、これをコントローラーに返して部分ビューを更新します。
1つの問題を除いてはほぼ機能しているようです。 レポートの数と処理されたレポートの数を比較することで、(例では) 3 つすべてが表示されたことを識別して foreach ループを停止できることを期待していましたが、ループは継続しており、ループを 3 回繰り返しています。 ここで、promise と async が解決策に登場すると思います。
見つけることができるすべての例を試したので、以下のコードは乱雑になり始めていますが、まだ運がありません。
私が試したこと:
$(document).ready(function () { var numberOfReports = @Model.Select(x => x.ReportName).Count(); var reports = JSON.parse('@Html.Raw(Json.Encode(Model.Select(x => x.ReportName)))'); var divId = 1; var arrayId = 0; processedReports = 0; for (let i = 0; i < numberOfReports; i++) { if (numberOfReports === processedReports) return; setTimeout(function () { if (numberOfReports >= 3) { const reportLinks = [reports[arrayId], reports[arrayId + 1], reports[arrayId + 2]] var postData = { threeCells: reportLinks }; $.ajax({ type: "POST", url: '@Url.Action("ThreeCells", "Home")', data: postData, dataType: "html", success: function (result) { let threeDiv = document.createElement('div'); threeDiv.setAttribute('id', divId); document.querySelector('#inner').appendChild(threeDiv); $('#' + divId).html(result); divId++; arrayId = arrayId + 3; processedReports = processedReports + 3; } }) } else if (numberOfReports = 2) { const reportLinks = [reports[arrayId], reports[arrayId + 1]] var postData = { twoCells: reportLinks }; $.ajax({ type: "POST", url: '@Url.Action("TwoCells", "Home")', data: postData, dataType: "html", success: function (result) { let twoDiv = document.createElement('div'); twoDiv.setAttribute('id', divId); document.querySelector('#inner').appendChild(twoDiv); $('#' + divId).html(result); divId++; arrayId = arrayId + 2; processedReports = processedReports + 2 } }) } else if (numberOfReports = 0) { return; } }, 1000 * i); } })
[ad_2]
コメント