MVC在模型中加载列表

Question

我有一种情况，我无法找到答案。

我有一个模型，说明一个导游，其中包含有关指南的名称，地址和其他详细信息。

使用该模型时，会附带指南的访问者列表。
用户完成指南数据字段，然后显示一个页面，其中包含添加访问者的字段。

此时我还没有发布任何东西，数据仍然在指南的DIV中。
如何在模型中动态填充此列表，然后将整个模型发布到控制器？

我看过jQuery的'load'和'post'和'get'的东西，以及部分视图方法，我仍然失去了如何做这个简单的事情。

我的页面或Guide.cshtml这样的，例如：

@model TourModel 
<div id="guide"> 
    <table> 
    <tr> 
    <td>Full Name</td> 
    <td>@html.TextBoxFor(m => m.FullName)</td> 
     // address for guide 
<input type="button" id="Next" value="Next" onclick="AddVisitors()"   
</div> 
<div id="visitors" style="display:none"> 
    <table> 
    <tr> 
    <td>Full Name</td> 
    <td>@html.TextBoxFor(m => m.visitors.FullName)</td> 
     //details for each visitor 
    </table> 
    <table> 
    @if (model.visitors.count > 0) 
    { 
    foreach (var vis in model.visitors) 
    { 
    <tr> 
    <td>@vis.FullName</td> 
     //etc for each visitor2 
    } 
    } 

<script type="javascript"> 
    function AddVisitors() { 
    $("#guide").hide(); 
    $("#visitors").show(); 
    } 
</script> 

应该怎样做jQuery的，如果我要使用jQuery，向参观者添加到列表的模式呢？

这里是我的模型：

public class TourModel 
{ 
    public string guidename; 
    public string guideaddress; 
    public List<Visitor> visitors; 
} 

public class Visitor 
{ 
    public string visitorname; 
    public string visitoraddress; 
} 

Answer 1

环顾MVC的许多不同情况后，我能够得到这个东西与jQuery的工作。简单地说，我重新在CSHTML文件中的每个型号：

function TourGuideModel() { 
    var self = this; 
    ...all the attributes of the model 
    } 

Oncw这种模式是通过页面上的元素加载，它贴到控制器为正常：

$.ajax ({ 
    data: { TourGuideModel } 
    .... 
    }); 

public ActionResult AddVisitor(TourGuideModel model) 
{ 
    //model comes in as expected 
    } 

Answer 2

在表中添加文本框与每个字段的名称相同。假设你有详细的电话号码和公司名称，以便添加文本框，这样

<tr><td> 
    <input type="text" name="VisiterId" id = "V_1"> 
    <input type="text" name="PhNumber" id = "ph_1"> 
    <input type="text" name="CompanyName" id="c_1" > 
    </td></tr> 
    <tr><td> 
     <input type="text" name="VisiterId" id = "V_2"> 
    <input type="text" name="PhNumber" id = "ph_2"> 
    <input type="text" name="CompanyName" id="c_1" > 
    </td></tr> 

在你的Ajax调用序列化位访问者div来把它与$到AJAX（“＃位访问者：输入”）。序列化（） 。如果你想发送整个页面，然后把它放在窗体的div中。可以说

$.ajax({ 
     url: "@Url.Action("Save")", 
     type: 'POST', 
     data: $("#form1 :input").serialize(), 
     success : function(){} 
     )}; 

现在要在控制器中使用FormCollection。 VisiterId将帮助您将匹配的细节与值属于字符串数组的参与者进行匹配。

public ActionResult Save(FormCollection form, TourModel restOfmodel) 
{ 
    string[] VisiterIds = formColl.GetValues("VisiterId"); 
    string[] PhoneNumbers = formColl.GetValues("PhNumber"); 
    string[] CompanyNames = formColl.GetValues("CompanyName"); 
} 

的FormCollection会帮你收集visiters细节和另一个参数“restOfmodel”将由MVC被绑定本身按页值。