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

Question

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

因此，我需要我的应用程序执行的操作是，一旦选择了开始日期和结束日期，我将单击按钮，它将带回所选期间的数据。 我可以选择日期，但由于某种原因该按钮不起作用，因此无法单击它。 调试给我一个错误，说：

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>

    }