我无法使用ASP Net Core Model绑定范围选择器值

问题描述

我在Asp Net Core项目中使用了引导日期范围选择器。 而且我想将价值与我的模型绑定，但我无法做到这一点。

这是我的代码：

<div class="form-group">
<label asp-for="date">Start Date*</label>
<input type="text" asp-for="date" name="datefilter"  />
<div class="invalid-Feedback">
Please Select Start Date.
</div>
</div>
</div>

这是我的日期范围选择器的jQuery代码：

$(function () {

            $('input[name="datefilter"]').daterangepicker({
                autoUpdateInput: false,locale: {
                    cancelLabel: 'Clear'
                }
            });

            $('input[name="datefilter"]').on('apply.daterangepicker',function (ev,picker) {
                $(this).val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format('MM/DD/YYYY'));
            });

            $('input[name="datefilter"]').on('cancel.daterangepicker',picker) {
                $(this).val('');
            });
        });

这是我要与之绑定此日期范围选择器值的模型：

public string date { get; set; }

解决方法

之所以无法获得字符串值，是因为输入名称datefilter与模型属性名称不匹配。

您需要先阅读模型绑定系统如何工作：

https://docs.microsoft.com/en-us/aspnet/core/mvc/models/model-binding?view=aspnetcore-3.1#complex-types

这是您可以参考的有效演示：

型号：

public class TestModel
{
    public string date { get; set; }
}

查看：

@model TestModel
<form asp-controller="Home" asp-action="Test">
    <div class="form-group">
        <label asp-for="date">Start Date*</label>
        <input type="text" asp-for="date" name="date" />
        <div class="invalid-feedback">
            Please Select Start Date.
        </div>
    </div>
    <input type="submit" value="Submit" />
</form>

@section Scripts
{
    <script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
    <script>
        $(function () {
            $('input[name="date"]').daterangepicker({
                autoUpdateInput: false,locale: {
                    cancelLabel: 'Clear'
                }
            });
            $('input[name="date"]').on('apply.daterangepicker',function (ev,picker) {
                $(this).val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format('MM/DD/YYYY'));
                var data = {
                    date: picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format('MM/DD/YYYY')
                };
            });

            $('input[name="date"]').on('cancel.daterangepicker',picker) {
                $(this).val('');
            });
        });
    </script>
}

控制器：

[HttpPost]
public void Test(TestModel test)
{
    //do your stuff...
}

结果：