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

时间:2014-07-29 00:55:23

标签: asp.net vb.net angularjs

我试图将存储在动态创建的表中的数据传递给服务器,虽然我可以访问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 = [];
        });

1 个答案:

答案 0 :(得分:0)

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

您的MVC控制器中的操作方法应如下所示:

<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