Automatisches Auffüllen von Feldern basierend auf einem einzelnen Feld auf Tab Out oder Keypress

Question

Ich verwende ein ASP.NET MVC-Projekt, das mit Entity Framework in Visual Studio 2017 erstellt wurde. Ich habe eine create-Ansicht für einen Angestellten-Controller, wo ein Benutzer Inventardaten eingeben kann . Ich möchte, dass das Benutzer-ID-Feld automatisch Daten aus Active Directory auffüllt. Wie implementiere ich ein Keypress- oder Tab-Out- oder Field-Change-Event, wenn der Benutzername eingegeben wird, so dass ein Lookup ausgelöst wird und bestimmte Felder mit relevanten Daten ausgefüllt werden?

Hier ist eine Idee von dem, was an Ich suche nach:

Hier einige der CSHTML als Referenz:

<div class="form-horizontal"> 
     <h4>Employee</h4> 
     <hr /> 
     @Html.ValidationSummary(true, "", new { @class = "text-danger" }) 
     <div class="form-group"> 
      @Html.LabelFor(model => model.OfficeId, "Office", htmlAttributes: new { @class = "control-label col-md-2" }) 
      <div class="col-md-10"> 
       @Html.DropDownList("OfficeId", null, htmlAttributes: new { @class = "form-control" }) 
       @Html.ValidationMessageFor(model => model.OfficeId, "", new { @class = "text-danger" }) 
      </div> 
     </div> 

     <div class="form-group"> 
      @Html.LabelFor(model => model.username, htmlAttributes: new { @class = "control-label col-md-2" }) 
      <div class="col-md-10"> 
       @Html.EditorFor(model => model.username, new { htmlAttributes = new { @class = "form-control" } }) 
       @Html.ValidationMessageFor(model => model.username, "", new { @class = "text-danger" }) 
      </div> 
     </div> 

     <div class="form-group"> 
      @Html.LabelFor(model => model.FullName, htmlAttributes: new { @class = "control-label col-md-2" }) 
      <div class="col-md-10"> 
       @Html.EditorFor(model => model.FullName, new { htmlAttributes = new { @class = "form-control" } }) 
       @Html.ValidationMessageFor(model => model.FullName, "", new { @class = "text-danger" }) 
      </div> 
     </div> 

     <div class="form-group"> 
      @Html.LabelFor(model => model.email, htmlAttributes: new { @class = "control-label col-md-2" }) 
      <div class="col-md-10"> 
       @Html.EditorFor(model => model.email, new { htmlAttributes = new { @class = "form-control" } }) 
       @Html.ValidationMessageFor(model => model.email, "", new { @class = "text-danger" }) 
      </div> 
     </div> 

     <div class="form-group"> 
      @Html.LabelFor(model => model.phone, htmlAttributes: new { @class = "control-label col-md-2" }) 
      <div class="col-md-10"> 
       @Html.EditorFor(model => model.phone, new { htmlAttributes = new { @class = "form-control" } }) 
       @Html.ValidationMessageFor(model => model.phone, "", new { @class = "text-danger" }) 
      </div> 
     </div> 

     <div class="form-group"> 
      @Html.LabelFor(model => model.EquipId, "Equipment", htmlAttributes: new { @class = "control-label col-md-2" }) 
      <div class="col-md-10"> 
       @Html.DropDownList("EquipId", null, htmlAttributes: new { @class = "form-control" }) 
       @Html.ValidationMessageFor(model => model.EquipId, "", new { @class = "text-danger" }) 
      </div> 
     </div> 

ich mit Ajax nicht vertraut bin und Ich weiß nur ein bisschen Javascript, ich würde eher versuchen, den Code zu C# zu enthalten, obwohl der gesamte Active Directory-Code bereits geschrieben wurde.

Könnte ich einfach eine "Lookup" -Schaltfläche neben dem Feld "User ID" hinzufügen, damit sie auf diese klicken, um sie zu füllen? Wenn das so ist, wie?

Answer 1

Es kann getan werden, obwohl mit ein wenig bisschen Javascript. Wie so:

Modell:

public class EmployeesViewModel 
    { 
     public int SelectedOfficeID { get; set; } 
     public int SelectedEquipmentID { get; set; } 

     public int UserID { get; set; } 
     public string Name { get; set; } 
     public string Email { get; set; } 
     public string Phone { get; set; } 

     public List<Office> OfficeList { get; set; } 
     public List<Equipment> EquipmentList { get; set; } 
    } 

    public class Equipment 
    { 
     public int EquipmentID { get; set; } 
     public string EquipmentName { get; set; } 
    } 

    public class Office 
    { 
     public int OfficeID { get; set; } 
     public string OfficeName { get; set; } 
    } 

Controller:

