如何在ASP.net中选择开始和结束日期后显示结果按钮

Question

我正在做我的第一个ASP.net MVC应用程序，我正面临一些我不知道如何解决的问题。我一直试图从这里找到答案，但到目前为止没有运气，所以我真的希望你能帮助我。

所以我需要我的应用程序做的是，一旦我选择开始日期和结束日期，我将点击按钮，它将从选定的时间段带回数据。我可以选择日期但由于某种原因按钮不起作用，我无法点击它。 Debuging给我一个错误说：

SCRIPT5022：InvalidStateError

我认为问题出在这里，但我不确定：

var startdate = $("#startdate").datepicker('getDate');

我尝试通过这样编写来测试按钮：

var startdate = "";

它需要我到控制器，但如果它有一个值它不工作。我在MVC视图中的代码如下：

@model Proovitoo_v4.Models.DatePickerModel
@{
    ViewBag.Title = "Index";
}

@using (Html.BeginForm())
{
    <label>Start date</label><br />
    @Html.EditorFor(model => model.StartDate, new { htmlAttributes = new { @class = "datepicker"@*, @required = "true", type = "date", value = "startdate"*@ } })
    <br />
    <label>End date</label><br />
    @Html.EditorFor(model => model.EndDate, new { htmlAttributes = new { @class = "datepicker"@*, @required = "true", type = "date", value = "enddate"*@ } })

}
<br />
<br />
<input id="btnSubmit" type="button" value="Show electricity consumption" @*onclick="location.href='@Url.Action("FilterByDate", "FilterByDate")'"*@ />
<br />

@section scripts{
    <script src="~/Scripts/jquery-ui-1.12.1.min.js"></script>
    <script>
        $(function algus() {
            $(".datepicker").datepicker({
                dateFormat: "dd.mm.yy",
                changeMonth: true,
                changeYear: true,
                showWeek: true,
                yearRange: "2010:2018",
                minDate: new Date(2010, 0, 1),
                maxDate: new Date(2018, 0, 1),
                showOn: "both",
                buttonText: "Select"
            });
        });
        $(function () {
            $("#startdate").datepicker({ dateformat: "dd.mm.yy" });
            $("#enddate").datepicker({ dateformat: "dd.mm.yy" });
            $("#btnSubmit").click(function (e) {
                e.preventDefault();
                var startdate = $("#startdate").datepicker('getDate');
                console.log(startdate);
                var enddate = $("#enddate").datepicker('getDate');
                console.log(enddate);
                var datefilter = { StartDate: startdate, EndDate: enddate };
                console.log(datefilter);

            $.ajax({
                url: "@Url.Action("FilterByDate", "DatePicker")",
                type: "get",
                data: datefilter
            })
            .done(function(datepicker) {
                $("#res").html(tmpConsumptions);
            });
        });
    });
    </script>
}

Answer 1

我得到了一些额外的帮助。感谢您的支持。这是我的工作解决方案：

@model Proovitoo_v4.Models.DatePickerModel
@{
    ViewBag.Title = "Index";
}     
    @using (Html.BeginForm())
    {
        <label>Start date</label><br />
        @Html.TextBoxFor(model => model.StartDate, new { @class = "datepicker" })
        <br />
        <label>End date</label><br />
        @Html.TextBoxFor(model => model.EndDate, new { @class = "datepicker" })
    }
    <br />

<br />

    <input id="btnSubmit" type="button" value="Show electricity consumption"/>

<br />

@section scripts{

    <script src="~/Scripts/jquery-ui-1.12.1.min.js"></script>
    <script>
        $(function algus() {
            $(".datepicker").datepicker({
                dateFormat: "dd.mm.yy",
                changeMonth: true,
                changeYear: true,
                showWeek: true,
                yearRange: "2015:2018",
                minDate: new Date(2010, 0, 1),
                maxDate: new Date(2018, 0, 1),
                showOn: "both",
                buttonText: "Select"
            });
        });
        $(function () {
            $("#startdate").datepicker({ dateformat: "dd.mm.yy" });
            $("#enddate").datepicker({ dateformat: "dd.mm.yy" });
            $("#btnSubmit").click(function (e) {
                e.preventDefault();
                var startdate = $("#StartDate").val();
                console.log(startdate);
                var enddate = $("#EndDate").val();
                console.log(enddate);
                var datefilter = { StartDate: startdate, EndDate: enddate };
                console.log(datefilter);
                console.log('@Url.Action("FilterByDate", "DatePicker")');

            $.ajax({
                url: "@Url.Action("FilterByDate", "DatePicker")",
                    type: "POST",
                    data: JSON.stringify(datefilter),
                    contentType: 'application/json; charset=utf-8'
                })
                    .done(function (datepicker) {
                        $("#res").html(tempConsumtion);
                    });
        });
});
    </script>

    }