将下拉列表选项传递给控制器答案

【问题标题】：Passing drop down list option to controller将下拉列表选项传递给控制器
【发布时间】：2015-12-07 08:14:11
【问题描述】：

我有一个select标签形式的下拉列表，如下图：

<select id = "1">
<option>Amy</option>
<option>Gi-Anne</option>
</select>

我想将选定的选项——Amy 或 Gi Anne 传递给控制器的这个方法。

public String name (string nameSelected)
{
    var query = new NameQuery();
    if(nameSelected.Equals('Amy')) 
    {run a specific query}
else if(nameSelected.Equals('Gi-Anne')) 
        {run a specific query}

}

如何将所选下拉列表值的参数传递给控制器？提前感谢您的帮助和感谢。

【问题讨论】：

您使用的是哪个 MVC 框架（asp.net mvc）？您是在提交表单（在这种情况下，您的选择标签需要 name 属性 - <select name="nameSelected"> 还是使用 ajax 发布？

标签： html model-view-controller

【解决方案1】：

使用AngularJS '相当'容易，请参阅此Plunk 以获取（模拟）示例。

HTML 更改为：

<body ng-app="myApp">
<div ng-controller="myController">
  State: {{onChangeText}}
  <br/>
  <select ng-model="selectedItemId" id="itemList" ng-change="onChange()">
    <option value="{{item.id}}" ng-selected="{{item.id == selectedItemId}}" ng-repeat="item in items">{{item.name}}</option>
  </select>
  <br/>
  {{selectedQuery}}
</div>
</body>

使用这样的控制器：

app.controller("myController", [
      "$scope",
      "$http",
      function($scope, $http){
        var self = {};

        self.simulatedGetQuery = function() {
          console.log($scope.selectedItemId);
          $scope.selectedQuery = "";

          switch($scope.selectedItemId) {
            case "1":
              $scope.selectedQuery = "Query Amy";
              break;
            case "2":
              $scope.selectedQuery = "Query Gi-Anne";
              break;
          }
        };

        self.httpGetQuery = function() {
          $http({
            method: 'GET',
            url: 'http://somehostname/action/' + $scope.selectedItemId
          }).then(function successCallback(response) {
            $scope.selectedQuery = response;
          }, function errorCallback(response) {
          });
        };

        // -- SCOPED -- //

        $scope.selectedItemId = 0;

        $scope.items = [
          {
          "id": 1,
          "name": "Amy"
          },
          {
          "id": 2,
          "name": "Gi-Anne"
          }
        ];

        $scope.onChange = function() {
          $scope.onChangeText = "simulated GET triggered.";

          self.simulatedGetQuery();

          // Use this for actual GET
          // self.httpGetQuery
        };


        // --- //

        $scope.onChangeText = "waiting for user input";
        $scope.selectedQuery = "no query selected. Chose a person for a valid query.";
      }]);

它需要在真实环境中充实，但我认为它可以用于模拟测试。检查 Plunk 中的脚本以更详细地了解如何执行此操作。所有这些都是客户端。

$http 调用的 URL 将指向您的后端（MVC 或 Web API）控制器。

【讨论】：