在.NetCore 2.0 MVC中遇到JQuery DatePicker问题

时间:2018-04-30 07:52:06

标签: asp.net-core-mvc jquery-ui-datepicker

我似乎很难让Jquery datepicker在我的基本CRUD应用程序中运行。我使用NuGet Package Manger来安装Jquery UI.Combined库:

https://ibb.co/mmEfic

在我的_Layout.cshtml文件中,我有以下脚本标记:

    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script>
        $(function () {
            $("#datepicker").datepicker();
        });
    </script>

(我的ViewStart文件中引用了_Layout.cshtml)

最后,我试图在我的视图中使用Datepicker:

@model GymTracker.ViewModel.MemberViewModel

@{
    ViewData["Title"] = "Create";
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">



<h2>Create</h2>

<h4>Member</h4>
<hr />
<div class="row">
    <div class="col-md-4">
        <form asp-action="Create">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <div class="form-group">
                <label asp-for="FirstName" class="control-label"></label>
                <input asp-for="FirstName" class="form-control" />
                <span asp-validation-for="FirstName" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="LastName" class="control-label"></label>
                <input asp-for="LastName" class="form-control" />
                <span asp-validation-for="LastName" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="DateOfBirth" class="control-label"></label>

           @Html.TextBox("datetimepicker")


            </div>
            <div class="form-group">
                <label asp-for="PaymentType" class="control-label"></label>
                @Html.DropDownListFor(model => model.PaymentType, Html.GetEnumSelectList(typeof(Membershiptype)))

                <span asp-validation-for="PaymentType" class="text-danger"></span>
            </div>
            <div class="form-group">
                <input type="submit" value="Create" class="btn btn-default" />
            </div>
        </form>
    </div>
</div>

<div>
    <a asp-action="Index">Back to List</a>
</div>




@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}

任何人都可以看到我做错了什么。当然是这条线:

@ Html.TextBox( “的DateTimePicker”)

会渲染Jquery日期选择器吗?

任何帮助将不胜感激。谢谢

1 个答案:

答案 0 :(得分:1)

我遇到了同样的问题,但从未找到“干净”的解决方案-但这是我可以解决的方法:

输入一个简单的div和输入字段,然后隐藏实际的表单字段(调整空格对齐):

In [29]: npL = np.random.randint(1,1000,(100000,2)) + np.random.choice(np.random.random(1000), (100000, 2))

In [30]: L = npL.tolist()

In [31]: %timeit sorted(unique(L, key=tuple))
143 ms ± 2.35 ms per loop (mean ± std. dev. of 7 runs, 10 loops each)

In [32]: %timeit sorted({tuple(x): x for x in L}.values())
134 ms ± 1.14 ms per loop (mean ± std. dev. of 7 runs, 10 loops each)

In [33]: %timeit np.unique(L, axis=0)
78.5 ms ± 1 ms per loop (mean ± std. dev. of 7 runs, 10 loops each)

In [34]: %timeit np.unique(npL, axis=0)
54 ms ± 398 µs per loop (mean ± std. dev. of 7 runs, 10 loops each)

# @Paul Panzer's solution:

In [36]: import itertools

In [37]: %timeit [k for k, g in itertools.groupby(sorted(L))]
123 ms ± 3.42 ms per loop (mean ± std. dev. of 7 runs, 10 loops each)

# @user3483203 solution:

In [54]: %timeit lex(np.asarray(L))
60.1 ms ± 744 µs per loop (mean ± std. dev. of 7 runs, 10 loops each)

In [55]: %timeit lex(npL)
38.8 ms ± 728 µs per loop (mean ± std. dev. of 7 runs, 10 loops each)

在提交上添加一个ID:

<div>
            &nbsp;  &nbsp; Ride Date <br />
            &nbsp;  &nbsp; <input type="text" id="datepicker">
        </div>

        <div class="form-group d-none">
            <label asp-for="RideDate" class="col-md-6 control-label"></label>
            <div class="col-md-6">
                <input asp-for="RideDate" class="form-control" />
                <span asp-validation-for="RideDate" class="text-danger"></span>
            </div>
            <br />
        </div>

然后将用户选择的日期移至实际输入字段:

        <div class="row justify-content-md-center">
            <div class="form-group">
                <div class="col-md-5">
                    <button id="fixtime" type="submit" class="btn btn-primary">Add Comment</button>
                </div>
            </div>
        </div>

不是很优雅,但是可以。 m