web-dev-qa-db-ja.com

ページ全体の投稿ではなく、部分的なビューを更新することはできますか？

親ページをリロードせずに、部分ビューを新しい状態にのみリロードすることなく、asp.net mvcで部分ビューフォームを送信する方法はありますか？データバインドを使用してknockout.jsを更新する方法と同様です。

私のデータテーブルは可変数の列/名前でレンダリングするので、knockout.jsはこのオプションではないと思うので、代わりに部分ビューを使用しようとしています。

asp.net-mvcjqueryknockout.jspartial-views
33
Rayshawn

JQueryなしではありません。

あなたがしなければならないことは、あなたのパーシャルをdivのようなものにすることです：

<div id="partial">
    @Html.Partial("YourPartial")
</div>

次に、更新する（たとえば、ID buttonのボタンをクリックする）には、次のようにします。

$("#button").click(function () {
   $.ajax({
       url: "YourController/GetData",
       type: "get",
       data: $("form").serialize(), //if you need to post Model data, use this
       success: function (result) {
           $("#partial").html(result);
       }
   });
})

次に、アクションは次のようになります。

public ActionResult GetData(YourModel model) //that's if you need the model
{
    //do whatever

    return View(model);
}
48
mattytommo

実際、Partialに子アクションメソッドがある場合、子アクションに直接投稿（またはアンカーリンクを使用）して、Ajaxのような効果を得ることができます。これはいくつかのビューで行います。

構文は

@Html.Action("MyPartial")

子のアクションは

public ActionResult MyPartial()
{
    return PartialView(Model);
}

フォームが子アクションに投稿する場合

@using (Html.BeginForm("MyPartial"))
{
    ...
}

部分ビューは、子アクションから返された部分ビューで更新されます。

Jqueryはパーシャルを更新する正当な方法です。しかし技術的には、あなたの質問に対する答えはYESです。

13
Dave Alperovich

通常、このようなものを探しているときに私が見つけることは、人々があまりにも限られた情報を提供することですので、私はここで助けようとします。重要なのは、戻り値のhtmlを追加できるIDでdivを設定することです。また、コントローラーを押すときは、パーシャルを返すようにしてください。この方法にはいくつかの潜在的な問題がありますが、良い日には機能するはずです。

<div id="CategoryList" class="widget">
    @{
        Html.RenderPartial("WidgetCategories.cshtml");
    }
</div>

          function DeleteCategory(CategoryID) {
            $.get('/Dashboard/DeleteWidgetCategory?CategoryID=' + CategoryID,
                function (data) {
                    if (data == "No") {
                        alert('The Category has report widgets assigned to it and cannot be deleted.');
                    }
                    else {
                        $('#CategoryList').html(data);
                    }

                }
            );
        }


    [HttpGet("DeleteWidgetCategory")]
    [HttpPost("DeleteWidgetCategory")]
    public IActionResult DeleteWidgetCategory(string CategoryID)
    {
        string Deleted = CategoryModel.DeleteCategory(CategoryID);

        if (Deleted == "Yes")
        {
            return PartialView("WidgetCategories");
        }
        else
        {
            return this.Json("No");
        }
    }
2
Deathstalker

このようなシナリオでは、部分ビューと@ html.RenderPartial（ "partialName"） partial helpers を使用して、Ajaxフォームヘルパーを使用します。

2
Stokes