jQueryを使用してASP.NET MVCのPartialViewでdivをリロードするにはどうすればよいですか？

StackOverflow https://stackoverflow.com/questions/1433419

質問

ページのどこかに部分的な内部を持つ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>
<%  } %>

クリックイベントまたはそのような何かを開始することで上記のスクリプトを実行できれば、私は助けてくれます

役に立ちましたか？

解決

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

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（）メソッドを呼び出すリロードリンクのクリックイベントにイベントを追加します。このメソッドは単純化されたajax getリクエストであり、選択されたdiv（FeiertagTable）の内容を、返されたもので置き換えます。

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

これにより、正しい方向に向けられることを願っています！

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top