如何使用 Angular 将 FORM 输入中的值发布到 WebApi答案

【问题标题】：How do i post the value from FORM input to WebApi using Angular如何使用 Angular 将 FORM 输入中的值发布到 WebApi
【发布时间】：2018-08-14 18:57:47
【问题描述】：

<div class="input-group col-md-12">
    <input type="text" class="form-control input-lg"/>
    <span class="input-group-btn">
        <button class="btn btn-info btn-lg" type="button">
            <i class="glyphicon glyphicon-search"></i>
        </button>   
    </span>
</div>

基本上，我试图在单击按钮时将输入字段的值发布到 WebAPI

我的 WebAPI 方法

public string Post([FromBody]dynamic value)
{
    return some value from form here; // JToken
}

【问题讨论】：

你检查过 $http.post 吗？ docs.angularjs.org/api/ng/service/$http#post
见AngularJS Developer Guide - Forms。使用ng-model 和ng-submit 指令。

标签： angularjs asp.net-web-api

【解决方案1】：

您需要将 HTML 表单包裹在您的代码中，如下所示

<form novalidate name="frm1">
    <div class="input-group col-md-12">
        <input type="text" class="form-control input-lg" name="firstName" ng-model="user.firstName" />
        <input type="text" class="form-control input-lg" name="lastName" ng-model="user.lastName" />
        <span class="input-group-btn">
                <button class="btn btn-info btn-lg" type="button" ng-click="submit($event, user)">
                    <i class="glyphicon glyphicon-search"></i>
                </button>   
            </span>
    </div>
</form>

使用 ng-model 指令绑定你的每一个输入，你的控制器应该修改如下

angular.module('main').controller('someController', function($scope, $http) {
    $scope.user = {
        firstName: null,
        lastName: null
    };

    $scope.submit = function($event, user) {
        $http.post('api/users', user)
        .then(function(response) {
            console.log('success');
        }).catch(error) {
            console.log(error);
        }
    };
});

【讨论】：

【解决方案2】：

here am giving the Code example for getting the users list from the table Users
Step 1:
public JsonResult UserLogin()
        {
            using (Codesnnip Db = new Codesnnip())
            {
                var user = Db.users.ToList();
                return Json(user, JsonRequestBehavior.AllowGet);
            }
        }

Step 2: step in to angular js
    Step 2.1 create a angular anglar app

    var SampleApp = angular.module('SampleApp',[]);

    Step 2.2 create controller for the View

    SampleApp.controller('HomeCtrl',['$scope',function($scope){

    }]);

    step 2.3 create a service to getting the users data

    SampleApp.factory('userData',function($http){
        var fac = {};
        fac.GetUsers = function(){
            return $http.get('/Home/UserLogin'); // Controllername/action
        }
        return fac;
    });

    after creating the service use this service in the controller like this

    step 2.4
        in html

        <button ng-click="getUserdata()">GetAllUsers</button>

    SampleApp.controller('HomeCtrl',['$scope','userData',function($scope,userData){
        $scope.usersList = null;
        $scope.getUserdata = function(){
            userData.GetUsers().then(function(d){
                $scope.usersList = d.data;
            })
        }
    }]);

【讨论】：