如何使用razor自定义EditorFor CSS

2023-12-05

我有这门课

public class Contact
{
    public int Id { get; set; }
    public string ContaSurname { get; set; }
    public string ContaFirstname { get; set; }
    // and other properties...
}

我想创建一个允许我编辑所有这些字段的表单。所以我使用了这段代码

<h2>Contact Record</h2>

@Html.EditorFor(c => Model.Contact)

这工作正常,但我想自定义元素的显示方式。例如,我希望每个字段与其标签显示在同一行中。因为现在生成的html是这样的:

<div class="editor-label">
  <label for="Contact_ContaId">ContaId</label>
</div>
<div class="editor-field">
  <input id="Contact_ContaId" class="text-box single-line" type="text" value="108" name="Contact.ContaId">
</div>

我同意上面jrummell的解决方案: 当您使用EditorFor- 扩展,你必须写一个自定义的 编辑器模板来描述可视化组件。

在某些情况下,我认为使用编辑器模板有点僵硬 具有相同数据类型的多个模型属性。就我而言,我想在模型中使用十进制货币值,该值应显示为格式化字符串。我想在我的视图中使用相应的 CSS 类来设置这些属性的样式。

我见过其他实现,其中 HTML 参数已使用模型中的注释附加到属性中。我认为这很糟糕,因为视图信息(如 CSS 定义)应该在视图中设置,而不是在数据模型中设置。

因此我正在研究另一个解决方案:

我的模型包含一个decimal?属性,我想将其用作货币字段。 问题是,我想使用数据类型decimal?在模型中,但显示 视图中的十进制值作为使用格式掩码的格式化字符串(例如“42,13 €”)。

这是我的模型定义:

[DataType(DataType.Currency), DisplayFormat(DataFormatString = "{0:C2}", ApplyFormatInEditMode = true)]
public decimal? Price { get; set; }

格式掩码0:C2格式化decimal保留 2 位小数。这ApplyFormatInEditMode很重要, 如果您想使用此属性来填充视图中的可编辑文本字段。所以我把它设置为true,因为就我而言,我想将其放入文本字​​段中。

通常你必须使用EditorFor- 视图中的扩展如下:

<%: Html.EditorFor(x => x.Price) %>

问题:

我无法在此处附加 CSS 类,因为我可以使用Html.TextBoxFor例如。

提供自己的 CSS 类(或其他 HTML 属性,例如tabindex, or readonly)与EditorFor-扩展是编写一个自定义的HTML-Helper, 喜欢Html.CurrencyEditorFor。这是实现:

public static MvcHtmlString CurrencyEditorFor<TModel, TValue>(this HtmlHelper<TModel> html, Expression<Func<TModel, TValue>> expression, Object htmlAttributes)
{
  TagBuilder tb = new TagBuilder("input");

  // We invoke the original EditorFor-Helper
  MvcHtmlString baseHtml = EditorExtensions.EditorFor<TModel, TValue>(html, expression);

  // Parse the HTML base string, to refurbish the CSS classes
  string basestring = baseHtml.ToHtmlString();

  HtmlDocument document = new HtmlDocument();
  document.LoadHtml(basestring);
  HtmlAttributeCollection originalAttributes = document.DocumentNode.FirstChild.Attributes;

  foreach(HtmlAttribute attr in originalAttributes) {
    if(attr.Name != "class") {
      tb.MergeAttribute(attr.Name, attr.Value);
    }
  }

  // Add the HTML attributes and CSS class from the View
  IDictionary<string, object> additionalAttributes = (IDictionary<string, object>) HtmlHelper.AnonymousObjectToHtmlAttributes(htmlAttributes);

  foreach(KeyValuePair<string, object> attribute in additionalAttributes) {
    if(attribute.Key == "class") {
      tb.AddCssClass(attribute.Value.ToString());
    } else {
      tb.MergeAttribute(attribute.Key, attribute.Value.ToString());
    }
  }

  return MvcHtmlString.Create(HttpUtility.HtmlDecode(tb.ToString(TagRenderMode.SelfClosing)));
}

这个想法是使用原来的EditorFor- 生成 HTML 代码并解析此 HTML 输出字符串以替换创建的扩展 CSS Html-Attribute 带有我们自己的 CSS 类并附加其他附加 HTML 属性。对于 HTML 解析,我使用 HtmlAgilityPack(使用 google)。

在视图中你可以像这样使用这个助手(不要忘记将相应的命名空间放入web.config在你的视图目录中!):

