Question

我想使用JQuery UI datepicker和ASP：NET MVC帮助器。以下是我的View的源代码：我的问题是，如何使用@ Html.Editorfor行作为jquery UI下拉列表？提前谢谢。

为简洁起见，省略了这些部分：

        <div>
        <div class="editor-label">
            <label>Memuriyete başlangıç tarihiniz nedir? </label>
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.MemuriyetBaslamaTarihi,null, new { id = "drpMemuriyetBaslama" })
            @Html.ValidationMessageFor(model => model.MemuriyetBaslamaTarihi)
        </div>
    </div>

<script>
    $(function () {
        $("#drpMemuriyetBaslama").datepicker();
    });
</script>

脚本引用放在_Layout.cshtml中：

    <!DOCTYPE html>
<html>
<head>

    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    <link href="/Content/Site.css" type="text/css" rel="stylesheet" />    
    <link href="/Scripts/jquery-ui.css" rel="stylesheet" />
    <link href="~/Scripts/MenuStyle.css" rel="stylesheet" />

    <script src="/Scripts/jquery-2.1.4.min.js"></script>
    <script src="/Scripts/jquery-ui-1.11.4.min.js"></script>
    <script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>


</head>
<body>
    <div id="header">
        <div class="title">Lojman Bilgi Sistemi</div>
    </div>
    <div id="categories">
        @{ Html.RenderAction("Menu", "Nav"); }
    </div>
    <div id="content">
        @RenderBody()
    </div>
</body>
</html>

以下是datepicker的示例用法：https://jqueryui.com/datepicker/#animation

Answer 1

您

@Html.EditorFor(model => model.MemuriyetBaslamaTarihi, null, new { id = "drpMemuriyetBaslama" })

未生成id="drpMemuriyetBaslama"元素，因此

$("#drpMemuriyetBaslama").datepicker();

将抛出错误，因为$("#drpMemuriyetBaslama")未定义

除非您使用MVC-5.1或更高版本，否则无法使用EditorFor()方法添加html属性，如果您使用，则语法必须为

@Html.EditorFor(m => m.MemuriyetBaslamaTarihi, new { htmlAttributes = new { id = "drpMemuriyetBaslama" } })

生成表单控件的所有HtmlHelper都会根据属性名称添加默认的id属性（在您的情况下，它将是id="MemuriyetBaslamaTarihi"），所以除非您有更改它的具体原因，否则可以简单地使用

@Html.EditorFor(m => m.MemuriyetBaslamaTarihi)

和

$("#MemuriyetBaslamaTarihi").datepicker();

或者，如果您想更改默认的id属性，请使用

@Html.TextBoxFor(m => m.MemuriyetBaslamaTarihi, new { id = "drpMemuriyetBaslama" })

使用jquery UI和mvc帮助程序

1 个答案: