无法在Blazor中使用Bootstrap Datepicker设置或绑定模型属性

Question

我使用的是引导日期选择器，问题是当我选择日期时，它不会触发更改或输入事件，并且注意与模型属性Course.StartDate或Course.EndDate绑定。默认的日期选择器可以工作，但不支持阿富汗日期时间。这就是我使用boostrap日期选择器的原因。

Blazor代码：

@using Microsoft.AspNetCore.Mvc.Rendering
@using myproject.Data
@using Microsoft.JSInterop;
@inject myproject.Repository.CoursesRepository _coursesRepository
@inject IJSRuntime JS
<EditForm Model="@Course" OnValidSubmit="e=> { if(selectedId == 0) { addCourse(); } else { updateCourse(Course.CourseId); } }">
<div class="mb-2">
<div>@Course.StartDate</div>
<label class="col-form-label" for="StartDate">@Loc["Start Date"]<span class="text-danger fs--1">*</span>:</label>
<InputDate class="form-control" @bind-Value="Course.StartDate" @bind-Value:format="yyyy-MM-dd" id="StartDate" />
<ValidationMessage class="text-danger" For="(() => Course.StartDate)"/>
</div>
<div class="mb-2">
<label class="col-form-label" for="EndDate">@Loc["End Date"]<span class="text-danger fs--1">*</span>:</label>
<InputDate class="form-control" @bind-Value="Course.EndDate" @bind-Value:format="yyyy-MM-dd" id="EndDate"/>
<ValidationMessage class="text-danger" For="(() => Course.EndDate)"/>
</div>
</EditForm>
@code {
public CourseModel Course = new();
public string[] dates = new string[] { "#StartDate", "#EndDate" };
protected override void OnAfterRender(bool firstRender)
{
base.OnAfterRender(firstRender);
loadScripts();
}
void addCourse()
{
_coursesRepository.AddCourse(Course);
FillData();
Course = new();
var title = "Course";
Swal.Success(title : Loc[$"{title} added successfully"],toast : true);
}
// initializes the datepicker
public async Task loadScripts()
{
await JS.InvokeVoidAsync("initializeDatepicker", (object) dates);
}
}

这是用于初始化日期选择器的脚本

<script>
function initializeDatepicker(dates) {
dates.forEach((element) => {
$(element).datepicker({
onSelect: function(dateText) {
// this is not working
element.value = this.value;
/* 
tried this and still not working
$(element).trigger("change");
also tried this and still not working
$(element).change();
*/
// this is working
console.log("Selected date: " + dateText + "; input's current value: " + this.value);
},
dateFormat: 'yy-mm-dd',
changeMonth: true,
changeYear: true
});
});

}
</script>

Answer 1

原因是这些更改是用JavaScript进行的，因此Blazor的页面状态不会发生变化，换句话说，Blazor根本没有注意到值的变化。

为了解决这个问题，您必须通过在JavaScript函数中调用C#方法来通知Blazor组件更改。为此，您可以使用DotNet.invokeMethodAsync内置的dotnet方法。如下：

DotNet.invokeMethodAsync('ProjectAssemblyName', 'ComponentMethod', this.value.toString())

它的第一个参数是项目的程序集名称。第二个参数是将在组件中写入的C#函数的名称，最后，第三个参数是选定的日期值。C#中调用的方法应该如下：

static string selectedDate;
[JSInvokable]
public static void ComponentMethod(string pdate)
{
selectedDate = pdate;
}

此方法必须用[JSInvoke]修饰，并且必须是静态的。

我为另一个波斯语javascript日历做了同样的事情。其代码在JavaScriptPersianDatePickerBlazor存储库中可用。您还可以以组件的形式创建自定义日历，以便在所有组件中以您想要的任何格式(如DateTime、DateTimeOffset或字符串等(更轻松地使用它。AmibDatePickerBlazorComponent存储库中有一个这样的示例。