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

Question

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

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

在我的 JavaScript 中，我允许用户 select 日程表中的多个日期并将它们存储在一个数组中。每次更新数组时，我都会使用 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;]">

当用户单击提交时，我希望这些日期绑定到我的 ViewModel 中的 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);
}

Answer 1

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

假设你有这样的视图模型

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

现在，让我们创建一个 javascript 方法，该方法将创建一个新的表单元素并将其附加到 form.The 下面的示例假设您在页面中包含 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
}

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

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

javascript

asp.net

asp.net-mvc

json

viewmodel