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

Question

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

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

<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--;
    })
});

Answer 1

为了回发到模型，控件的name 属性必须与属性的名称匹配，并且对于集合，name 属性必须具有索引器。由于<input type="text" name="contact_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);
}

在视图中

@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" />
}

脚本

$('#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
}

Answer 2

假设：

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;}
}

那么您将拥有这组输入框：例如 3 个联系人：

@model Benafsh.Website.contactVM
@using (Html.BeginForm("SaveContact", "Contact", FormMethod.Post, new { name = "thisform", novalidate = "" }))
{    

<input type="text" name=contacts[0].Name/>
<input type="text" name=contacts[0].Phone/>



<input type="text" name=contacts[1].Name/>
<input type="text" name=contacts[1].Phone/>

<input type="text" name=contacts[2].Name/>
<input type="text" name=contacts[2].Phone/>
<input type="submit" value="Save"  />
}

等等。您必须有一组从 0 到 N 的连续数字，否则它将无法正常工作。

您的控制器将是：

[Authorize]
public class ContactController : Controller
{
    [HttpPost]
    public void SaveContact(contactVM input)
    {
    //write code here to take the info out of contactVM and put it wherever
    }
} 

确实，您将遇到的麻烦之一是您的用户希望删除其中一个。然后，您必须为它后面的项目重新编号。你将不得不编写一些 javascript 来做这样的事情。假设如果他们删除了第一个联系人，那么其余的联系人需要将他们的索引减一。