使用Web服务根据对另一个下拉框的选择填充第二个下拉框以获取信息

Populating a second dropdown box based on the selection of another using webservice to get information

本文关键字:填充 选择 第二个 信息 获取 Web 另一个 服务 使用      更新时间:2023-09-26

我使用一个名为KeywordService的web服务填充了一个下拉列表,该web服务访问.NET控制器,从另一个项目填充列表。

下面是角度控制器,web开发人员在这里说我需要监视关键字更改事件,将关键字传递给getQualifier函数。如何"监控"它?有人能告诉我怎么做吗?

var StockItemMultiMillInquiryController = function ($scope, $sce, $rootScope, $modal, $window, StockItemMultiMillService, KeywordService, QualifierService) {

$rootScope.title = 'Stock Item Multi Mill Inquiry';
$scope.allMills = [];
$scope.mill = '';
$scope.stockNumber = '';
$scope.description = '';
$scope.qtyonhand = '';
$scope.qualifier = '';
$scope.costType = '';
$scope.keyword = '';
$scope.allKeywords = [];
$scope.qualifier = keyword;
$scope.selectedQualifier = '';
$scope.allQualifiers = [];

KeywordService.getKeyword().then(function (keywords) {
    $scope.allKeywords = keywords
});
QualifierService.getQualifier().then(function (qualifier) {
    $scope.allQualifiers = qualifier
});

这就是服务

 // Keyword service for dropdown ticket #54507
app.service('KeywordService', function ($http, cache) {
   return {
    getKeyword: function () {
        var keywords = cache.get('keyword');
        if (!keywords) {
            return $http({ method: 'JSONP', url: "/api/core/keyword/keyword?callback=JSON_CALLBACK", params: {} }).then(function (result) {
                if (result.data.success) {
                    cache.put('keyword', result.data.data);
                    return result.data.data;
                } else {
                    return [];
                }
            });
        } else {
            var deferred = $q.defer();
            deferred.resolve(keywords);
            return deferred.promise;
          }
       }
    };
});

  // Qualifier service for dropdown ticket #54507
 app.service('QualifierService', function ($http, cache) {
    return {
      getQualifier: function () {
        var qualifiers = cache.get('qualifier');
        if (!qualifiers) {
            return $http({ method: 'JSONP', url: "/api/core/qualfier/qualifier?callback=JSON_CALLBACK", params: {qualifier: qualifier} }).then(function (result) {
                if (result.data.success) {
                    cache.put('qualifier', result.data.data);
                    return result.data.data;
                } else {
                    return [];
                }
            });
        } else {
            var deferred = $q.defer();
            deferred.resolve(qualifiers);
            return deferred.promise;
        }
       }
    };
 });

服务为关键字和限定符调用的.NET控制器

 Imports PCA.Core.Search
 Imports PCA.Core.Web.JSON
 Public Class KeywordController
   Inherits System.Web.Mvc.Controller
' GET: /Plants
<PCA.Core.Web.CompressionFilter> _
Function Keyword(callback As String) As ActionResult
    Dim res As New PCA.Core.Web.JSON.Response
    Dim keywordList As New List(Of ViewModels.Core.Keyword)
    For Each u As Trident.Core.Core.Keyword In Trident.Core.Globals.TridentApp.ApplicationCache.Keywords.Keywords
        keywordList.Add(New ViewModels.Core.Keyword(u))
    Next
    Try
        res.success = True
        res.message = ""
        res.data = keywordList.OrderBy(Function(c) c.description)
        Return New PCA.Core.Web.JSON.JSONPResult() With { _
             .Data = res,
             .Callback = callback
            }
    Catch ex As Exception
        res.success = False
        res.message = ex.Message
        res.data = ""
        Return New PCA.Core.Web.JSON.JSONPResult() With { _
             .Data = res,
             .Callback = callback
            }
    End Try
  End Function
 End Class
Imports PCA.Core.Search
Imports PCA.Core.Web.JSON
 Public Class QualifierController
     Inherits System.Web.Mvc.Controller
' GET: /Plants
<PCA.Core.Web.CompressionFilter> _
Function Qualifier(callback As String, keyword As String) As ActionResult
    Dim res As New PCA.Core.Web.JSON.Response
    Dim qualifierList As New List(Of ViewModels.Core.Qualifier)
    For Each u As Trident.Core.Core.Qualifier In Trident.Core.Globals.TridentApp.ApplicationCache.Keywords.Qualifiers(keyword)
        qualifierList.Add(New ViewModels.Core.Qualifier(u))
    Next
    Try
        res.success = True
        res.message = ""
        res.data = qualifierList.OrderBy(Function(c) c.description)
        Return New PCA.Core.Web.JSON.JSONPResult() With { _
             .Data = res,
             .Callback = callback
            }
    Catch ex As Exception
        res.success = False
        res.message = ex.Message
        res.data = ""
        Return New PCA.Core.Web.JSON.JSONPResult() With { _
             .Data = res,
             .Callback = callback
            }
    End Try
   End Function

这是关键字和限定符的ViewModel:

Namespace ViewModels.Core
Public Class Keyword
    Private m_keyword As String
    Private _m_keywords As List(Of Core.Keyword)
    Public Sub New()
    End Sub
    Public Sub New(keyword As Trident.Core.Core.Keyword)
        m_keyword = keyword.Description.ToString
    End Sub
    Sub New(m_keywords As List(Of Core.Keyword))
        ' TODO: Complete member initialization 
        _m_keywords = m_keywords
    End Sub
    Public Property description As String
        Get
            Return m_keyword
        End Get
        Set(value As String)
            m_keyword = value
        End Set
    End Property
End Class
End Namespace

限定符:

Namespace ViewModels.Core
Public Class Qualifier
    Private m_qualifier As String
    Private _m_qualifiers As List(Of Core.Qualifier)
    Public Sub New()
    End Sub
    Public Sub New(qualifier As Trident.Core.Core.Qualifier)
        m_qualifier = qualifier.Description.ToString
    End Sub
    Sub New(m_keywords As List(Of Core.Qualifier))
        ' TODO: Complete member initialization 
        m_qualifier = m_qualifier
    End Sub
    Public Property description As String
        Get
            Return m_qualifier
        End Get
        Set(value As String)
            m_qualifier = value
        End Set
    End Property
   End Class
  End Namespace

这是我有下拉菜单的html文件

<!DOCTYPE html>
 <!--  View for the Stock item multi mill inquiry Ticket #54507-->
 <html>
 <head>
     <title>Stock Item Multi Mill Inquiry</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />


<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
    <div class="row ">
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">

            <div class="form-group">
                <select class="btn btn-info dropdown-toggle" style="width: 92%" ng-model="mill">
                    <option value="">Select a Mill </option>
                    <option value="608">Tomahawk Mill</option>
                    <option value="610">Valdosta Mill</option>
                    <option value="620">Counce Mill</option>
                    <option value="622">Filer Mill</option>
                    <option value="650">DeRidder Mill</option>
                    <option value="651">Wallula Mill</option>
                    <option value="652">Jackson Mill</option>
                    <option value="653">International Falls Mill</option>
                </select>&nbsp;<br/><br/>
                <select class="btn btn-info dropdown-toggle" style="width: 92%" ng-model="keyword">
                    <option value="">Select a Keyword</option>
                    <option ng-repeat="keyword in allKeywords" value="{{keyword.description}}"> {{keyword.description}} </option>
                </select><br/><br/>
                <select  class="btn btn-info dropdown-toggle" style="width: 92%" ng-model="selectedQualifier">
                    <option value="">Select a Qualifier</option>
                    <option ng-repeat="qualifier in allQualifiers" value="{{qualifier.description}}"> {{qualifier.description}} </option>
                </select>
            </div>

您可以使用ng-change,它会在选择框的值更改时触发。

ng-change="getQualifier(keyword)"

将第一个选择的模型传递给类似的第二个

            <select class="btn btn-info dropdown-toggle" style="width: 92%" ng-model="keyword">
                <option value="">Select a Keyword</option>
                <option ng-repeat="keyword in allKeywords" value="{{keyword.description}}"> {{keyword.description}} </option>
            </select><br/><br/>
            <select  class="btn btn-info dropdown-toggle" style="width: 92%" ng-model="selectedQualifier" ng-change="getQualifier(keyword)">
                <option value="">Select a Qualifier</option>
                <option ng-repeat="qualifier in allQualifiers" value="{{qualifier.description}}"> {{qualifier.description}} </option>
            </select>

希望这就是你想要实现的!