ASP.Net @Html.TextBox 日期选择器

Posted

技术标签:

【中文标题】ASP.Net @Html.TextBox 日期选择器【英文标题】:ASP.Net @Html.TextBox Datepicker 【发布时间】:2016-11-01 16:18:10 【问题描述】:

我正在尝试在@html.TextBox 上放置一个日期选择器。日期字段将用作搜索条件字段,以便我可以将日期条目与表中的日期进行比较。这就是我的脚本:

<link href="~/Content/ui_1.10.4_themes_smoothness_jquery-ui.css" rel="stylesheet" />
<script src=" ~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>

<script>
$(document).ready(function () 
    $("#getdate").each(function () 
        $(this).datepicker();
    );
);

这就是我的文本框所拥有的:

Date Received: @Html.TextBox("SearchString5",  new @class="getdate", ViewBag.CurrentFilter as string)

结果是new @class="getdate" 出现在文本框中。

【问题讨论】:

尝试“.getdate”而不是#getdate 【参考方案1】:

那是因为Html.TextBox..的重载方法你的参数搞砸了。

它们应该是这样的:

public static MvcHtmlString TextBox(
    this HtmlHelper htmlHelper,
    string name,
    object value,
    string format,
    object htmlAttributes
)

根据您的具体情况:

@Html.TextBox("SearchString5",ViewBag.CurrentFilter as string, new @class="getdate")

此外,在您的 JS 中,您使用 #.. 引用 ID,但您需要使用 . 引用 class

$(document).ready(function () 
    $(".getdate").each(function () 
        $(this).datepicker();
    );
);

【讨论】:

【参考方案2】:

整个代码看起来有问题,首先你要添加一个类 getdate 并且在 jquery 中你使用的是 id 选择器

$(document).ready(function () 
$("#getdate").each(function () 
    $(this).datepicker();
);
);

这应该是

$(document).ready(function () 
    $(".getdate").each(function () 
        $(this).datepicker();
    );
);

你在帮助器中缺少值参数的第二件事,应该是这样的

Date Received: @Html.TextBox("SearchString5",ViewBag.CurrentFilter as string,  new @class="getdate")

【讨论】:

【参考方案3】:

您的参数顺序不正确。它应该是第一个元素名称,然后是值,然后是 html 属性。这样写:

@Html.TextBox("SearchString5",ViewBag.CurrentFilter as string, new @class="getdate")

见this overload in documentation at MSDN

现在在 jquery 中使用类选择器,因为 html 的每个元素的 id 应该是唯一的:

$(document).ready(function () 
$(".getdate").each(function () 
    $(this).datepicker();
);

【讨论】:

谢谢大家。我之前尝试过 .getdate ,但是最后两个参数的顺序错误。我得到了我的日期选择器,但是我的日期搜索仍然不起作用。【参考方案4】:

您的最后两个参数顺序错误

试试:

Date Received: @Html.TextBox("SearchString5",ViewBag.CurrentFilter as string,  new @class="getdate")

您的 jquery 也在寻找 id=getdate,但您的 html 将类指定为 getdate

【讨论】:

【参考方案5】:

您使用的参数顺序不正确。应该是:

@Html.TextBox("SearchString5", "6/30/2016", new  @class="getdate" )

查看这个重载表单:

https://msdn.microsoft.com/en-us/library/system.web.mvc.html.inputextensions.textbox(v=vs.118).aspx#M:System.Web.Mvc.Html.InputExtensions.TextBox%28System.Web.Mvc.HtmlHelper,System.String,System.Object,System.Object%29

【讨论】:

只是想知道,值和htmlAttributes之间不需要null参数吗? 这只是另一种接受format参数的重载形式。请参阅msdn.microsoft.com/en-us/library/… 虽然两者都有效,但为什么我们需要传递 null 的参数?

以上是关于ASP.Net @Html.TextBox 日期选择器的主要内容,如果未能解决你的问题,请参考以下文章

Asp.Net Mvc - Html.TextBox - 设置自动对焦属性

在ASP.NET MVC中使用DropDownList

如何使用 jquery 或 ajax 在 c#/asp.net 中为 MVC 项目更新 razor 部分视图

定位日期选择器按钮

如何在 ASP.net Core 中创建日历日期/选择器?

以不同语言显示引导日期选择器日期,然后在 asp.net razor 视图中以英文提交日期