asp.net - ASP.NET MVC3: ドロップダウン リストの操作に関する問題

Question

私はASP.NET MVCを初めて使用し、現在私の会社はASP.NET MVCを実装しています。ドロップダウンリストの実装に苦労しています。シナリオは次のとおりです。すべてのクエリを取得するには、ドロップダウン リスト、テキスト ボックス、および検索ボタンを使用する必要があります。ドロップダウンにリストするアイテムのリストがあります。いずれかの項目を選択すると、テキストボックスに手動で値を入力し、存在する場合は必要なすべての情報を検索して入力する必要があります。

例：ドロップダウンリストをクリックすると、従業員名、従業員IDなどが表示される場合があります。ドロップダウンリストから従業員名を選択すると、テキストボックスに名前を入力する必要があります.Marry Lieu、次に検索ボタンをクリックする必要があります. このボタンは、Marry Lieu の情報を確認し、画面に入力する必要があります。

ドロップダウンリスト、テキストボックス、ボタンの間をマッピングして、ドロップダウンリストで特定のプロパティを選択し、プロパティの値をテキストボックスに入力し、情報を検索して入力できるようにする方法は??

どんなガイドラインも私にとって非常に重要です。

Answer 1

さて、私はここで少し生意気で、ダリン・ディミトロフの答えの一部を再利用しています：

主な違いは、選択したドロップダウン値に基づいて条件付きで従業員を検索していることです。たとえば、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);
    }
}

〜/ 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、Darinの回答

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

Answer 2

このタスクにはJavaScriptを使用できると思います。JQueryを使用して選択に変更イベントを添付できます。この例 (http://api.jquery.com/selected-selector/) では、添付関数は選択された各オプションのテキストを取得して「div」に書き込むだけですが、私たちのような他のロジックで独自の関数を作成できますmvc コントローラーなどへの POST クエリを介して情報を取得します。

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);
    });
});