如何在C#中将两个数组作为彼此的键和值？

我在ASP.NETMVC中有一个表单 其中联系人可以是一个或多个

例如：一个项目可以有一个或多个联系人。 我创建了我的表单，它有一个div和两个文本框，如blow：

<div class="form-group">
        <label class="control-label col-md-2">Focal Points</label>
        <div class="col-md-10">
            <div class="input_fields_wrap">
                <button class="add_field_button btn">Add More Focal Points</button>

                <div style="margin:4px;">
                  Name: <input type="text" name="contact_name[]" />

                  Phone <input type="text" name="contact_phone[]" />
              </div>
            </div>
            </div>
        </div>

焦点
增加更多的焦点
姓名：
电话

当我发布表单时，如何将联系人姓名和电话数组作为键和值的单个数组来获取

动态生成文本框的脚本：

<script>

$(document).ready(function () {
    var max_fields = 10; //maximum input boxes allowed
    var wrapper = $(".input_fields_wrap"); //Fields wrapper
    var add_button = $(".add_field_button"); //Add button ID

    var x = 1; //initlal text box count
    $(add_button).click(function (e) { //on add input button click
        e.preventDefault();
        if (x < max_fields) { //max input box allowed
            x++; //text box increment
            $(wrapper).append('<div style="margin:4px;">Name: <input type="text" name="contact_name[]"/> Phone <input type="text" name="contact_phone[]" /><a href="#" class="remove_field">Remove</a></div>'); //add input box
        }
    });

    $(wrapper).on("click", ".remove_field", function (e) { //user click on remove text
        e.preventDefault(); $(this).parent('div').remove(); x--;
    })
});

$（文档）.ready（函数（）{
var max_fields=10；//允许的最大输入框数
var wrapper=$（“.input_fields_wrapp”）；//字段包装器
var add_button=$（“.add_字段_button”）；//添加按钮ID
var x=1；//初始文本框计数
$（添加按钮）。单击（函数（e）{//在添加输入按钮上单击
e、 预防默认值（）；
如果（x

假设：

public class contactVM
{
    public contactVM()
    {
      contacts = new List<individualContactVM>()
    }
    public List<individualContactVM> contacts {get;set;}
}

public class individualContactVM
{
    public string Name {get;set;}
    public string Phone {get;set;}
}

---

事实上，您将遇到的一个问题是当您的用户希望删除其中一个时。然后，必须对其后面的项目的索引重新编号。要做这样的事情，您必须编写一些javascript。假设他们删除了第一个联系人，那么其余联系人的索引需要减去一。

为了回发到模型，控件的

name

属性必须与属性的name匹配，对于集合，

name

属性必须有一个索引器。由于

包含非法名称，因此无法将其值绑定到您的模型

使用要编辑的特性创建视图模型

public class ContactVM
{
  public string Name { get; set; }
  public string Phone { get; set; }
}

在控制器中，初始化要显示的所有现有联系人的集合

public ActionResult Edit()
{
  List<ContactVM> model = new List<ContactVM>();
  // add any existing contacts to edit
  return View(model);
}

public ActionResult Edit（）
{
列表模型=新列表（）；
//添加任何要编辑的现有联系人
返回视图（模型）；
}

在我看来

@model List<ContactVM>
@using(Html.BeginForm())
{
  <div id="contactlist">
    for(int i = 0; i < Model.Count; i++)
    {
      <div class="contact">
        @Html.TextBoxFor(m => m[i].Name)
        @Html.TextBoxFor(m => m[i].Phone)
        // Add index property to allow dynamic addition and deletion of contacts
        <input type="hidden" name="Index" value="@i" />
        <button type="button" class="deletecontact">Delete</button>
      </div>
    }
  </div>
  <button type="button" id="addcontact">Add More Focal Points</button>
  // Add html for a new contact
  <div id="newcontact"> // style this as hidden
    <div class="contact">
      <input type="text" name="[#].Name value />
      <input type="text" name="[#].Phone value />
      <input type="hidden" name="Index" value ="%"/>
      <button type="button" class="deletecontact">Delete</button>
    </div>
  </div>
  <input type="submit" value="Save" />
}

@型号列表
@使用（Html.BeginForm（））
{
for（int i=0；im[i].Name）
@Html.TextBoxFor（m=>m[i].Phone）
//添加索引属性以允许动态添加和删除联系人
删除
}
增加更多的焦点
//为新联系人添加html
//将此样式设置为隐藏
删除
}

剧本

$('#addcontact).click(function() {
  var count = $('#contactlist').find('.contact').length;
  if (count < 10)
  {
    var index = (new Date()).getTime(); // unique indexer
    var clone = $('#newcontact').clone();
    clone.html($(clone).html().replace(/\[#\]/g, '[' + index + ']'));
    clone.find('input[type="hidden"]').val(index);
    $('#contactlist').append(clone.html());
  } else {
    // cant add any more
  }
});
$('.deletecontact').click(function() {
  $(this).closest('.contact').remove();
}

$（'#添加联系人）。单击（函数（）{
变量计数=$（“#联系人列表”）.find（“.contact”）.length；
如果（计数<10）
{
变量索引=（新日期（））.getTime（）；//唯一索引器
var clone=$（'#newcontact'）.clone（）；
html（$（clone.html（）.replace（/\[\]/g，['+index+']）；
clone.find（'input[type=“hidden”]”）.val（index）；
$（'#contactlist'）.append（clone.html（））；
}否则{
//不能再加了
}
});
$（'.deletecontact'）。单击（函数（）{
$（this）.closest（'.contact'）.remove（）；
}

Post方法

public ActionResult Edit(List<ContactVM> model)
{
  //model now contains all the contacts with the name and phone
}

public ActionResult编辑（列表模型）
{
//模型现在包含所有姓名和电话的联系人
}

Http和MVC的一些基础知识。为了将

的值绑定到属性，该属性需要命名为

contact\u name[]

这是非法的。如何添加多个联系人当我单击时，我的文本框旁边有一个按钮，它将创建相同的两个文本框。您可以有

，

，但在这种情况下，您需要添加另一个隐藏输入

，以便

DefaultModelBinder

匹配正确的items@IsaacBolinger,通常，您会在

循环中为
呈现现有项，并添加
，但对于动态添加的项（通过javascript），
索引值可以是
（new Date（））。getTime（）
。由于
Index
属性，您可以添加或删除项目，并且在回发时集合仍将正确绑定（无需重新编号），集合在view.Isaac.FYI中按呈现顺序排列。我添加了一个答案，显示了一种使用
Index
属性动态添加和删除集合项的技术，这样您就不需要对索引器重新编号。这很酷。我想我在某个地方读过一篇糟糕的教程，说“必须”这样做。我得到了一个非常复杂的表格，我开始了，谢天谢地没有完成。重新编号的文件相当大。
$('#addcontact).click(function() {
  var count = $('#contactlist').find('.contact').length;
  if (count < 10)
  {
    var index = (new Date()).getTime(); // unique indexer
    var clone = $('#newcontact').clone();
    clone.html($(clone).html().replace(/\[#\]/g, '[' + index + ']'));
    clone.find('input[type="hidden"]').val(index);
    $('#contactlist').append(clone.html());
  } else {
    // cant add any more
  }
});
$('.deletecontact').click(function() {
  $(this).closest('.contact').remove();
}

public ActionResult Edit(List<ContactVM> model)
{
  //model now contains all the contacts with the name and phone
}