在视图组件或局部视图中使用表单

Posted 2023-03-27

【中文标题】在视图组件或局部视图中使用表单

【英文标题】：Use a form in a view component or a partial view

【发布时间】：2021-07-04 07:38:08

【问题描述】：

我正在使用 .net 核心框架和没有 MVC 的剃须刀页面，我正在尝试将表单与视图组件集成以使其可重用。

问题是我注意到它并不是真正适合的。事实上，我使用表单的 asp-for 属性，该属性实际上是基于父 PageModel 我在其中绑定了与我的表单字段相对应的属性。

我想知道如何创建包含要在最终 PageModel 中使用的表单的可重用组件。

谢谢你:)

【问题讨论】：

所有 Web 框架都将标准 html、CSS、javascript 和 WASM 推送到浏览器。没有理由不能创建普通的旧输入元素并将表单发布到控制器。 Controller 的模型绑定器将尝试使用这些字段，或者您也可以将数据作为表单值访问。

准确地说，数据绑定到父控制器而不是视图组件；这就是问题所在，我希望我有一个解决方法

为了更清楚，我只想能够通过 [BindProperty] 将视图组件内表单的 asp-for 属性绑定到父类 ModelPage 的属性我开始找到一个追踪here但不是很清楚

【参考方案1】：

如果你想让你的局部视图可重用，这意味着只应该调用一个模型。

您想使用局部视图，并从不同的模型中获取数据吗？

然后您可以使用 ViewModel 来包含多个不同的模型，例如：

public class MyViewModel

    public Profile Profile  get; set; 
    public Job Job  get; set; 

public class Profile
      
    public string Name  get; set; 

//....other models

索引.cshtml.cs：

[BindProperty]
    public MyViewModel MyViewModel  get; set; 

    public void OnGet()
    
        MyViewModel = new MyViewModel
        
            Job = new Job  Name = "teacher" ,
            Profile=new Profile Name="Peter"          
        ;
    

Index.cshtml（model= 用于将模型传递给部分）：

<partial name="~/Pages/Shared/Partialview.cshtml" model="Model.MyViewModel" />

然后可以在Partial视图中获取相关模型数据：

@model tr4cks491.Models.MyViewModel
<form method="post">
    <input asp-for="Job.Name" />
    <input asp-for="Profile.Name" />
    <input type="submit" value="Submit" />
</form>

【讨论】：

确实有效。事实上，我试图直接传递一个字符串并且不能。我是这个框架的新手，所以我仍然对一些原则感到困惑。但是如果你想对视图组件做同样的事情，我建议你阅读这个article，因为当你在同一个页面中使用多个组件时会发生冲突。