我是 ASP.NET MVC 的新手，目前我的公司正在实施 ASP.NET MVC。我正在努力实现下拉列表。这是场景： 我必须使用下拉列表、文本框和搜索按钮来获取所有查询。 我有一个要在下拉列表中列出的项目列表。当我选择任何项目时，我必须在文本框上手动提供值，并且必须搜索并填充所有必需的信息（如果存在）。
例如：当我点击下拉列表时，它可能会列出员工姓名、员工 ID 等。如果我从下拉列表中选择员工姓名，那么我必须在文本框中提供姓名，例如 Marry Lieu 然后接下来我必须点击搜索按钮。此按钮应检查 Marry Lieu 的信息并显示在屏幕上。
如何在下拉列表、文本框和按钮之间进行映射，以便我可以选择下拉列表上的某些属性、要在文本框中键入的属性的值、搜索信息并填充？？
任何指导方针对我来说都很重要。
【问题讨论】：
标签： asp.net asp.net-mvc drop-down-menu
好的，所以我在这里有点厚脸皮并重复使用 Darin Dimitrov 的部分答案：
关键区别在于我们根据选定的下拉值有条件地搜索员工，例如 by-id 的 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);
}
}
~/Home/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>
~/Views/Home/_Result.cshtml作为达林回答
@model string
<div>
@Html.DisplayForModel()
</div>
【讨论】：
我认为您可以使用一些 javascript 来完成这项任务。您可以使用 JQuery 将更改事件附加到选择。在这个例子（http://api.jquery.com/selected-selector/）中，附加函数只是获取每个选定选项的文本并将它们写入“div”，但您可以使用其他一些逻辑创建自己的函数，例如我们通过 POST 查询获取信息到 mvc 控制器等。
【讨论】：
您可以使用视图模型：
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 partial 来显示搜索结果：
@model string
<div>
@Html.DisplayForModel()
</div>
然后，如果您想在下拉列表选择更改时在文本框中显示选定的员工姓名，您可以使用 jQuery 并订阅此下拉列表的 .change() 事件。因此，我们可以在单独的 javascript 中添加以下内容：
$(function() {
$('#employeesDdl').change(function() {
var employeeName = $('option:selected', this).text();
$('#EmployeeName').val(employeeName);
});
});
【讨论】：