<%: Html.CurrencyEditorFor(x => x.Price, new { @class = "mypricestyles", @readonly = "readonly", @tabindex = "-1" }) %>

使用这个助手,您的货币价值应该在视图中很好地显示。

如果您想发布视图(表单),那么通常所有模型属性都会发送到控制器的操作方法。 在我们的例子中,将提交一个字符串格式的十进制值,该值将由 ASP.NET MVC 内部模型绑定类处理。

因为这个模型绑定器期望decimal?-value,但是获取字符串格式的值,会抛出异常。所以我们必须 将格式化的字符串转换回原来的格式decimal?- 代表。因此一个自己的ModelBinder- 实施是必要的,这 将货币小数值转换回默认小数值(“42,13 €”=>“42.13”)。

以下是此类模型绑定器的实现:

public class DecimalModelBinder : IModelBinder
{

    public object BindModel(ControllerContext controllerContext, ModelBindingContext bindingContext)
    {
      object o = null;
      decimal value;

      var valueResult = bindingContext.ValueProvider.GetValue(bindingContext.ModelName);
      var modelState = new ModelState { Value = valueResult };

      try {

        if(bindingContext.ModelMetadata.DataTypeName == DataType.Currency.ToString()) {
          if(decimal.TryParse(valueResult.AttemptedValue, NumberStyles.Currency, null, out value)) {
            o = value;
          }
        } else {
          o = Convert.ToDecimal(valueResult.AttemptedValue, CultureInfo.CurrentCulture);
        }

      } catch(FormatException e) {
        modelState.Errors.Add(e);
      }

      bindingContext.ModelState.Add(bindingContext.ModelName, modelState);
      return o;
    }
}

活页夹必须在global.asax您的申请文件:

protected void Application_Start()
{
    ...

    ModelBinders.Binders.Add(typeof(decimal), new DecimalModelBinder());
    ModelBinders.Binders.Add(typeof(decimal?), new DecimalModelBinder());

    ...
}

