如何从angularJS代码调用vb.net函数？

Question

我试图将存储在动态创建的表中的数据传递给服务器，并且虽然可以在我的angularJS控制器中访问数据，但我仍难以学习如何将这些数据传递给服务器进行处理。

这是我的angularjs函数，它能够访问我的表数据，它只是传递数据并调用我遇到麻烦的vb.net函数。

$scope.requestThatCertificatesBeEmailed = function () {
    for (index = 0; index < $scope.requests.length; ++index) {
        alert('For loop entered')
        var submittedEmailAddressString = $scope.requests[index].emailAddress;
        var submittedCertificateTypeString = $scope.requests[index].certificateType;
        var submittedSearchTypeString = $scope.requests[index].searchType;
        var submittedSearchString = $scope.requests[index].submittedNumbers;

        alert(submittedSearchTypeString);

        $http.post("/Home/NewTextFile", { submittedEmailAddress: submittedEmailAddressString, submittedCertificateType: submittedCertificateTypeString, submittedSearchType: submittedSearchTypeString, submittedSearch: submittedSearchString }).error(function () {
            $scope.requests = [];
        });

Answer 1

您将需要将数据发布/放回服务器。 如果您使用的是ASP.NET WebForms应用程序，则可能需要在隐藏的输入字段中将值作为JSON传递给服务器。 如果您在ASP.NET MVC应用程序中工作，则应该能够调用控制器动作，以从javascript发送JSON表数据。

您的MVC Controller中的操作方法应如下所示：

<HttpPost> _
Public Function NewTextFile(submittedEmailAddress As String, submittedCertificateType As String, submittedSearchType As String, submittedSearch As String) As ActionResult
    'do some work
End Function

使用jQuery，您可以像这样调用控制器动作：

$.ajax({
    url: '/Home/NewTextFile',
    type: 'POST',
    contentType: 'application/json',
    data: JSON.stringify({
        submittedEmailAddress: submittedEmailAddressString, 
        submittedCertificateType: submittedCertificateTypeString, 
        submittedSearchType: submittedSearchTypeString, 
        submittedSearch: submittedSearchString 
    }),
    processData: false,
    dataType: 'json'
});

下面是我一起学习的AngularJS示例：

在视图中/从视图中引用：

<script type="text/javascript">
    angular.module('httpExample', [])
            .controller('ContactController', ['$scope', '$http',
                function ($scope, $http, $templateCache) {
                    $scope.contact = { userName: '', firstName: '', lastName: '' };

                    $scope.get = function () {
                        $scope.code = null;
                        $scope.response = null;

                        $http.get('/Home/Contact').
                        success(function (data, status) {
                            $scope.status = status;
                            $scope.data = data;
                            $scope.contact = data;
                        }).
                        error(function (data, status) {
                            $scope.data = data || "Request failed";
                            $scope.contact = { userName: '', firstName: '', lastName: '' }
                            $scope.status = status;
                        });
                    };

                    $scope.post = function () {
                        $scope.code = null;
                        $scope.response = null;

                        $http.post('/Home/Contact', $scope.contact).
                        success(function (data, status) {
                            $scope.status = status;
                            $scope.data = data;
                        }).
                        error(function (data, status) {
                            $scope.data = data || "Request failed";
                            $scope.status = status;
                        });

                    };

                }]);
</script>

身体某处：

<div>
    <div ng-app="httpExample">
        <div ng-controller="ContactController">
            <fieldset>
                <legend>Contact</legend>
                Username: <input type="text" ng-model="contact.userName"/><br/>
                Last Name: <input type="text" ng-model="contact.lastName"/><br/>
                First Name: <input type="text" ng-model="contact.firstName"/><br/>
            </fieldset>
            <br />
            <button id="getbtn" ng-click="get()">get</button>
            <button id="postbtn" ng-click="post()">post</button><br/><br/>

            <pre>http status code: {{status}}</pre>
            <pre>http response data: {{data}}</pre>
        </div>
    </div>
</div>

您的MVC服务器端Home控制器具有如下所示的方法：

<HttpGet> _
Public Function Contact() As JsonResult
    Dim contact = New With { .userName = "smithjk", .firstName = "John", .lastName = "Smith" }
    Return Json(contact, JsonRequestBehavior.AllowGet)
End Function

<HttpPost> _
Public Function Contact(userName As String, firstName As String, lastName As String) As ActionResult
    'do some work
    System.Diagnostics.Debug.Print(userName)
    Return New EmptyResult()
End Function