如何将 jquery 返回值返回到 Razor 页面中模型对象的 属性

Question

我正在尝试选择多个项目并将结果传递给 属性 名为 SelectedDays

的对象

<div>
    <select id="daySelector" size="7" multiple="multiple" asp-for="ScheduledTask.SelectedDays"
            asp-validation-for="ScheduledTask.SelectedDays" class="form-control">

        <option value="1">Monday</option>
        <option value="2">Tuesday</option>
        <option value="3">Wednesday</option>
        <option value="4">Thursday</option>
        <option value="5">Friday</option>
        <option value="6">Saturday</option>
        <option value="0">Sunday</option>

    </select>
</div>

我正在使用 JQuery 来获取所选项目

$("#daySelector").change(function () {
    var arr = $(this).val();
    var result = arr.toString();

    console.log(result);

    return result;
     
})

JQuery 正确显示所选值，但 SelectedDays 属性 仅传递选择列表中的一项。

Answer 1

首先，您需要将 属性 定义为类型 List<T>。

其次，不知道你是怎么得到ScheduledTask对象的，但是如果你通过参数得到对象，你需要使用[Bind(Prefix = "ScheduledTask")]来指定后缀，因为select 是 ScheduledTask.SelectedDays.

这是工作演示：

型号：

public class ScheduledTask
{
    public List<string> SelectedDays { get; set; }
}

cshtml.cs（你可以使用BindProperty从前端自动获取数据）：

public class IndexModel : PageModel
{
    public void OnGet()
    {
    }
    [BindProperty]
    public ScheduledTask ScheduledTask { get; set; }
    public void OnPost()
    {
        
    }
}

结果：

另一种方式：

cshtml.cs:

public class IndexModel : PageModel
{
    public void OnGet()
    {
    }
    public ScheduledTask ScheduledTask { get; set; }
    public void OnPost([Bind(Prefix = "ScheduledTask")]ScheduledTask model)
    {
        
    }
}

结果：

更新：

如果您不想更改模型 属性 类型，您可以自定义模型绑定器：

public class CustomModelBinder : IModelBinder
{
    public Task BindModelAsync(ModelBindingContext bindingContext)
    {
        if (bindingContext == null)
        {
            throw new ArgumentNullException(nameof(bindingContext));
        }

        var modelName = bindingContext.ModelName;

        // Try to fetch the value of the argument by name
        var valueProviderResult = bindingContext.ValueProvider.GetValue(modelName);
        string combindedString = string.Join(",", valueProviderResult.ToArray());

        if (valueProviderResult == ValueProviderResult.None)
        {
            return Task.CompletedTask;
        }
        // Check if the argument value is null or empty
        if (string.IsNullOrEmpty(combindedString))
        {
            return Task.CompletedTask;
        }
        bindingContext.Result = ModelBindingResult.Success(combindedString);
        return Task.CompletedTask;
    }
}

型号：

public class ScheduledTask
{
    [ModelBinder(BinderType = typeof(CustomModelBinder))]
    public string SelectedDays { get; set; }
}

并确保指定名称（添加 name="SelectedDays"）：

    <select id="daySelector" size="7" multiple="multiple" name="SelectedDays" asp-for="ScheduledTask.SelectedDays"
        asp-validation-for="ScheduledTask.SelectedDays"
        class="form-control">

    <option value="1">Monday</option>
    //...
</select>

结果：