ASP.NET MVC3：关于使用dropdownlist的问题

Question

我是新的ASP.NET MVC，目前我的公司正在实现ASP.NET MVC。我正在努力实现下拉列表。这里是场景： 我必须利用下拉列表，文本框和搜索按钮来获取所有查询。 我有一个项目列表将在下拉列表中列出。当我选择任何项目时，我必须在文本框中手工提供价值，并且必须搜索并填充所有需要的信息（如果存在）。

例如：当我点击下拉列表时，它可能会列出员工姓名，员工ID等。如果我从dropdownlist中选择员工姓名，那么我必须在文本框上提供名称，比如Marry Lieu，接下来我必须点击搜索按钮。这个按钮应该检查Marry Lieu的信息并填充在屏幕上。

如何在dropdownlist，文本框和按钮之间进行映射，以便我可以选择dropdownlist上的某个属性，要在文本框中键入的属性的值，搜索信息并填充？

任何指导方针对我来说都很重要。

Answer 1

我想你可以使用一些JavaScript来完成这项任务。您可以使用JQuery将更改事件附加到选择。在这个例子中（http://api.jquery.com/selected-selector/）附加功能只是获取每个选定的选项的文本，并将它们写入'div'，但您可以使用其他逻辑获得通过POST查询MVC控制器信息等

Answer 2

你可以使用一个视图模型：

public class SearchViewModel 
{ 
    // property used to represent the selected employee id in the dropdown 
    [DisplayName("Employee")] 
    public string SelectedEmployeeId { get; set; } 

    // property used to hold the list of employees shown in the dropdown 
    public IEnumerable<SelectListItem> Employees { get; set; } 

    // property used for the textbox 
    [DisplayName("Name")] 
    public string EmployeeName { get; set; } 

    // property that will be populated after submitting the form 
    // and contain the search results. I am using string for the 
    // purpose of the demonstration but could be any arbitrary complex 
    // view model depending on what your results contain 
    public string SearchResult { get; set; } 
} 

然后控制器：

public class HomeController: Controller 
{ 
    public ActionResult Index() 
    { 
     var model = new SearchViewModel 
     { 
      Employees = db.Employees.ToList().Select(e => new SelectListItem 
      { 
       Value = e.EmployeeId, 
       Text = e.Name 
      }) 
     }; 

     return View(model); 
    } 

    [HttpPost] 
    public ActionResult Index(SearchViewModel model) 
    { 
     // at this stage we have the SelectedEmployeeId and SomeValue 
     // properties passed => we do the search and set the results: 

     model.SearchResult = "this is the result of your search"; 

     // we repopulate the Employees collection because only the selected 
     // employee id was passed when the form was submitted 
     model.Employees = db.Employees.ToList().Select(e => new SelectListItem 
     { 
      Value = e.EmployeeId, 
      Text = e.Name 
     }); 

     // we redisplay the view 
     return View(model); 
    } 
} 

接下来，我们可以有一个~/Views/Home/Index.cshtml观点：

@model SearchViewModel 
@using (Html.BeginForm()) 
{ 
    <div> 
     @Html.LabelFor(x => x.SelectedEmployeeId) 
     @Html.DropDownListFor(
      x => x.SelectedEmployeeId, 
      Model.Employees, 
      new { id = "employeesDdl" } 
     ) 
    </div> 

    <div> 
     @Html.LabelFor(x => x.EmployeeName) 
     @Html.EditorFor(x => x.EmployeeName) 
    </div> 

    <button type="submit">Search</button> 
} 

<div id="results"> 
    @if (Model.SearchResult != null) 
    { 
     @Html.Partial("_Result", Model.SearchResult) 
    } 
</div> 

接下来，我们定义了一个~/Views/Home/_Result.cshtml部分将显示搜索结果：如果你想在文本框中显示所选员工的姓名时，下拉列表选择改变，你可以使用jQuery和订阅

@model string 
<div> 
    @Html.DisplayForModel() 
</div> 

然后到此下拉菜单的.change()事件。因此，在一个单独的JavaScript，我们可以把下面的：

$(function() { 
    $('#employeesDdl').change(function() { 
     var employeeName = $('option:selected', this).text(); 
     $('#EmployeeName').val(employeeName); 
    }); 
}); 

Answer 3

好了，所以我是一个有点厚脸皮这里和重用达林季米特洛夫回答的部分：

关键的区别是我们有条件地搜索雇员根据选定的下拉值例如by-name的名称

我只是想说明它如何在基本级别上工作，但我认为在适当的实施中我不想使用字符串用于标准列表的文字，而是有一个对象来表示查找雇员的可能标准。

搜索查看包含标准化子性质

public class SearchViewModel 
{ 
    // property used to represent the selected employees search critera field 
    [DisplayName("Search by")] 
    public string SelectedCriteria { get; set; } 

    // property used to hold the list of possible criteria shown in the dropdown 
    public IEnumerable<SelectListItem> Criteria { get; set; } 

    // property used for the textbox 
    // ie the value to search against the criteria 
    [DisplayName("Value")] 
    public string CriteriaValue { get; set; } 

    // property that will be populated after submitting the form 
    // and contain the search results. I am using string for the 
    // purpose of the demonstration but could be any arbitrary complex 
    // view model depending on what your results contain 
    public string SearchResult { get; set; } 
} 

家庭控制器

public class HomeController : Controller 
{ 
    public static List<string> CriteriaList 
    { 
     get 
     { 
      return new List<string>() { "Employee Name", "Employee Id" }; 
     } 
    } 

    public ActionResult Index() 
    { 
     var model = new SearchViewModel 
     { 
      Criteria = CriteriaList.Select(e => new SelectListItem 
      { 
       Value = e, 
       Text = e 
      }) 
     }; 

     return View(model); 
    } 

    [HttpPost] 
    public ActionResult Index(SearchViewModel model) 
    { 
     // at this stage we have the Selected Criteria and Criteria Value 
     // we find the employee based on this criteria: 

     Employee employee = null; 

     switch (model.SelectedCriteria) 
     { 
      case "Employee Name": 
       employee = _employeeRepository.GetByName(model.CriteriaValue); 
       break; 
      case "Employee Id": 
       employee = _employeeRepository.GetById(model.CriteriaValue); 
       break; 
      default: 
       break; 
     } 

     if (employee == null) 
      model.SearchResult = "No results found for of your search"; 
     else 
      model.SearchResult = string.Format("The Employee {0} was found", 
               employee.Name); 

     // we repopulate the criteria collection because only the selected 
     // criteria was passed when the form was submitted 
     model.Criteria = CriteriaList.Select(e => new SelectListItem 
     { 
      Value = e, 
      Text = e 
     }); 

     // we redisplay the view 
     return View(model); 
    } 
} 

〜/主页/ Index.cshtml

@model SearchViewModel 

@using (Html.BeginForm()) 
{ 
    <div> 
     @Html.LabelFor(x => x.SelectedCriteria) 
     @Html.DropDownListFor(
      x => x.SelectedCriteria, 
      Model.Criteria, 
      new { id = "employee-criteria" } 
     ) 
    </div> 

    <div> 
     @Html.LabelFor(x => x.CriteriaValue) 
     @Html.EditorFor(x => x.CriteriaValue) 
    </div> 

    <button type="submit">Search</button> 
} 

<div id="results"> 
    @if (Model.SearchResult != null) 
    { 
     @Html.Partial("_Result", Model.SearchResult) 
    } 
</div> 

〜/浏览/首页/ _Result.cshtml作为达林回答

@model string 
<div> 
    @Html.DisplayForModel() 
</div>