public class EmployeesController : Controller 
{ 
    public ActionResult Employee() 
    { 
    EmployeesViewModel model = new EmployeesViewModel(); 
    SetEquipmentData(model); 
    SetOfficeData(model); 
    return View(model); 
    } 


[HttpPost] 
public ActionResult Employee(EmployeesViewModel model) 
{ 
    SetEquipmentData(model); 
    SetOfficeData(model); 

    // remove properties from modelstate in order to get modified values in view 
    ModelState.Remove("Name"); 
    ModelState.Remove("Phone"); 
    ModelState.Remove("Email"); 

    //SHOULD GET EMPLOYEE DATA FROM DB BASED ON UserID PROPERTY 

    // dummy data: 
    model.Name = "John Doe"; 
    model.Phone = "973-548-85965"; 
    model.Email = "John@Company.com"; 
    return View(model); 
} 


private void SetEquipmentData(EmployeesViewModel model) 
{ 
    // dummy data: 
    model.EquipmentList = new List<Equipment>(); 
    model.EquipmentList.Add(new Equipment(){EquipmentID = 1, EquipmentName="Hammer"}); 
    model.EquipmentList.Add(new Equipment() { EquipmentID = 2, EquipmentName = "Screwdriver" }); 
    model.EquipmentList.Add(new Equipment() { EquipmentID = 3, EquipmentName = "Vise" }); 
    model.EquipmentList.Add(new Equipment() { EquipmentID = 4, EquipmentName = "Plier" }); 
    model.EquipmentList.Add(new Equipment() { EquipmentID = 5, EquipmentName = "Saw" }); 
} 

private void SetOfficeData(EmployeesViewModel model) 
{ 
    // dummy data: 
    model.OfficeList = new List<Office>(); 
    model.OfficeList.Add(new Office() { OfficeID = 10, OfficeName = "Charleston" }); 
    model.OfficeList.Add(new Office() { OfficeID = 20, OfficeName = "Springfield" }); 
    model.OfficeList.Add(new Office() { OfficeID = 30, OfficeName = "Montclair" }); 
    model.OfficeList.Add(new Office() { OfficeID = 40, OfficeName = "Louisville" }); 
    model.OfficeList.Add(new Office() { OfficeID = 50, OfficeName = "Albany" }); 
} 

} 

Ausblick:

<div class="form-horizontal"> 
     <h4>Employee</h4> 
     <hr /> 
    @using (Html.BeginForm("Employee", "Employees", FormMethod.Post, new { id = "EmployeeForm", name = "EmployeeForm" })) 
    { 
     @Html.ValidationSummary(true, "", new { @class = "text-danger" }) 
     <div class="form-group"> 
      @Html.LabelFor(model => model.SelectedOfficeID, "Office", htmlAttributes: new { @class = "control-label col-md-2" }) 
      <div class="col-md-10"> 
       @Html.DropDownListFor(model => model.SelectedOfficeID, new SelectList(Model.OfficeList, "OfficeID", "OfficeName")) 
      </div> 
     </div> 

     <div class="form-group"> 
      @Html.LabelFor(model => model.UserID, htmlAttributes: new { @class = "control-label col-md-2" }) 
      <div class="col-md-10"> 
       @Html.EditorFor(model => model.UserID, new { htmlAttributes = new { @class = "form-control" } }) 
       @Html.ValidationMessageFor(model => model.UserID, "", new { @class = "text-danger" }) 
      </div> 
     </div> 

     <div class="form-group"> 
      @Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "control-label col-md-2" }) 
      <div class="col-md-10"> 
       @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } }) 
       @Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger" }) 
      </div> 
     </div> 

     <div class="form-group"> 
      @Html.LabelFor(model => model.Email, htmlAttributes: new { @class = "control-label col-md-2" }) 
      <div class="col-md-10"> 
       @Html.EditorFor(model => model.Email, new { htmlAttributes = new { @class = "form-control" } }) 
       @Html.ValidationMessageFor(model => model.Email, "", new { @class = "text-danger" }) 
      </div> 
     </div> 

     <div class="form-group"> 
      @Html.LabelFor(model => model.Phone, htmlAttributes: new { @class = "control-label col-md-2" }) 
      <div class="col-md-10"> 
       @Html.EditorFor(model => model.Phone, new { htmlAttributes = new { @class = "form-control" } }) 
       @Html.ValidationMessageFor(model => model.Phone, "", new { @class = "text-danger" }) 
      </div> 
     </div> 

     <div class="form-group"> 
      @Html.LabelFor(model => model.SelectedEquipmentID, "Equipment", htmlAttributes: new { @class = "control-label col-md-2" }) 
      <div class="col-md-10"> 
       @Html.DropDownListFor(model => model.SelectedEquipmentID, new SelectList(Model.EquipmentList, "EquipmentID", "EquipmentName")) 
      </div> 
     </div> 

    } 
     </div> 

<script type="text/javascript"> 
    $('#UserID').bind('change', function(e) { 
     document.EmployeeForm.submit(); 
    }); 
</script>