Question

我正在尝试将自定义表单字段绑定到现有的ViewModel。我有一个类似于这个

的ViewModel

public class BasicProfileViewModel {
   public Employee Employee { get; set; }
}

我正在使用上面的内容加载我的表单，但我还有CustomFormFieldComponent添加自定义表单字段

这是基于Employee模型中的一些值

 @await Component.InvokeAsync("CustomFormFields", new { Model.Level, Model.Employee.CompanyId, Model.Employee.EmployeeId })

组件非常简单，只需返回我从DB中检索的列表

@model List<CustomFormField>

@for (int i = 0; i < Model.Count(); i++)
{
  <div class="row">

    <div class="form-group form-material col-md-6">

      @Html.LabelForModel(Model[i].FieldLabel, new { @class = "form-control-label" })
      @if (Model[i].IsMandatory)
      {
        <span>*</span>
      }

      @if (Model[i].DropdownValues.Any())
      {
        var values = new SelectList(Model[i].DropdownValues);
        <select asp-items="@values" class="form-control"></select>
      }
      else
      {
        @Html.TextBoxFor(m => Model[i].FieldValue, new { @class = "form-control" })
      }
    </div>

  </div>
}

如何将这些自定义表单字段作为ViewModel的一部分？

我正在考虑做一个自定义模型绑定器，Employee是一个复杂的对象，因此使用反射设置值并不是那么简单。我甚至没有开始使用自定义表单字段。

public class RequestBasicProfile
    {
        public Employee Employee { get; set; } = new Employee();
        public List<CustomFormField> FormFields { get; set; }
    }
    public class RequestBasicProfileBinder : IModelBinder
        {
            public Task BindModelAsync(ModelBindingContext bindingContext)
            {
                if (bindingContext == null)
                {
                    throw new ArgumentNullException(nameof(bindingContext));
                }

                var result = new RequestBasicProfile();

                foreach (var item in bindingContext.HttpContext.Request.Form)
                {

                    var propertyInfo = result.Employee.GetType().GetProperty(item.Key.Replace("Employee.", ""));
                    if (propertyInfo != null)
                    {
                        var value = item.Value[0];
                        propertyInfo.SetValue(result.Employee, Convert.ChangeType(value, propertyInfo.PropertyType), null);
                    }
                }

                bindingContext.Result = ModelBindingResult.Success(result);
                return Task.CompletedTask;
            }
        }

Answer 1

事实证明，我试图解决复杂的事情。当我意识到MVC如何处理数据绑定时，它更容易。所以我最后只是做了以下

Sudo Code

<强>模型

<header class="navbar navbar-default navbar-static-top">
        <div class="container width-960px no-padding-unless-mobile">
            <div class="navbar-header">
                <a href="index.html" class="navbar-brand">Brand Name</a>

                <!-- MOBILE BUTTON - VIEWABLE ON MOBILE SIZED BROWSERS ONLY -->
                <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
                    <!-- HAMBURGER MENU -->
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>

            <nav class="collapse navbar-collapse navHeaderCollapse">
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="matches.html">Link 1</a></li>
                    <!--<li><a href="#">NEWS</a></li>-->
                    <li><a href="products.html">Link 2</a></li>
                    <li><a href="contact.html">Link 3</a></li>
                </ul>
            </nav>

        </div>
    </header>

<强>剃刀

public classs MyViewModel
{
  public string EmpFirstName { get; set; }
  public string EmpMiddleName { get; set; }

  // custom form fields
  public List<FormFieldDto> Fields { get; set; }
}

技巧是确保生成的名称与您的模型匹配

@Html.EditorFor(m => m.Employee.EmpFirstName)
@Html.EditorFor(m => m.Employee.EmpMiddleName)
@for (var i = 0; i < Model.Count; i++){
    <input type="text" name="@Model[i].Id" />
}

Mvc绑定自定义表单字段

1 个答案:

Sudo Code