使用 .net.core 创建动态 forms

Question

我需要为不同的客户端提供不同的 forms，这些客户端都可以在后台配置（最后在数据库中）

我最初的想法是为“Form”创建一个 object，它有一个“FormItem 字典”来描述表单字段。

然后我可以通过执行以下操作来新建一个动态表单（这将来自数据库/服务）：

   private Form GetFormData()
    {
        var dict = new Dictionary<string, FormItem>();
        dict.Add("FirstName", new FormItem()
        {
            FieldType = Core.Web.FieldType.TextBox,
            FieldName = "FirstName",
            Label = "FieldFirstNameLabel",
            Value = "FName"
        });
        dict.Add("LastName", new FormItem()
        {
            FieldType = Core.Web.FieldType.TextBox,
            FieldName = "LastName",
            Label = "FieldLastNameLabel",
            Value = "LName"
        });
        dict.Add("Submit", new FormItem()
        {
            FieldType = Core.Web.FieldType.Submit,
            FieldName = "Submit",
            Label = null,
            Value = "Submit"
        });

        var form = new Form()
        {
            Method = "Post",
            Action = "Index",
            FormItems = dict
        };

        return form;
    }

在我的 Controller 中，我可以获取表单数据并将其传递到视图中

        public IActionResult Index()
    {
        var formSetup = GetFormData(); // This will call into the service and get the form and the values

        return View(formSetup);
    }

在视图中，我为每个 FormItems 调用 HtmlHelper

@model Form
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

@using FormsSpike.Core.Web
@{
    ViewData["Title"] = "Home Page";
}

@using (Html.BeginForm(Model.Action, "Home", FormMethod.Post))
{
    foreach (var item in Model.FormItems)
    {
        @Html.FieldFor(item);
    }
}

然后在发回时，我必须遍历表单变量并再次匹配它们。 这感觉很老派，我希望在某种 model 活页夹中完成。

   [HttpPost]
    public IActionResult Index(IFormCollection form)
    {
        var formSetup = GetFormData();

        foreach (var formitem in form)
        {
            var submittedformItem = formitem;

            if (formSetup.FormItems.Any(w => w.Key == submittedformItem.Key))
            {
                FormItem formItemTemp = formSetup.FormItems.Single(w => w.Key == submittedformItem.Key).Value;
                formItemTemp.Value = submittedformItem.Value;
            }
        }
        return View("Index", formSetup);
    }

然后我可以运行一些映射，这些映射将在后台更新数据库。

