Razor MVVM 中的局部視圖

Question

這是一個 .net 核心 MVVM 應用程序。 我正在嘗試實現一個局部視圖來呈現從數據庫填充的下拉列表。 在我發現您顯然無法對視圖組件的各種 DOM 元素進行操作之前，我最初是通過一個視圖組件完成的（特別是我無法通過 javascript 重新選擇選項），所以我正在嘗試局部視圖。 我無法在局部視圖后面連接邏輯。

這是我的代碼：_Partial.cshtml

@model XXX.Source


    @Html.DropDownList(Model.FieldName,
    new List<SelectListItem>(Model.OptionList),
    "Choose",
    new
    {
        @multiple = "multiple",
        @class = "input-sm",
        @size = 4
    });

模型來源：

 public class Source
        {
            public IEnumerable<SelectListItem> OptionList { get; set; }
            public string FieldName { get; set; }
        }

這是我打電話的地方

@Html.RenderPartialAsync("_Partial", new ViewDataDictionary(ViewData) { { "FieldName", "Source" } });

這是局部視圖背后的代碼：

namespace XXX
{
    public class PartialModel : PageModel
    {
        public IService _Service;

        public PartialModel(IService Service)
        {
            _Service = Service;
        }



        public async Task<ActionResult> OnGet(string fieldName)
        {


            SourceOption viewModel = new SourceOption();

            var items = await _Service.GetSourceAsync();
            viewModel.FieldName = fieldName;
            viewModel.OptionList =
                from c in items
                select new SelectListItem
                {
                    Value = c.Sorid.ToString(),
                    Text = c.Name
                };


            return new PartialViewResult()
            {
                ViewName = "Partial",
                ViewData = new ViewDataDictionary(new EmptyModelMetadataProvider(), new ModelStateDictionary())
                {
                    Model = viewModel
                }
            };
        }
    }
}

它構建並運行，但在生成的 HTML 中只留下垃圾——“System.Threading.Tasks.Task`1[System.Threading.Tasks.VoidTaskResult];”。 我試圖在我的 OnGet 方法上放置一個斷點，但它永遠不會到達它，所以我顯然錯過了一些東西。 有人可以提供一個這樣做的例子，而不是MVC，看看我哪里出錯了？

Answer 1

如果您想使用ViewData將數據傳遞到您的頁面，然后呈現一個局部視圖並指定一個模型以傳遞到該局部視圖中，您可以參考以下示例。

在.cshtml

@page
@model IndexModel
@{
    ViewData["Title"] = "Home page";
}

@{
    await Html.RenderPartialAsync("_Partial", ViewData["Source"]);
}

在 .cshtml.cs 中

public void OnGet()
{

    var viewmodel = new Source
    {
        FieldName = "Test",
        OptionList = new List<SelectListItem>
        {
            new SelectListItem
            {
                Text = "Test Val1",
                Value = "1"
            },
            new SelectListItem
            {
                Text = "Test Val2",
                Value = "2"
            }
        }
    };

    ViewData["Source"] = viewmodel;
}

源類

public class Source
{
    public IEnumerable<SelectListItem> OptionList { get; set; }
    public string FieldName { get; set; }
}

部分觀點

@model Source

@Html.DropDownList(Model.FieldName,
    new List<SelectListItem>(Model.OptionList),
    "Choose",
    new
    {
        @multiple = "multiple",
        @class = "input-sm",
        @size = 4
    })

測試結果