Databind editorfor mit Dropdown

Question

Ich versuche herauszufinden, ob es möglich ist, die HTML-Helfer an eine Dropdown-Liste zu binden.

Zum Beispiel, ich habe folgendes Modell:

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

Dies ist auf der Seite zurück als IQueryable gedrückt wird

Nun, was ich tun möchte, ist bearbeiten in einem Dropdownlist mit dem Namen der Kontaktperson, wenn jemand eine Kontaktperson auswählt, möchte ich, dass diese Informationen in die Html.EditorFor Werte, die vorhanden sind, ausgefüllt werden, damit ich diese zurück auf den Controller buchen kann.

Wenn zum Beispiel jemand den Benutzer Foo Bar auswählt, möchte ich den Wert foobar@foo.com unter der E-Mail-Adresse eingeben.

Ist das möglich, ohne auf etwas wie KnockoutJS zurückzugreifen?

Answer 1

Ich habe einen kleineren vm für diese Probe wie folgt erstellen:

CrmViewModel

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

Contact

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

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

ich eine kleine Beispielseite erstellt haben, wie folgt:

@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> 

Also jetzt brauchen wir eine Möglichkeit, eine Aktion auszuführen, wenn das Ereignis 'onchange' ausgelöst wird. Wir können dies tun, wie folgt:

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> 

In dem oben JS wir einen Anruf zu einem gewissen Controller-Aktion tun, um die Kontaktinformationen wir für den ausgewählten Ansprechpartner abrufen müssen holen. Wenn der JSON zurückgegeben wird, erhalten wir den Bereich und ändern den textContent auf den richtigen Wert.

Controller Aktion

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

In der Controller-Aktion, bekommen wir die Daten aus unserer Datenbank. Im Beispiel darüber ist eine if-Anweisung, aber das wäre etwa var contactPerson = db.ConactInfo.SingleOrDefault(c=>c.FullName == fullName);, wenn Sie EF zum Beispiel verwenden.

In diesem Beispiel verwenden wir den vollständigen Namen, aber in einem realen Anwendungsfall würden wir einen eindeutigen Wert wie die E-Mail-Adresse verwenden.

Ergebnis