我无法将范围选择器值与 asp Net Core 模型绑定

Question

我在我的 Asp Net Core Project 中使用了引导日期范围选择器。 我想用我的模型绑定价值，但我做不到。

这是我的代码：

<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', function (ev, picker) {
                $(this).val('');
            });
        });

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

public string date { get; set; }

Answer 1

无法获取字符串值的原因是输入名称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', function (ev, picker) {
                $(this).val('');
            });
        });
    </script>
}

控制器：

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

结果：