Razor MVVM 中的局部视图答案

【问题标题】：Partial View in Razor MVVMRazor MVVM 中的局部视图
【发布时间】：2019-12-31 19:48:31
【问题描述】：

这是一个 .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，看看我哪里出错了吗？

【问题讨论】：

“在我发现你显然不能对视图组件的各种 DOM 元素进行操作之前”——这真的没有意义。不管你如何在服务器上渲染东西，无论是使用布局、局部还是视图组件。最后，有一个 HTML 文档发送到客户端，然后客户端将执行 JavaScript 以对其 DOM 进行操作。如果您的视图具有服务器端逻辑，则应该使用视图组件。如果你看到你的 JavaScript 代码没有正确执行，我会检查服务器发送的最终 HTML 结果。
我也不相信，但这就是我正在经历的。当视图组件呈现多选时，我无法通过 javascript 重新选择多选中的选项。当它只是简单的布局时，我可以。
@poke 请参阅附件中有关您的评论的问题。 stackoverflow.com/questions/59564639/…

标签： .net asp.net-core mvvm partial-views

【解决方案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
    })

测试结果

【讨论】：

如何将FieldName传递给这个？