我的问题是这感觉不对：o{

此外，我使用了一个非常简单的 HtmlHelper，但我不能真正使用标准的 htmlHelper（例如 LabelFor）来创建 forms，因为没有 model 可以绑定。

 public static HtmlString FieldFor(this IHtmlHelper html, KeyValuePair<string, FormItem> item)
    {
        string stringformat = "";
        switch (item.Value.FieldType)
        {
            case FieldType.TextBox:
                stringformat = $"<div class='formItem'><label for='item.Key'>{item.Value.Label}</label><input type='text' id='{item.Key}' name='{item.Key}' value='{item.Value.Value}' /></ div >";
                break;
            case FieldType.Number:
                stringformat = $"<div class='formItem'><label for='item.Key'>{item.Value.Label}</label><input type='number' id='{item.Key}' name='{item.Key}' value='{item.Value.Value}' /></ div >";
                break;
            case FieldType.Submit:
                stringformat = $"<input type='submit' name='{item.Key}' value='{item.Value.Value}'>";
                break;
            default:
                break;
        }

        return new HtmlString(stringformat);
    }

此外，验证将不起作用，因为属性（例如 RegExAttribute 的RequiredAttribute）不存在。

我对此有错误的方法还是有更明确的方法来完成 forms 像这样？

有没有办法创建一个可以从原始设置创建的动态 ViewModel 并且仍然保留所有 MVC 丰富性？

Answer 1

您可以使用我的FormFactory库执行此操作。

默认情况下，它会根据视图模型进行反射以生成PropertyVm[]数组：

``

var vm = new MyFormViewModel
{
    OperatingSystem = "IOS",
    OperatingSystem_choices = new[]{"IOS", "Android",};
};
Html.PropertiesFor(vm).Render(Html);

``

但您也可以以编程方式创建属性，因此您可以从数据库加载设置，然后创建PropertyVm 。

这是来自 Linqpad 脚本的片段。

``

//import-package FormFactory
//import-package FormFactory.RazorGenerator


void Main()
{
    var properties = new[]{
        new PropertyVm(typeof(string), "username"){
            DisplayName = "Username",
            NotOptional = true,
        },
        new PropertyVm(typeof(string), "password"){
            DisplayName = "Password",
            NotOptional = true,
            GetCustomAttributes = () => new object[]{ new DataTypeAttribute(DataType.Password) }
        }
    };
    var html = FormFactory.RazorEngine.PropertyRenderExtension.Render(properties, new FormFactory.RazorEngine.RazorTemplateHtmlHelper());   

    Util.RawHtml(html.ToEncodedString()).Dump(); //Renders html for a username and password field.
}

``

有一个演示站点，其中包含您可以设置的各种功能的示例（例如嵌套集合、自动完成、日期选择器等）

Answer 2

我将把我的解决方案放在这里，因为我发现了这个搜索“如何在 mvc 核心中创建动态表单”。 我不想使用第 3 方库。

型号：

public class IndexViewModel
{
    public Dictionary<int, DetailTemplateItem> FormBody { get; set; }
    public string EmailAddress { get; set; }
    public string templateName { get; set; }
}

cshtml

<form asp-action="ProcessResultsDetails" asp-controller="home" method="post">
    <div class="form-group">
        <label asp-for=@Model.EmailAddress class="control-label"></label>
        <input asp-for=@Model.EmailAddress class="form-control" />
    </div>
    @foreach (var key in Model.FormBody.Keys)
    {
        <div class="form-group">

            <label asp-for="@Model.FormBody[key].Name" class="control-label">@Model.FormBody[key].Name</label>
            <input asp-for="@Model.FormBody[key].Value" class="form-control" value="@Model.FormBody[key].Value"/>
            <input type="hidden" asp-for="@Model.FormBody[key].Name"/>
        </div>
    }
    <input type="hidden" asp-for="templateName" />
    <div class="form-group">
        <input type="submit" value="Save" class="btn btn-primary" />
    </div>
</form>

Answer 3

您可以使用JJMasterData ，它可以在运行时或编译时从您的表中创建动态 forms 。 支持 .NET 6 和 .NET 框架 4.8。

1. 设置 package 后，在浏览器中访问 /en-us/DataDictionary
2. 创建一个数据字典添加您的表名
3. 单击更多，获取脚本，执行存储过程，然后单击预览并检查出来
4. 要在运行时使用您的 CRUD，go 到 en-us/MasterData/Form/Render/{YOUR_DICTIONARY}
5. 要在特定页面使用 CRUD 或在编译时自定义，请遵循以下示例：

在您的 Controller 处：

    public IActionResult Index(string dictionaryName)
    {
        var form = new JJFormView("YourDataDictionary");
        
        form.FormElement.Title = "Example of compile time customization"
        
        var runtimeField = new FormElementField();
        runtimeField.Label = "Field Label";
        runtimeField.Name = "FieldName";
        runtimeField.DataType = FieldType.Text;
        runtimeField.VisibleExpression = "exp:{pagestate}='INSERT'";
        runtimeField.Component = FormComponent.Text;
        runtimeField.DataBehavior = FieldBehavior.Virtual; //Virtual means the field does not exist in the database.
        runtimeField.CssClass = "col-sm-4";

        form.FormElement.Fields.Add(runtimeField);

        return View(form);
    }

在你看来：

@using JJMasterData.Web.Extensions
@model JJFormView

@using (Html.BeginForm())
{
    @Model.GetHtmlString()
}