Databind editorfor with dropdown

Question

我试图找出是否可以将HTML Helpers绑定到下拉列表。

例如，我有以下模型：

public class CrmViewModel : ViewModelBase
{
    [Display(Name = "LBL_BEDRIJFSNAAM", ResourceType = typeof(Properties.Resources))]
    public string Bedrijfsnaam { get; set; }
    public IQueryable<ContactPerson> contactPersons { get; set; }

}

public class ContactPerson
{
    public GenderEnum Gender { get; set; }
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public string Initials { get; set; }
    public DateTime DateOfBirth { get; set; }
    public string EmailAddress { get; set; }
    public string PhoneNumber { get; set; }
    public string Label { get; set; }
}

这会以IQueryable

的形式推回到页面

现在我要做的是，在下拉列表中使用联系人的名称进行编辑，当有人选择联系人时，我希望将该信息填入Html.EditorFor值中，以便我可以将其发回到控制器。

因此，例如，如果有人选择了用户Foo Bar，我希望在电子邮件地址输入值foobar@foo.com。

这可能不使用像KnockoutJS这样的东西吗？

Answer 1

我为此示例创建了一个较小的vm，如下所示：

<强> CrmViewModel

 public class CrmViewModel
 {
        public string Bedrijfsnaam { get; set; }
        public IQueryable<ContactPerson> contactPersons { get; set; }
  }

<强> ContactPerson

public class ContactPerson
{
        public string FullName { get; set; }
        public string Email { get; set; }

        public override string ToString()
        {
            return FullName;
        }
}

我创建了一个小样本页面，如下所示：

@model WebApplication4.Models.CrmViewModel
@{
    ViewBag.Title = "Index";
}



<h1>@Model.Bedrijfsnaam</h1>

@Html.DropDownListFor(m => m.contactPersons,
    new SelectList(Model.contactPersons,
    Model.contactPersons.First().FullName), new { @onchange = "CallChangefunc(this.value)" })

<br />
@Html.LabelFor(m => m.contactPersons.First().FullName)
<br />
<span id="fullname">
    @Html.DisplayFor(m => m.contactPersons.First().FullName)
</span>
<br />
@Html.LabelFor(m => m.contactPersons.First().Email)
<br />
<span id="email">
    @Html.DisplayFor(m => m.contactPersons.First().Email)
</span>

所以现在我们需要一种方法来在“变化”时执行某些操作。事件被触发。我们可以这样做：

<强> JS

<script>
    function CallChangefunc(value) {
        $.ajax({
            url: '/Home/Fill',
            type: "GET",
            dataType: "JSON",
            data: { fullName: value },
            success: function (contactPerson) {
                document.getElementById("fullname").textContent = contactPerson.FullName;
                document.getElementById("email").textContent = contactPerson.Email;
            }
        });
    }
</script>

在上面的JS中，我们调用一些控制器操作来获取我们需要为所选联系人检索的联系信息。返回JSON后，我们得到跨度并将textContent更改为正确的值。

控制器操作

public ActionResult Fill(string fullName)
        {
            ContactPerson contactPerson = new ContactPerson();
            if (fullName == "Richard Hendricks") //Replace this with call to the database in order to get your contact info
            {
                contactPerson = new ContactPerson
                {
                    FullName = "Richard Hendricks",
                    Email = "r.hendricks@piedpiper.com"
                };
            }
            else if (fullName == "Erlich Bachman")
            {
                contactPerson = new ContactPerson
                {
                    FullName = "Erlich Bachman",
                    Email = "e.bachman@piedpiper.com"
                };
            }
            return Json(contactPerson, JsonRequestBehavior.AllowGet);
        }

在控制器操作中，我们从数据库中获取数据。在上面的示例中，如果您使用EF，那么这将是var contactPerson = db.ConactInfo.SingleOrDefault(c=>c.FullName == fullName);。

在这个例子中，我们使用的是全名，但在现实世界的用例中，我们会使用像电子邮件地址这样的唯一值。

<强>结果