如何解决我无法使用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
与模型属性名称不匹配。
您需要先阅读模型绑定系统如何工作:
这是您可以参考的有效演示:
型号:
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...
}
结果:
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。