如何以从数据库检索到的特定顺序显示表单项

本文关键字：定顺序 显示 表单 数据库 检索 | 更新日期: 2023-09-27 18:16:36

我的客户想要一个必须包含以下项目的表单:

    <
  • 名称/gh>
  • <
  • 地址/gh>

在这个应用程序的管理面板上，他想设置管理面板上表单项的顺序。解决这个问题的最佳方法是什么?我想为每个字段保持正确的验证。

我正在考虑一个数组，其中包含表单项的顺序，但我不知道如何以该顺序显示表单项。

排序顺序需要在数据库中设置。

如何以从数据库检索到的特定顺序显示表单项

首先，您必须创建一个数据库表TextBoxes来保存设置(也将从管理面板修改)，其中包含以下列:

CREATE TABLE TextBoxes
(
    Id int NOT NULL PRIMARY KEY,
    Ordinal int NOT NULL,
    TextBoxName nvarchar(255) NOT NULL
);

通过使用TextBoxName值(如name, address, state等)向其添加一些记录-这将在稍后用于映射UI控件-以及Ordinal列中的所需顺序。将表添加到模型中。

创建以下类(我假设包含问题中属性的实体名为Contact):

public class MyDataAnnotationsModelMetadataProvider : 
    System.Web.Mvc.DataAnnotationsModelMetadataProvider
{
    protected override System.Web.Mvc.ModelMetadata 
        CreateMetadata(IEnumerable<Attribute> attributes, 
            Type containerType, 
            Func<object> modelAccessor, 
            Type modelType, 
            string propertyName)
    {
        if (containerType == typeof(Contact))
        {
            // get the repository instance  
            var db = new MyModelEntities();
            // find the current textbox by it's property name
            var textBox = db.TextBoxes
                .FirstOrDefault(t => t.TextBoxName == propertyName);
            if (!string.IsNullOrWhiteSpace(propertyName) && textBox != null)
                attributes = attributes.Union(new List<Attribute>() {
                    new DisplayAttribute() { Order = textBox.Ordinal } 
                });
        }
        return base.CreateMetadata(attributes, 
            containerType, 
            modelAccessor, 
            modelType, 
            propertyName);
    }
}

在Global.asax.cs文件中修改Application_Start方法:

protected void Application_Start()
{
    // set the current metadata provider to our custom class
    ModelMetadataProviders.Current = new MyDataAnnotationsModelMetadataProvider();
    // other method content
    AreaRegistration.RegisterAllAreas();
    // etc
}

注意:上面的示例将允许您动态地更改一个模型的文本框的顺序，但是如果您在TextBoxes模型中添加另一个属性来保持多个模型的属性顺序，那么您可以通过一些额外的过滤将逻辑扩展到其他模型。

一种选择是在客户端订购。

完成此操作的步骤:

  • 在某种程度上，您必须将每个表单字段与各自的订单号相关联。以一种您可以识别每个字段的顺序的方式形成HTML。
  • 实现javascript逻辑来处理HTML并按正确顺序显示字段。

一个例子:

假设每个表单字段都在一个div上，具有共同的标识符和订单号:

<div id="official_div">
</div>
<div style="display:none">
    <div id="form_field_2">
       <--! Name Field here -->
    </div>
    <div id="form_field_1">
       <--! Email Field here -->
    </div>
    <div id="form_field_3">
      <--! Address Field here -->
    </div>
</div>

现在，知道了字段的数量，您可以实现一些javascript逻辑，以适当的顺序将这些字段放在一起，并将它们放在实际的表单字段官方div:

  var officialDiv = document.getElementById('official_div');
  for(var i =1; i <= numberOfFields; i++)
  {
       var element  = document.getElementById('form_field_' + i);
       //include element inside officialDiv 
  }
相关文章：