Question

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

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

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

此时我尚未发布任何内容，数据仍在DIV中供指南使用如何在模型中动态填充此列表，然后将整个模型发布到控制器？

我看过jQuery＆＃39;加载＆＃39;和＆＃39;发布＆＃39;和＆＃39;得到＆＃39;东西，以及局部视图方法，我仍然不知道如何做这个简单的事情。

我有这样的页面或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应该如何将List的访问者添加到模型中？

以下是我的模特：

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

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

Answer 1

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

  <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调用中序列化visiter div以使用$（＆＃34; #visiter：input＆＃34;）。serialize（）将其发送到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将帮助您收集访问者详细信息和另一个参数＆＃34; restOfmodel＆＃34;将按照页面中的值按MVC绑定自身。

Answer 2

在浏览了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
  }

MVC在模型中加载列表

2 个答案: