web-dev-qa-db-ja.com

Core 2 RazorページのViewModelハンドラーから部分ビューを返す方法

Asp.Net MVCでは、次の操作を行うことで、部分的なビューを簡単に返すことができます。

return PartialView("ModelName", Model);

これはRazorPage ViewModelハンドラーでどのように行われますか？

asp.net-core-2.0razor-pages
7
TechFisher

私はこれを理解しました。 MVCの場合ほど簡単ではありません。空のViewDataDictionary()を作成し、そのModelプロパティをパーシャルの設定済みモデルに設定する必要があります。

モデル/ハンドラーを表示

public async Task<IActionResult> OnGetAsyncUpdateSearchResults(DateTime startDate, DateTime endDate, string selectedTypes)
{
    int[] types = selectedTypes.Split(",").Select(x => int.Parse(x)).ToArray();

    var inventory = await _itemService.GetFiltered(types, null, null, null, null, null, null, startDate, endDate.ToUniversalTime(), null, null, null, null, null, null, null);

    if (inventory != null)
    {
        SearchResultsGridPartialModel = new SearchResultsGridPartialModel();
        SearchResultsGridPartialModel.TotalCount = inventory.TotalCount;
        SearchResultsGridPartialModel.TotalPages = inventory.TotalPages;
        SearchResultsGridPartialModel.PageNumber = inventory.PageNumber;
        SearchResultsGridPartialModel.Items = inventory.Items;
    }

    var myViewData = new ViewDataDictionary(new Microsoft.AspNetCore.Mvc.ModelBinding.EmptyModelMetadataProvider(), new Microsoft.AspNetCore.Mvc.ModelBinding.ModelStateDictionary()) { { "SearchResultsGridPartialModel", SearchResultsGridPartialModel } };
    myViewData.Model = SearchResultsGridPartialModel;

    PartialViewResult result = new PartialViewResult()
    {
        ViewName = "SearchResultsGridPartial",
        ViewData = myViewData,
    };

    return result;
}

これで、ajax GETを介してこのハンドラーを呼び出し、パーシャルのHTMLを返すことができます。次に、パーシャルのdivを設定し、パーシャルを期待どおりに更新します。

ここにAJAX私が行っている呼び出しがあります：

var jsonData = { "startDate": startDate, "endDate": endDate, "selectedTypes": selectedTypesAsString };

$.ajax({
    type: 'GET',
    url: "searchresults/?handler=AsyncUpdateSearchResults",
    beforeSend: function (xhr) {
        xhr.setRequestHeader("XSRF-TOKEN", $('input:hidden[name="__RequestVerificationToken"]').val());
    },
    contentType: 'application/json; charset=utf-8"',
    data: jsonData,
    success: function (result) {
        $("#searchResultsGrid").html(result);
    },
    error: function (error) {
        console.log(error);
    }
});
9
TechFisher

それを理解してくれたTechFisherに感謝します。これは少しわかりやすい例です。

public IActionResult OnGetTestPartial()
{
    return new PartialViewResult()
    {
        ViewName = "Test",
        ViewData = new ViewDataDictionary(new EmptyModelMetadataProvider(), new ModelStateDictionary())
        {
            Model = new TestPartialData { Data = "inputhere" },
        }
    };
}

上記のクラスと同じフォルダにある「Test.cshtml」というファイル名の部分ビュー。

@using YourNamespace
@model TestPartialData

<div>Hello, model value: @Model.Data</div>

Jqueryで非同期に読み込みます

$("#someHtmlElementId").load("Your/Path/TestPartial");
5
Andriod