也许该解决方案会对某人有所帮助。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何使用razor自定义EditorFor CSS 的相关文章

  • 从 CSS 调用 javascript 函数

    我想知道是否有可能以任何方式 button width somePX height somePX button hover onmouseup func button 或类似的东西 我想这会有点酷吗 而不是为每个按钮编写 onmouseup
  • CSS 中“!important”的反义词是什么?

    我正在构建一个 jQuery 插件 它使用 CSS 样式向嵌套 DIV 标签添加颜色和边距 由于我宁愿将插件保留为单个文件 因此我的代码使用 jQuery 将这些颜色和边距作为 CSS 属性直接添加到 DIV 中 css 方法 这些属性的值
  • 旋转后变换比例

    我有个问题 我正在将 div 旋转 45 度 然后我想在新的 y 轴上缩放它http jsfiddle net P37g5 2 http jsfiddle net P37g5 2 y 轴现在不是 45 度吗 我不确定我是否正确理解了这个问题
  • 如何使用溢出滚动设置 tbody 高度

    我在设置 tbody 高度宽度溢出滚动时遇到问题 h3 Table B h3 table style border 1px solid red width 300px display block thead tr td Name td td
  • 如何使 Flexbox 父级具有其子级的宽度?

    我有一个父元素 里面有两个元素 div class parent div class child one div div class child two div div 目前 parent 的宽度为 100 我希望它只是两个孩子的宽度 pa
  • 从资源文件获取 DisplayName [重复]

    这个问题在这里已经有答案了 我在 App GlobalResources 文件夹中有特定于文化的资源文件 现在我需要从此资源文件中读取 DisplayName 属性的值 我在用 Display Name MerchantName Resou
  • mvc中基于远程验证的错误

    这是我的控制器代码 AcceptVerbs HttpVerbs Post public JsonResult CheckBuildingName var isUnique true string buildingName Request F
  • 隐藏选择中的第一个选项[重复]

    这个问题在这里已经有答案了 我在下拉列表中有动态生成的选项 我想隐藏第一个选项 因为不需要 有没有跨浏览器兼容的方法来实现这一点 无论使用 jquery 还是 css 任何解决方案都是好的 Ahmar my drop down select
  • 如何更改单选按钮的默认外观而不是功能?

    在表单上我有两个单选按钮Yes and No 我想更改单选按钮的默认外观 喜欢这个 Edit 我想改变radio按钮进入 a 如果通过 CSS 更改默认单选按钮的外观并不容易 则在启用 JavaScript 时锚定 最简单的方法 将图像设置
  • 更改特定元素的滚动速度[关闭]

    很难说出这里问的是什么 这个问题是含糊的 模糊的 不完整的 过于宽泛的或修辞性的 无法以目前的形式得到合理的回答 如需帮助澄清此问题以便重新打开 访问帮助中心 help reopen questions 好吧 我不知道如何编写脚本 但是在
  • 如何设置 jQuery 可拖动的最小/最大左和最小/最大右

    我复制了一份JSbin来练习 JSbin链接在这里 https jsbin com gififikisa edit html css js output 实际站点链接在这里 http 79 170 40 181 emory com Proj
  • Safari 6 (iOS 6) 弹性布局不会换行元素

    我需要将两个框放在列中 这在我测试过的其他浏览器中有效 但在 iOS 6 上的 Safari 6 中无效 例子 http jsfiddle net 5FESj 1 http jsfiddle net 5FESj 1 display webk
  • 向下滚动时如何使图像移动?

    这是我想要实现的目标的示例 https www flambette com en https www flambette com en 我尝试过更改图像的 css 属性 但效果不能满足我的需求 我尝试过以下代码 mydocument on
  • 在 Bootstrap 3 中将容器类嵌套在容器流体类中?

    除了填充问题之外 为什么不建议将 container 嵌套在 container fluid 中 如果将子容器填充归零 如下面我的代码所示 则效果与拥有一个容器相同 此外 如今 不同的全宽和固定宽度布局似乎很常见 我知道文档说了什么 LIN
  • HTML 文件上传“未选择文件”文本样式

    我正在构建一个需要文件上传的 html 表单 当我让文件上传部分正常工作时 我无法获得表单上传按钮和 未选择文件 文本的样式 我想要的标记是 有办法做到吗 PS 请忽略绿色文本 上传屏幕截图 我有那个工作 当前行为按钮和 未选择文件 位于同
  • 清除 CSS 过渡

    我使用 CSS 框架 该框架在将鼠标移动到输入元素上时应用过渡 我有一堂课 我不想有这种转变 这可能吗 只需放置过渡 无 在CSS中并使其优先级高于其他 Example html div class a div div class a b
  • 为什么响应式图像需要“高度:自动”?

    是否有必要定义height auto现在 原因是什么 img max width 100 height auto Thanks 在没有明确设置高度尺寸的图像上 它实际上默认为自动高度 所以如果你设置max width 100 高度将由浏览器
  • 将一个 div 放置在另一个 div 的底部

    我有外部 div 和内部 div 我需要将内部 div 放在外部 div 的底部 外层div是有弹性的 例如宽度 70 我还需要将内部块居中 所述化妆的简单模型如下图所示 已在 Firefox 3 Chrome 1 和 IE 6 7 和 8
  • 当元素具有多个类时如何在 switch 语句中检查 className

    在下面的示例中 我只想单击该选项以在警报中显示 我正在尝试使用 switch 语句来确定单击了哪个类 如果我的 div 不包含多个类 则我的示例将有效 我尝试使用classList contains在我的 switch 语句中无济于事 有没
  • Ie11 不应用媒体查询样式

    IE11 忽略我的媒体查询并始终使用移动 CSS 奇怪的是 如果我改变浏览器宽度 即使只是 1 2 像素 浏览器也会自行渲染并显示媒体查询 我尝试了 css lint 我的 css 中没有错误 我的CSS没有什么特别的 只是简单的 css

