Razor MVVM 中的局部视图
Partial View in Razor MVVM
这是一个 .net 核心 MVVM 应用程序。我正在尝试实现一个局部视图来呈现从数据库填充的下拉列表。我最初是通过视图组件完成此操作的,然后我发现您显然无法对视图组件的各种 DOM 元素进行操作(具体来说,我无法通过 [=30= 重新 select 选项]) 所以我正在尝试局部视图。我在部分视图背后连接逻辑时遇到问题。
这是我的代码:
_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,看看我哪里出错了吗?
如果您想使用 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;
}
来源class
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
})
测试结果
这是一个 .net 核心 MVVM 应用程序。我正在尝试实现一个局部视图来呈现从数据库填充的下拉列表。我最初是通过视图组件完成此操作的,然后我发现您显然无法对视图组件的各种 DOM 元素进行操作(具体来说,我无法通过 [=30= 重新 select 选项]) 所以我正在尝试局部视图。我在部分视图背后连接逻辑时遇到问题。
这是我的代码: _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,看看我哪里出错了吗?
如果您想使用 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;
}
来源class
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
})
测试结果