Question

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

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

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

任何准则对我都很重要。

Answer 1

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

Answer 2

好的，所以我在这里有点厚颜无耻，并重复使用Darin Dimitrov的部分答案：

关键区别在于我们根据所选的下拉值有条件地搜索员工，例如by-id的名称

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

搜索视图，其中包含条件属性

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>

达林回答

〜/ Views / Home / _Result.cshtml

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

Answer 3

您可以使用视图模型：

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部分，它将显示搜索结果：

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

然后，如果要在下拉列表选择更改时在文本框中显示所选员工姓名，则可以使用jQuery并订阅此下拉列表的.change()事件。因此，在单独的JavaScript中，我们可以提供以下内容：

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

ASP.NET MVC3：使用下拉列表的问题

3 个答案: