【问题标题】:Giving EditorFor an ID Attribute给 EditorFor 一个 ID 属性
【发布时间】:2014-07-26 19:00:02
【问题描述】:

我有一个视图模板以及许多从EditorFor 提取输入的 JQuery。出于这个原因,我宁愿继续使用我的EditorFor 而不是使用<input type="text"> 之类的东西

我现在已经实现了一个 datepicker,我只需要一个 ID 属性来让它发挥它的魔力($('#datepicker').datepicker();),所以我想知道有没有办法强制编辑器上的id

这是我迄今为止的尝试。

@Html.EditorFor(modelItem => item.ReleaseDate, new {@id ="datepicker" })

如果该“应该”起作用,是否还有其他可能导致问题的原因?

我在使用这个 datepicker 的同一个视图中为 modal 使用 <input> 标记很好,所以我知道它有效,但我根本无法获得 @ 987654329@ 使用它。

谢谢!

编辑:@ForEach 将添加日期选择器的每个项目添加到每个项目的 releaseDate。 (第二个td 下)

 @foreach (var item in Model)
        {

            <tr>

                <td class="col-lg-2">
                    <span class="item-display">
                        <span style="font-size: 17px;">
                            @Html.DisplayFor(modelItem => item.Name)
                        </span>
                    </span>
                    <span class="item-field">
                        @Html.EditorFor(modelItem => item.Name)
                    </span>

                </td>


                <td class="col-lg-3">
                    <span class="item-display">
                        <span style="font-size: 17px;">
                            @Html.DisplayFor(modelItem => item.ReleaseDate)
                        </span>
                    </span>
                    <span class="item-field">
                       @Html.TextBoxFor(modelItem => item.ReleaseDate, new {@id="datepicker"})
                        @*@Html.EditorFor(modelItem => item.ReleaseDate, new {@id ="datepicker" })*@

                    </span>

                </td>


                <td class="col-lg-3">
                    <span class="item-display">
                        <span style="font-size: 17px; font-style:italic">
                            @Html.DisplayFor(modelItem => item.Description)
                        </span>
                    </span>
                    <span class="item-field">
                        @Html.EditorFor(modelItem => item.Description)
                    </span>
                </td>


                <td class="col-lg-3 col-lg-offset-1">
                    <span style="visibility:hidden" class="ID col-lg-1">@Html.DisplayFor(modelItem => item.ID)</span>

                    <span class="item-edit-button">
                        <button type="button" onclick="editFunction(this)" class=" btn btn-warning col-lg-3 col-lg-offset-0"><span style="margin-right: 5px" class="glyphicon glyphicon-pencil"></span>Edit</button>
                    </span>

                    <span class="item-save-button">
                        <button type="button" onclick="saveFunction(this)" class="btn btn-success col-lg-3 col-lg-offset-4"><span style="margin-right: 5px" class="glyphicon glyphicon-trash"></span>Save</button>
                    </span>
                    <!-- Modal Button-->
                    <span class="item-delete-button">
                        <button class="btn btn-danger col-lg-3 col-lg-offset-3" data-toggle="modal" data-target="#@item.ID" onclick="deleteStart(this)">
                            <span style="margin-right: 5px" class="glyphicon glyphicon-trash"></span>Delete
                        </button>
                    </span>

                    <!-- Modal -->
                    <div class="modal fade" id="@item.ID" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header" style="background-color: #d9534f">
                                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                    <h4 class="modal-title" id="myModalLabel" style="font-size: 30px; font-style:oblique; color:white">Delete</h4>
                                </div>
                                <div class="modal-body">
                                    <span style="font-size: 20px">Are you sure you want to delete movie: @Html.DisplayFor(modelItem => item.Name)?</span>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" onclick="deleteStopped(this)" class="btn btn-default" data-dismiss="modal">Cancel</button>
                                    <button type="button" style="margin-right:10px" onclick="deleteFunction(this)" class="btn btn-danger">Delete</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </td>
            </tr>

            <tr>

                <td colspan="12">
                    <p style="font-size: 17px; font-style: italic; font-family: 'Roboto', sans-serif">
                        Movie ID: @Html.DisplayFor(modelItem => item.ID)
                        <br />
                        Placeholder
                    </p>
                </td>
            </tr>

        }

【问题讨论】:

    标签: javascript jquery asp.net-mvc data-binding datepicker


    【解决方案1】:

    Html.EditorFor() helper 没有采用 html 属性的重载,请使用 Html.TextBoxFor() helper:

    @Html.TextBoxFor(modelItem => item.ReleaseDate, new {@id ="datepicker" })
    

    这是Html.EditorFor()MSDN 文档,hereHtml.TextBoxFor() 的文档

    注意:

    当你写作时:

    @Html.EditorFor(modelItem => item.ReleaseDate)
    

    它是这样渲染的:

    <input type="text" name="ReleaseDate" id="ReleaseDate"/>
    

    所以它将 id 和 name 属性设置为 Model 属性,所以如果你想使用 Html.EditorFor() helper,你可以使用那个 id。

    【讨论】:

    • 所以听起来我必须修改所有处理 EditorFor 的 JQuery 并将其转换为 TextBoxFor?
    • 不,你不需要修改 jquery 代码,因为它们都呈现相同的 html
    • &lt;input type="text" name="ReleaseDate" id="ReleaseDate" /&gt;
    • 啊所以设置/接收是一样的?像 .val()、.text()。和 .html()
    • 明白了!好的,我添加了它,但仍然没有发生任何事情,接下来我应该看什么?
    猜你喜欢
    • 1970-01-01
    • 2010-12-10
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-04-13
    • 1970-01-01
    • 2019-08-03
    • 2014-11-01
    相关资源
    最近更新 更多