基于Tab Out Out或Keypress上的单个字段自动填充字段

时间:2017-04-26 18:40:33

标签: c# entity-framework asp.net-core-mvc visual-studio-2017

我正在使用在Visual Studio 2017中使用Entity Framework创建的ASP.NET MVC项目。我有一个Employees控制器的创建视图,用户可以在其中输入库存数据。我希望用户ID字段自动填充Active Directory中的数据。如何在输入用户名时实施按键或制表符或字段更改事件,以便触发查找并返回并使用相关数据填充特定字段?

以下是我所看到的内容:

enter image description here

这里有一些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相关的代码都已经编写了。

我可以添加一个&#34; Lookup&#34;用户ID字段旁边的按钮,让他们单击要填充的那个?如果是这样的话?

1 个答案:

答案 0 :(得分: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>