我有一个局部视图(_FormCustomer
),显示用于创建客户的表单。我还具有一个视图组件(Countrylist
),该组件生成国家/地区的选项列表。现在,我想在表格中显示国家列表。这就是我的工作:
Index.cshtml
<partial name="_FormCustomer" for="@Model._Customer" />
_FormCustomer.cshtml
<select asp-for="@Model.Land" class="form-control">
@await Component.InvokeAsync("Countrylist");
</select>
CountrylistViewComponent.cs
public async Task<IViewComponentResult> InvokeAsync()
{
return View(await _countryRepository.GetCountriesAsync());
}
((函数GetCountriesAsync()
返回国家列表;可以正常工作。)
Pages/Componenst/Countrylist/default.cshtml
@model List<Country>
@foreach (Country country in Model)
{
<option value="@country.code">@country.name</option>
}
[不幸的是,当我叫局部声时,select-box
保持为空。但是,当我直接从@await Component.InvokeAsync("Countrylist");
调用Index.cshtml
时,它可以正常工作。
因此,您似乎无法在部分视图内使用视图组件。这个结论对吗?还是我做错了?
感谢Phantom2018,在您发帖后发现了问题。
@ 0:我正在使用Razor页面
@ 1:无效
@ 2:这是我的问题,而不是我的代码中的错字
@ 3:调试器向我显示vie组件被调用,所以
我的实际代码有点不同,如果可以的话,我想预先选择一个国家:
<select asp-for="@Model.Country" class="form-control">
@if (Model == null)
{
await Component.InvokeAsync("Countrylist");
}
else
{
await Component.InvokeAsync("Countrylist", Model.Country);
}
</select>
经过一些测试,我找到了解决方案:
<select asp-for="@Model.Country" class="form-control">
@if (Model == null)
{
@await Component.InvokeAsync("Countrylist");
}
else
{
@await Component.InvokeAsync("Countrylist", Model.Country);
}
</select>
不知道为什么,但是我不得不在等待之前使用@
。
我现在已经测试了这种情况,并且可以将数据直接加载到页面中或将其包含在部分视图中时,可以确认数据加载正常。 (我已经在Razor页面上对此进行了测试-但是在使用MVC时它可能会起作用。如果您使用的是MVC或Razor页面,则没有提及。)
几件事,您可以尝试查看加载是否正常:
1)从所有“选择”和“部分”中删除“ for *”属性。这样,您可以先检查数据是否加载,然后再担心绑定到所选项目。 (此外,在提供的代码中,您省略了模型变量-因此无法对其进行注释。)
2)删除最后一个“;”在您的_FormCustomer.cshtml
<select asp-for="@Model.Land" class="form-control">
@await Component.InvokeAsync("Countrylist")
</select>
请注意,我删除了结尾的“;”在等待语句中。我注意到“;”在选择中被添加为另一个“选项”!
3)我还注意到,即使是很小的语法错误(Intellisense不会识别)也会导致选择无法加载。调试以查看是否真正调用了您的InvokeAsync-在发生较小语法错误的情况下,甚至没有调用InvokeAsync。
还请记住:
“当partial view is instantiated收到时,父级的ViewData字典。对内部数据的更新部分视图不会保留到父视图。 ViewData的变化返回部分视图时,部分视图将丢失。“