随机推荐

  • 为什么类型参数绑定 >: 的方法允许子类型?

    考虑以下 Scala 中堆栈的简单实现 abstract class Stack A def top A def pop Stack A case object EmptyStack extends Stack Nothing def to
  • 浮点表示错误?

    当我做这个乘法时 0 94 8700 输出是 8177 999999999999 但它本来应该是 8178 我正在使用 java 但我不认为这个错误与特定的编程语言有关 现在我的问题是 为什么会发生这种事 还有哪些其他数字 仅作为示例 会导
  • GCD:如何从两个线程写入和读取变量

    无论如何 这听起来可能是一个新手问题 我是 GCD 新手 我正在创建并运行以下两个线程 第一个将数据放入ivarmMutableArray第二个从中读取 如何锁定和解锁线程以避免崩溃并保持代码线程安全 Thread for writing
  • Aux 模式在 Scala 中实现什么功能?

    我对 Aux 模式 如在 shapeless 和其他地方使用的 有一点了解 其中类型成员被提取到类型参数中 并且我知道这是一种解决方法 因为同一参数列表中的参数不能依赖彼此之间 但我一般不清楚它的用途以及它解决什么问题 例如 我目前正在尝试
  • 如何混淆(保护)JavaScript? [关闭]

    Closed 这个问题需要多问focused 目前不接受答案 我想制作一个非开源的 JavaScript 应用程序 因此我想了解如何混淆我的 JS 代码 这可能吗 混淆 尝试YUI压缩器 它是一个非常受欢迎的工具 由 Yahoo UI 团队
  • 使用 PHP 从 SQL Server 选择数据

    我正在尝试使用 PHP 从我的 PC 上的本地数据库中选择数据 但当我运行 127 0 0 1 test php 该文件的名称 时 出现此错误 error Fatal error Uncaught Error Call to undefin
  • 如何在 ASP.Net MVC 视图中使用下划线/javascript 模板

    我只是想知道如何在 aspx 视图中使用下划线模板 因为下划线使用的 标记被 aspx 渲染引擎拾取并给我错误 例如 该模板给了我一个错误 因为 aspx 渲染引擎认为我正在尝试将这些东西绑定到模型 Thanks 来自精美手册 templa
  • iOS 上的 iframe 大小与 CSS

    有一个 iframe 它的内容基本上超出了框架的容纳范围 框架的大小基于浏览器屏幕大小 并让溢出滚动 这在除 iOS 之外的所有浏览器上都能完美运行 在 iOS 上 safari 决定调整框架大小以适应内容 不是你所期望的 jsFiddle
  • Azure Key Vault 证书 - 创建基本约束 CA:True

    我想通过 Azure 门户 Azure Key Vault 创建自签名 CA 证书 我不知道如何设置 X509 扩展基本约束 CA True 一些参考链接 https learn microsoft com en us powershell
  • 匹配以前缀开头的子字符串

    我被一些正则表达式困住了 我试图使用正则表达式匹配以给定前缀开头的每个子字符串 在 JavaScript 中 prefix pre regex pre foo bar bar pre bar barfoo replace regex sho
  • 如何从 Android 调用 RESTful Web 服务?

    我使用 Jersey Framework 和 Java 在 Netbean IDE 中编写了一个 REST Web 服务 对于用户需要提供用户名和密码的每个请求 我知道这种身份验证不是最佳实践 使用如下的curl命令 curl u user
  • Mongodb身份验证[重复]

    这个问题在这里已经有答案了 如何通过官方 C 驱动程序使用 mongodb 进行身份验证 除了内部成员之外 我找不到任何用于身份验证的 API 方法 应使用以下连接字符串格式在连接字符串中指定身份验证凭据 mongodb username
  • ChartJS 3 不显示图例

    我正在使用 ChartJS 3 7 即使我通过了options plugins legend display a true 图例不显示 如何让图例显示 看起来较新版本的 ChartJS 要求您注册要使用的各个元素 您需要专门注册图例 imp
  • 使用 Google 登录的 OAuth2 Spring 安全性不起作用

    我在下面的链接中找到了一个关于使用 Spring security 进行第三方登录的非常好的教程 它包含前端和后端代码 https www callicoder com spring boot security oauth2 social
  • 使用多个数据库运行 Laravel 队列

    我有 Laravel 5 项目 这是多租户项目 因此我有一个包含多个数据库的文件夹项目 当我使用php artisan queue listen 它仅适用于当前的数据库设置 我用database队列驱动程序 因此每个租户都有自己的通知表 如
  • 纠正缺少 ASP.Net MVC 控制器的 404 消息

    我有一个 MVC 2 应用程序 它应该始终提供 漂亮 的 404 页面 然而目前我得到了一个低级别的 Net sitename 应用程序中的服务器错误 我有一个基本控制器 它有一个NotFound将呈现漂亮的 404 页面的操作 处理缺失的
  • 如何使用 Selenium 为 Firefox 和 Chrome 禁用推送通知?

    我想在通过 Selenium Webdriver 启动 Firefox 浏览器时禁用通知 我发现这个答案 但它已被弃用 并且在 Firefox 上对我不起作用 但它在 Chrome 上完美工作 我将这种依赖关系用于我的pom xml
  • ORA-22275: 指定的 LOB 定位器无效

    我有一个巨大的 Oracle 函数 用于计算 6 个表中的数据 create or replace FUNCTION STATISTICS FUNCTION NAMEIN IN VARCHAR2 RETURN CLOB AS LAST 60
  • 从标准库中重新定义函数是否违反了单一定义规则?

    include
  • 如何使用razor自定义EditorFor CSS

    我有这门课 public class Contact public int Id get set public string ContaSurname get set public string ContaFirstname get set