ASP.Net MVC 5 - 如何使用 html 辅助方法更改原始 html？答案

【问题标题】：ASP.Net MVC 5 - how to change raw html with html helper methods?ASP.Net MVC 5 - 如何使用 html 辅助方法更改原始 html？
【发布时间】：2018-08-12 12:31:20
【问题描述】：

我有以下 html 代码，我想将其更改为使用 html 辅助方法。

<div class="form-group col-sm-4 col-md-4 col-lg-4">
    <label>Date of Birth</label>
    <div class="input-group date" id="dtp">
        <input name="Birthday" id="txtBirthday" class="form-control" onfocus="$(this).next().trigger('click')" onkeydown="event.preventDefault()" />
        <span class="input-group-addon">
            <span class="glyphicon glyphicon-calendar"></span>
        </span>
    </div>
    @Html.ValidationMessageFor(m => m.Birthday)
</div>

我想使用 html 辅助方法将上面的 html 代码更改为以下代码，但我不知道如何在下面的代码中编写 onkeydown="event.preventDefault()" 和 $(this).next().trigger('click')"。

<div class="form-group col-sm-4 col-md-4 col-lg-4">
    @Html.LabelFor(m => m.Birthday)
    @Html.EditorFor(m => m.Birthday, new { @class = "form-control", id="txtBirthday" })    
    @Html.ValidationMessageFor(m => m.Birthday)
</div>

【问题讨论】：

使用@Html.TextBoxFor()或者如果EditorFor，则格式为@Html.EditorFor(m => m.Birthday, new { htmlAttributes = new { @class = "form-control" } })
@StephenMuecke 我想用@Html.TextBoxFor()，但是我要怎么写onkeydown="event.preventDefault()"呢？
停止用行为污染你的标记 - 使用Unobtrusive Javascript - $('#Birthday').keydown(function(e) { ... });
而$(this).next().trigger('click')" 作为一个属性没有意义，所以不清楚你想用它做什么。

标签： html asp.net-mvc-5 html-helper

【解决方案1】：

您可以将 onfocus 和 onkeydown 添加到您添加 @class = "form-control 的同一对象中。如下图所示

@Html.EditorFor(m => m.Birthday, new { @class = "form-control", id="txtBirthday", onkeydown = "event.preventDefault()", onfocus = "$(this).next().trigger('click')" })

【讨论】：