在Tab Out或Keypress上基於單個字段自動填充字段

Question

我正在使用Visual Studio 2017中使用實體框架創建的ASP.NET MVC項目。我有一個Employees控制器的創建視圖，用戶可以在其中輸入清單數據。我想讓用戶ID字段自動填充Active Directory中的數據。如何在輸入用戶名時實施按鍵或製表符或字段更改事件，以便觸發查找並返回並填充具有相關數據的特定字段？

這裏是什麼，我看着一個想法：

下面是一些CSHTML作爲參考：

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

我不熟悉的Ajax和我只知道一點點javascript，但我寧願嘗試將代碼包含到C＃中，因爲所有與Active Directory相關的代碼都已寫入。

我可以在用戶ID字段旁邊添加一個「查找」按鈕，讓他們單擊它來填充？如果是這樣如何？

Answer 1

它可以完成，雖然只有一點點的JavaScript。像這樣：

型號：

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

控制器：

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

} 

查看：

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