如何使用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 选择器是什么? [类* =“跨度”]

    我在 Twitter Bootstrap 中看到了这个选择器 show grid class span background color eee text align center border radius 3px min height
  • 相对于变换元素的绝对定位元素位置

    我重新创建了我在模板中遇到的问题 有一个nav具有position relative 在 的里面nav有一个div有两个嵌套列表 其中一个列表的位置绝对固定在列表的底部nav 当div对其应用了变换 当 的时候div在绝对和相对定位的元素之
  • 显示带有背景颜色的百分比条

    例如 如果我有一个包含两列和 2 行的表 Col1 Percentage 50 50 70 70 如何用代表 COl1 值的颜色填充百分比列 像这样的东西 您可以使用具有两个紧接着的停止点的线性渐变 percentageFill heigh
  • Symfony 2 使用 CSS 设置背景图片

    I want to put a background image for a menu in symfony But I can t figure out how to do it I managed to style a lot of t
  • 由于固定导航,增加了 FancyBox v2 的顶部和底部边距

    我目前正在开发一个网站 该网站将来将具有响应能力 该网站主要由图像组成 单击这些图像会加载到 FancyBox 中 FancyBox v2 现在具有响应能力 因此可以在屏幕尺寸发生变化时重新调整图像等的大小 作为我设计的一部分 我有两个固定
  • 文本后面有粗下划线

    如何使用 span 和 css 在文本 ABC 后面重现这种下划线 我已经能够做下划线below嵌套的文本span和彩色的border bottom 但无法获取behind图像和above文本基线 p style font size 48p
  • 如何设置旋转元素背面的样式?

    我有一个figure它是可旋转的 通过用户输入任意角度 该旋转明显地使用transition财产 当该元件旋转超过 90 度 90 度时 元件的背面可见 我想对元素的通常隐藏的一面进行与正面不同的设计 但我不确定如何实现这一点 figure
  • 在 IE 8 及以下版本中动态添加 @font-face 规则

    我使用 IE stylesheet addRule 方法添加 font face 规则 但是 符号对于该方法的 选择器 参数来说是不允许的字符 因此我收到 无效参数 错误 s addrule font face font family Fo
  • 如何在 MVC3 Razor 视图中呈现数据表

    我在 xls 电子表格 1 之间有一个可靠且经过测试的导入方法 该方法返回DataTable 我已将其定位在我的服务层中 而不是数据中 因为只有工作簿作为上传文件保存 但现在我想知道在哪里以及如何生成此内容的 HTML 表示形式DataTa
  • 使用 CSS 的平行四边形导航背景

    我正在尝试创建此导航菜单 绿色突出显示是活动页面 灰色是悬停状态 我可以使用以下 CSS 制作平行四边形 ul nav li a text decoration none padding 4px 10px border radius 3px
  • ASP.NET MVC ActionFilterAttribute 在模型绑定之前注入值

    我想创建一个自定义操作过滤器属性 该属性在模型绑定期间可访问的 HttpContext 项中添加一个值 我尝试将其添加到 OnActionExecuting 中 但似乎模型绑定是在过滤器之前执行的 你知道我该怎么做吗 也许模型绑定器中有一个
  • 每 3 秒重复一次动画

    我正在使用 WOW js 和 animate css 现在我正在将 CSS 运行到 Infinite 我想知道如何让我的课程运行 3 秒停止并再次开始到无限 My html img src images fork png class for
  • 禁用引导列上的滚动

    我正在尝试禁用引导列上的滚动 这是我的代码 div class container fluid h 100 div class row h 100 div class col 4 h 100 bg dark fixed div div cl
  • 如何更改bootstrap中form-control弹出窗口中必填字段的默认消息?

  • 如何设置菜单按钮和菜单项的样式

    我尝试更改菜单按钮中的样式 我可以更改菜单按钮样式 但不能更改其菜单项 无论我尝试什么 菜单按钮内的菜单项都保持不变 menu button fx background color black menu button label fx ba
  • 现在 CSS3 供应商前缀有多必要? [复制]

    这个问题在这里已经有答案了 我只是想知道现在在 CSS 中指定 webkit moz ms 或 o 等供应商前缀在多大程度上仍然有必要 如果我理解正确的话 opera 切换到了 webkit 所以会删除 o 对吗 IE 在 IE10 中不再
  • 避免响应式页面的重复内容

    我目前正在做一个涉及响应式设计的项目 整个布局应该使用HTML和CSS来实现 我知道可以使用 java 脚本将内容从一个列布局移动到另一列布局 而无需复制内容 但是使用 HTML 和 CSS 是否可以实现相同的效果 以下面的例子为例 它会在
  • 更改文本输入标签中文本的大小?

    我有一个很大的文本输入框 但我无法更改字体大小
  • 为什么元素上的负底部边距会降低该元素父元素的高度?

    这可能是由于边距折叠造成的 我知道边距折叠 至少知道它如何影响相邻元素 但我不明白当涉及负边距时它如何在嵌套元素上工作 例如 在此标记和随附的 CSS 中 Markup div class parent div class child Ch
  • 带有相对路径的 LESS CSS 背景

    我在使用 LESS 作为我的网站的样式表时遇到了问题 就我个人而言 我宁愿在CSS中使用相对路径而不是绝对路径 这只是我的习惯 但是现在当我使用带有导入功能的LESS时 我遇到了如下所示的问题 我有一个main less根文件夹中的文件 i

随机推荐

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

    考虑以下 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