在表单提交时将日期的 JavaScript 数组绑定到页面的视图模型

Binding a JavaScript array of dates to a page's view model on form submit

本文关键字：模型 视图 绑定 JavaScript 表单提交 日期 数组      更新时间：2023-09-26

我在表单中添加了以下字段：

<input asp-for="MyDates" type="hidden" name="MyDates" id="MyDates" />

在我的JavaScript中，我允许用户从计划中选择多个日期并将它们存储在一个数组中。每次更新数组时，我都会使用 JSON.stringify（array） 额外更新隐藏输入字段的值。在表单提交之前，html最终看起来像这样：

<input type="hidden" name="MyDates" id="MyDates" value="[&quot;2016-02-17T05:00:00.000Z&quot;,&quot;2016-02-16T05:00:00.000Z&quot;,&quot;2016-02-11T05:00:00.000Z&quot;,&quot;2016-02-12T05:00:00.000Z&quot;,&quot;2016-02-19T05:00:00.000Z&quot;]">

当用户单击提交时，我希望这些日期绑定到我的视图模型中的 IList MyDates 属性。有人可以告诉我为什么不是吗？此外，如果有更好的方法来做这样的事情，请告诉我。

这是我的 JavaScript 函数的样子，它正在工作......它处理向用户显示日期，并另外创建隐藏的输入字段以进行提交。有没有更好的方法？

function refreshDates() {
    var dateListHtml = "";
    var baselineDatesHtml = "";
    for (var i = 0; i < dates.length; ++i) {
        dateListHtml = dateListHtml + dates[i].toLocaleDateString() + ' <i onclick="removeDate(' + i + ')" class="fa fa-minus-circle pull-right" style="cursor: pointer;"></i></span>' + '<br>';
        baselineDatesHtml = baselineDatesHtml + '<input asp-for="MyDates" type="hidden" name="MyDates" id="MyDates" value="' + dates[i].toLocaleDateString() + '" />';
    }
    $("#dateList").html(dateListHtml);
    $('#myDates').html(baselineDatesHtml);
}

要使模型绑定正常工作，表单元素的名称应与视图模型属性名称/层次结构匹配。因此，如果您正在执行普通表单提交，最好在表单中添加一个新的表单元素（隐藏元素）并将值存储在那里。只要名称属性值与视图模型属性名称匹配，模型绑定就可以正常工作。

假设您有这样的视图模型

public class CreatePost
{
   public IList<DateTime> MyDates { set; get; }
   //Some other properties for the view
}

现在，让我们创建一个javascript方法，该方法将创建一个新的表单元素并将其附加到表单中。下面的示例假设您在页面中包含 jQuery。

function addHiddenDate(dateString) {
    var itemCount = $("input.myDates").length;
    var dat = $("<input type='hidden' class='myDates'
                                 name='MyDates[" + itemCount++ + "]' />").val(dateString);
    $("form").append(dat);
}

当用户添加新日期时，而不是添加到数组中，而是调用此方法并传递日期值。

$(function(){
  $("#addBtn").click(function(e){
     e.preventDefault();
     addHiddenDate($("#DateInputField").val());
  });
});

现在，当您提交表单时，模型绑定会将发布的表单数据正确映射到操作方法参数，前提是该参数的类型为 CreatePost 

[HttpPost]
public ActionResult Create(CreatePost model)
{
  // check model.MyDates 
  // to do   : Return something
}
相关文章：