Blazor Web 程序集输入表单模型，绑定复杂模型-解网

问：

请帮我提供建议。我正在制作 BLAZOR Web 程序集应用 C# 输入窗体，一个模块由两个模块组成：

public class CLASS1
{
    public MOD1 User { get; set; }
    public MOD2 CLient { get; set; }
}

public class MOD1
{
     public string Email { get; set; }
     public string Password { get; set; }
     public string PhoneNumber { get; set; }
}

public class MOD2
{
     public string Name { get; set; }
}

如何在输入表单中使用这个复杂的模块？

<EditForm Model="CLASS1" OnSubmit="Creat" class="form-body"\>
     <h1 class="text-center"\>Create new user\</h1\>
     <div class="form-group"\> \<label\>Name\*\</label\>
          <InputText id="firstName" class="form-control" @bind-Value="CLASS1.MOD2.Name???????????????????????" /\>
     </div\> ...
</EditForm\>

我不知道（（（。

C# ASP.Net-Core 输入 Blazor Blazor-WebAssembly

感谢您的回复，恐怕您正在考虑如何将数据保存到数据库中，我认为这个高票答案已经有一个很好的样本。简而言之，你有一个 blazor wsam 应用，所以我们仍然需要一个 API（也许你可以有一个 asp.net 核心托管的后端应用作为 API，或者只是创建一个单独的 api 项目），然后在 API 项目中，使用 ef core 连接到你的数据库并提供 CRUD 操作，接下来你需要做的是在 Page.razor 的 onsubmit 函数中收集表单数据并调用 API 来传递控制器的数据。

答：

0赞 Tiny Wang 10/27/2023 #1

EditForm 用于在 blazor 页面中拥有表单，我们这里有官方文档向我们展示如何使用 .EditForm

我在下面有一个简单的测试代码，你能看看吗？

<EditForm Model="@MyModel" OnSubmit="@FormSubmit">
    <div>
        Email:<InputText @bind-Value="MyModel!.User.Email" />
    </div>
    <div>
        phone number:<InputText @bind-Value="MyModel!.User.PhoneNumber" />
    </div>
    <div>
        client name:<InputText @bind-Value="MyModel!.CLient.Name" />
    </div>
    <button type="submit">Submit</button>
</EditForm>

@code {
    public CLASS1? MyModel { get; set; }

    protected override void OnInitialized()
    {
        MyModel = new CLASS1
        {
            User = new MOD1(),
                CLient = new MOD2()
        };
    } 

    private void FormSubmit()
    {
        var res = MyModel.User.PhoneNumber;
    }

    public class CLASS1
    {
        public MOD1 User { get; set; }
        public MOD2 CLient { get; set; }
    }

    public class MOD1
    {
        public string Email { get; set; }
        public string Password { get; set; }
        public string PhoneNumber { get; set; }
    }

    public class MOD2
    {
        public string Name { get; set; }
    }
}

Blazor Web 程序集输入表单模型，绑定复杂模型

Blazor Web Assembly Imput Form Model, binding complex model

评论

评论