C# Razor Pages.NetCore OnPost处理程序
我正在使用.NetCore Razor Pages进行一个C语言项目,我有一个页面,其中用户通过填写一些字段来预约 我有一个日历字段,用户可以从中选择日期。基于该日期,我想用一个可用于约会的小时列表填充一个下拉列表 我尝试使用OnPost之类的处理程序,但这需要一个提交按钮,但我只有日历输入 这是我在我的Razor页面中用于日历的代码C# Razor Pages.NetCore OnPost处理程序,c#,asp.net-core,handler,C#,Asp.net Core,Handler,我正在使用.NetCore Razor Pages进行一个C语言项目,我有一个页面,其中用户通过填写一些字段来预约 我有一个日历字段,用户可以从中选择日期。基于该日期,我想用一个可用于约会的小时列表填充一个下拉列表 我尝试使用OnPost之类的处理程序,但这需要一个提交按钮,但我只有日历输入 这是我在我的Razor页面中用于日历的代码 <div class="form-group col-md-4"> <label asp-for="St
<div class="form-group col-md-4">
<label asp-for="StartDate"></label>
<input asp-for="StartDate" class="form-control" />
<span class="text-danger" asp-validation-for="StartDate"></span>
</div>
我是否可以使用其他功能,以便用户从日历中选择日期时,下拉列表将填充可用的小时数
编辑
在我的剃须刀页面
@section Scripts {
<script>
$("#StartDate").on("change", function () {
var time = $(this).val();
$("#select").empty();
$("#select").append("<option value=''>select </option>");
$.getJSON(`?handler=Time&time=${time}`, (data) => {
$.each(data, function (i, item) {
$("#select").append("<option value='" + "'>" + item.hour + "</option>");
});
});
});
</script>
}
<form class="form-style" method="post" id="createBTForm">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group">
<label asp-for="StartDate" class="control-label"></label>
<input asp-for="StartDate" class="form-control" />
<span asp-validation-for="StartDate" class="text-danger"></span>
</div>
<select id="select" asp-for="Time" class="form-control"></select>
<div class="form-group button-position col-md4">
<input type="submit" id="placeRequest" name="placeRequest" value="Place Request" class="btn btn-primary" />
</div>
</form>
在我的模型页面中
[Required(ErrorMessage = "Field cannot be empty!")]
[BindProperty]
[DataType(DataType.Date)]
[Display(Name = "Start Date:")]
public DateTime StartDate { get; set; }
//this is null after selecting an option from the dropdown
[BindProperty]
public string Time { get;set; }
//this is the method that should work when I press the Place Request submit button
public async Task<IActionResult> OnPost()
{
if (!ModelState.IsValid)
{
return Page();
}
//here I send the data to the database
return Redirect(Url.Page(indexPage));
}
//this is the method that puts the values on the dropdown (this works)
public async Task<IActionResult> OnGetTime(DateTime time)
{
//Here I set my model based on database data
var finalHours = leaveFromLocations.Where(f => !unavailable.Contains(f));
foreach (var h in finalHours)
{
model.Add(new Hours
{
Hour = h
});
}
return new JsonResult(model);
}
问题是,在我将json模型发送到下拉列表并在下拉列表中显示值后,我无法选择在调试中选择的选项。选择选项后,时间属性将显示为null。您可以编写onchange函数,然后使用ajax将数据发送到后端。下面是一个简单的演示
<form method="post">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group">
<label asp-for="Time.StartDate" class="control-label"></label>
<input asp-for="Time.StartDate" class="form-control" />
<span asp-validation-for="Time.StartDate" class="text-danger"></span>
</div>
<select id="select" asp-for="Time.Hour" class="form-control"></select>
<div class="form-group">
<input type="submit" value="Create" class="btn btn-primary" />
</div>
</form>
@section Scripts {
@{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
<script>
$("#Time_StartDate").on("change", function () {
var time = $(this).val();
$("#select").empty();
$("#select").append("<option value=''>select </option>");
$.getJSON(`?handler=Time&time=${time}`, (data) => {
$.each(data, function (i, item) {
//"id" and "hours" is in your JsonResult(model),and remember The first letter of the attribute must be lowercase
$("#select").append("<option value='" + item.id + "'>" + item.hours + "</option>");
});
});
});
</script>
}
后端:
public IActionResult OnGetTime(DateTime time)
{
//this is a fake data,you can query your data here.
var model = new List<Hour>
{
new Hour
{
Id=1,
Hours=1
},
new Hour
{
Id=2,
Hours=2
},
};
return new JsonResult(model);
}
测试结果:
您的解决方案很好,但我有一个问题:在模型页面后端,您是如何声明小时的?是SelectList类型的绑定属性吗?因为按照我的下拉列表中的步骤,选项1和2显示为未定义,您只需要将任何模型作为jsonresult返回,然后在javascripts中通过拼接显示下拉列表,就像我的演示一样。请记住,在javascripts中,模型中属性的第一个字母必须是小写,如item.Id到item.Id。如果它不起作用,你可以提供你的代码。到目前为止,我用我的代码编辑了我的文章,下拉列表获取我从后端发送的值,但是当我选择一个选项时,我从下拉列表中选择了一些东西,我的时间属性在调试模式中为null。对于绑定下拉列表的值,你的值为null,因此时间为null。您应该按如下方式更改代码。$select.append+'>+item.hour+;我发现这种方法存在一个问题:如果我尝试选择当前日期,它将不起作用。我尝试将函数从on change更改为onclick,但是我完全不允许选择数据。您可以看到我的,测试显示,如果您不单击日历,其时间将不会进入输入框。我认为这是datetime控件的默认设置。OnChange事件仅在当前控件更改时触发。
public IActionResult OnGetTime(DateTime time)
{
//this is a fake data,you can query your data here.
var model = new List<Hour>
{
new Hour
{
Id=1,
Hours=1
},
new Hour
{
Id=2,
Hours=2
},
};
return new JsonResult(model);
}