Javascript 从视图创建列表，并使用表单发布到MVC控制器

背景 我正在做客户的网站项目，我用MVC创建了这个网站。我让EF使用SQLDB来存储数据

My WebApp配备了一个后台办公区，用于管理/添加/更新项目等

有问题的特定页面允许用户通过输入数据并单击表单上的“保存”将新项目添加到数据库中

该项具有一些属性，这些属性都可以很好地添加到DB的新行中

项目还包含一个列表

我尝试过的事情 我一直在到处挖掘，但到目前为止还没有任何东西能救我

我已经研究了许多在中添加对象的解决方案 将JavaScript添加到页面-这确实有效。唯一的问题是我不能 在发布到控制器的对象中拾取它们

我还被指出直接使用Ajax创建约会对象并将其插入页面，但这似乎也没有得到重视

非常感谢您的专业知识和智慧

为了能够在UI上动态添加新的约会输入控件，单击add按钮，您可以 [下面的代码来自我的头顶，更像是伪代码]

a使用jQuery/js克隆在包含所有相关约会控件的视图上预先呈现的隐藏div

e、 g.这将是一个预呈现的div，用作模板

<div style="display:none;" id="appointment-template">
    <input type=text>
</div>

或

b从服务器获取部分视图，并使用jQuery$.Get/js xhr再次将其附加到表单中

 $.get( "controller/templatDivActionMethodUrl", function( data ) {
      $("#appointments-list-container").append( data );
    });

为了能够发送带有在ActionMethod的Item参数中接受的List in Item的模型，您可以 当模型更改时，使用jquery/javascript动态创建与服务器端模型具有相同结构的json对象是一个问题

    var appointmentsJson = [];
    //foreach loop is a pseudo code, can be replaced with $.each()
    foreach (var appointment in $("#appointments-list-container").children()){
            appointmentsJson.push(new {'day' : $(appointment).children("#day").val(),'from' : $(appointment).children("#from").val(),'to' : $(appointment).children("#to").val()})  ;}

    //and then post this json to actionMethod

    $.post("serverController/Actionmethod",{appointments: appointmentsJson});

或

b使用ASP.NETMVC附带的ModelBinder功能。这方面有大量的文档/教程，这是一个起点：

---

请参考答案，并选择一些选项谢谢@StephenMuecke-看来您以前对这类事情有过一些经验？我已经快速阅读了你链接的文章-第二个链接似乎更接近我所追求的。如果时间允许，我会仔细看一看。同时，您是否可以为我的场景提供一些示例代码，请我理解这可能是一个很大的问题？请看一个示例，您的约会模式应该是DateTime Day、TimeSpan From和TimeSpan to-而不是stringI我喜欢.Net Fiddle！我要四处玩玩，看看能得到什么。仅供参考，出于其他原因，我特意创建了一天，从和到属性作为字符串；博士-不要惊慌，我不是一个不速之客：@StephenMuecke-你需要去喝一杯清爽的饮料来奖励自己，我的朋友！我已经设法使你贴的小提琴适合我的需要。如果你想继续发表一个比评论更详细的答案，我会把它标记为接受：谢谢你的建议。当我有更多的时间时，我会愤怒地看着他们。我以前尝试过在表单中添加部分视图。不幸的是MVC的ModelBinder并没有注意到这一点——这和索引有关吗？正如@stephen muecke的链接所指出的，因此我来到SO的好人那里寻求一些帮助OK cool.，…是的，CustomModelBinder需要一个带顺序索引的隐藏字段才能工作。现在我对事情有了清晰的认识，我再次查看了你的答案。完全正确，我一点也不怀疑@斯蒂芬·穆克（Stephen Muecke）的链接给了我正确的方向，所以我请他发布一个答案——正如我所见，这是公平的。如果他不选择，而且你可以添加一些样本代码来回答未来的人，我会考虑把这个标记为接受。再次感谢：好的，听起来很公平。我从头开始添加了一些代码。

var addNewAppointmentRowFromTemplate = function(){
        $("#appointments-list-container").append($("#appointment-template").clone());
    }

 $.get( "controller/templatDivActionMethodUrl", function( data ) {
      $("#appointments-list-container").append( data );
    });

    var appointmentsJson = [];
    //foreach loop is a pseudo code, can be replaced with $.each()
    foreach (var appointment in $("#appointments-list-container").children()){
            appointmentsJson.push(new {'day' : $(appointment).children("#day").val(),'from' : $(appointment).children("#from").val(),'to' : $(appointment).children("#to").val()})  ;}

    //and then post this json to actionMethod

    $.post("serverController/Actionmethod",{appointments: appointmentsJson});