3

ページのどこかに部分的な内部を持つdivがあります。ボタンにイベントがあります。divを取得してリロードし、部分ビューもリロードするJavascriptを作成するにはどうすればよいですか。

私はこれを別の見方で見ています。でも今はこんな風にはできません。しかし、ページ内で直接実行するのではなく、jQueryによってのみ実行するために同じことが必要です。そのjavascriptもそうではないので、jQueryスクリプトでおそらく類似のajaxコードを実行できますか？

<%  using (Ajax.BeginForm("EditFeiertag", new AjaxOptions { InsertionMode = InsertionMode.Replace, UpdateTargetId = "feiertage" }))
    {  %>
<div id="feiertage">
    <% Html.RenderPartial("FeiertagTable"); %>
</div>
<%  } %>

クリックイベントなどを開始して上記のスクリプトを実行できれば、私は助けになります

4

1 に答える 1

8

いくつかの基本的なコントローラーアクションから始めましょう：

public class FeiertagController
{
    IFeiertagService feiertagService = new FeiertagService();

    public ActionResult EditFeiertag()
    {
        // ... return your main edit view
        return View();
    }

    // Will be called by your jquery ajax call
    public PartialResult GetFeiertagTable()
    {
        var feiertagData = messageService.getLatestFeiertagData();
        var viewModel = new FeiertagViewModel();
        feiertagViewModel.feirtagTableData = feiertagData;

        return PartialView("FeiertagTableView", viewModel);
    }

}

したがって、EditFeiertag（）を使用して編集ページ全体をレンダリングし、そのページが部分ビューを非同期でレンダリングする場合は、GetFeiertagTable（）を呼び出します。

さて、あなたの見解では、あなたが次のようなものを持っているとしましょう：

<div id="Container">
    <div id="LeftPanel">
        // ... Some menu items
    </div>
    <div id="RightPanel">
        <a id="ReloadLink" href="#">Reload Table</a>
        <div id="FeiertagTable>
            <% Html.RenderPartial("FeiertagTable", Model.feiertagTableData); %>
        </div>
    </div>
</div>

これは正常に機能し、テーブルを1回ロードします。ただし、特定の要素（この場合は#ReloadLink）をクリックすると、Feiertagテーブルをリロードする必要があります。

ページの一部に以下を追加します。

<head>
        <script src="../../Scripts/Jquery/jquery-1.3.2.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            jQuery(document).ready(function($) {
                $('#ReloadLink').click(function(e)
                {
                    e.preventDefault();  // stop the links default behavior
                    $('#FeiertagTable').load('/Feiertag/GetFeiertagTable');
                });
            });
        </script>
</head>

次に、jquery load（）メソッドを呼び出すリロードリンクのクリックイベントにイベントを追加します。このメソッドは単純化されたajaxgetリクエストであり、選択したdiv（FeiertagTable）の内容を返されるものに置き換えます。

GetFeiertagTable（）コントローラーアクションは部分ビューを返し、それがそのdivに挿入されます。

これがあなたを正しい方向に向けさせてくれることを願っています！

于 2009-12-22T20:33:39.587 に答える