2

私はデータテーブルを持っています。そのデータテーブルに Html.ActionLink を設定しました。そのアクション リンクをクリックすると、アイテムの ID を JavaScript 関数に送信し、上のデータ テーブルで選択したアイテムに属するすべてのコンテンツを含む新しいデータ テーブルを下に表示します。たとえば、テーブルで生徒の名前をクリックすると、すべての生徒の成績とテストが別のデータテーブルの下に表示されるようにします。私はJavaScriptをあまり使用したことがないので、どうすればこれができるかわかりません。誰かが私を正しい方向に向けるか、いくつかのヒントを教えていただければ幸いです。

元の最初のデータテーブル:

@foreach (var item in ((List<Epic>) ViewData["selectedestimate"]))
{
    <tr>
        <td>
            @*   @Html.ActionLink(@item.Name, "action", "controller", new {id = item})*@

            <a href="#" onclick="StoryClick(@item.Id);">@item.Name</a>
        </td>

呼び出す Javascript:

<script type="text/javascript">
function StoryClick(story) {
    $.get("@Url.Action("action", "controller")", function (response) {
        $('#stories').accordion({ collapsible: true });
    });
}
</script>

アクションコントローラー:

public List<EpicDetails> getEpicDetails(int id)
{
    return eRepository.getItemsById(id).tolist();
}

それとも ActionResult が必要ですか?

public Actionresult Details(int id)
{

}

私は今も近くにいないことを認識していますが、これを行うためにどのような手順を実行すればよいかわかりません。最終的に私はアコーディオンを作り、テーブルをアコーディオンに置きました。

4

2 に答える 2

4

このような状況では<a>、ActionLink生成されたものを実際に保持し、JavaScript を追加してリンクの動作を強化するのが好きです。したがって、ビューは実際には変更されません (後でイベント ハンドラーをバインドできるように、クラスを追加しました)。

@Html.ActionLink(@item.Name, "action", "controller", new {id = item, @class = "item-link" })

次に、いくつかの jQuery を記述して (すでに jQuery に依存しているようです。そうでない場合は、バニラ JavaScript を使用するように回答を修正できます)、イベント ハンドラーを class のリンクにバインドしますitem-link。

<script type="text/javascript">
    $(document).ready(function () {
        $("a.item-link").click(function (event) {
            event.preventDefault(); // Stop the browser from redirecting as it normally would
            $.get(this.href, function (response) {
                // Do whatever you want with the data.
            });
        });
    });
</script>

そして、はい、コントローラーのアクション メソッドは を返す必要がありActionResultます。ActionResultクライアントで消費したいデータのタイプを実際に知らずに、どのタイプを返す必要があるかを言うのは難しいですが、ページに HTML を挿入したい場合は、次のように記述できます。

public ActionResult Details(int id)
{
    var itemDetails = /* Get details about the item */;
    return PartialView("Details", itemDetails);
}

次に、JavaScript で次のように記述します。

$("a.item-link").click(function (event) {
    event.preventDefault(); // Stop the browser from redirecting as it normally would
    $.get(this.href, function (response) {
        $("element_to_populate").html(response);
    });
});

element_to_populateHTML を挿入する場所を指すセレクターはどこになりますか。

于 2012-04-04T15:42:42.420 に答える
1

クライアント側でjavascriptテンプレート（handlebars.jsを使用することをお勧めします）を使用し、学生データをJsonResultとして返すことを強くお勧めします。これにより、帯域幅の使用量が最小限に抑えられます。

ただし、かみそりに慣れているように見えるので、すべてのテンプレートにそれを使用し、コントローラー/ビューからプレーンHTMLを返し、代わりにこのjavascriptを使用できます。

<script type="text/javascript">
$(function() {
    $("a.item-link").click(function (event) {
        event.preventDefault(); // Stop the browser from redirecting as it normally would
        $("#gradesContainer").load(this.href, function (response) {
            //Do whatever you want, but load will already have filled up 
            //#gradesContainer with the html returned from your grades view
        });
    });
});
</script>

メインページの学生リストの下に、追加する必要があります

<div id="gradesContainer"></div>

他のコントローラーは次のようになります

public ActionResult TestGrades(int id) {
    var model = getTestGradesModel(id);
    return View(model);
}

クライアント側のJavaScriptテンプレート用にJSONを返す場合は、次のようになります。

public ActionResult TestGrades(int id) {
    var model = getTestGradesModel(id);
    return new JsonResult() {Data = model}; //no view here!
}
于 2012-04-04T16:00:11.177 に答える