Tab OutまたはKeypressでフィールドを1つのフィールドに自動的に設定する

Question

Visual Studio 2017でEntity Frameworkを使用して作成した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> 

私はアヤックスに慣れていないんだと私は少しだけjavascriptを知っている、私はむしろすべてのActive Directoryに関連するコードが既に書かれているので、C＃のコードを含むようにしようと思うだろう。

「ユーザー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>