繁体   English   中英

使用ASP.NET MVC的Angular $ http发布

[英]Angular $http post with ASP.NET MVC

我在这里想念什么? 我试图将2个字段(CustomerID和CompanyName)从我的视图传递到控制器中。 当我在控制器的动作上设置断点时,custID和公司名称均为空。 我敢肯定,我所缺少的都是容易的,但我只是没有进入Angular。 任何帮助将不胜感激。 谢谢!

的HTML

<input type="text" class="form-control" ng-model="new.CustomerID" />
<input type="text" class="form-control" ng-model="new.CompanyName" />

Java脚本

$scope.AddCustomer = function () {
    debugger;
    var urlPost = "/Home/SaveCustomer/";

    console.log($scope.new);
    alert(urlPost);
    $http({
        method: 'POST',
        url: urlPost,
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
        },

        data: { custID: $scope.new.CustomerID, CompanyName: $scope.new.CompanyName }

    }).success(function() {
        alert('Update Successfully!');
    });

}

C#

[HttpPost]
public void SaveCustomer(string custID, string CompanyName)
{

}

编辑

发布此问题几周后,答案被接受,我找到了一种更简单的方法来完成此任务。 这是一个代码示例:

的HTML

 <input type="number" placeholder="CustomerID" ng-model="newCustomer.CustomerID" class="form-control" style="width: 130px" required/>
 <input type="text" placeholder="Customer Name" ng-model="newCustomer.CustomerName" class="form-control" style="width: 200px" required />
 <input type="text" placeholder="Email" ng-model="newCustomer.CustomerEmail" class="form-control" style="width: 200px" required />

的JavaScript

$scope.newCustomer = { 
    CustomerID: '',
    CustomerName: '',
    CustomerEmail: ''
};
$scope.addCustomer = function () {
    $http.post("/Home/GetCustomer",
        {
            customerID: $scope.newCustomer.CustomerID,
            customerName: $scope.newCustomer.CustomerName,
            customerEmail: $scope.newCustomer.CustomerEmail
        }).error(function (responseData) {
            alert(responseData);
        })
    .success(function () {
        alert('Updated Successfully');
});

C#控制器

[HttpPost]
public void GetCustomer(int customerID, string customerName, string customerEmail)
{

    //do something with values
}

我的意思是您的问题是因为Web api使用的绑定基于querystring,所以请更新您的代码,我举一个例子:

public class UsersController : ApiController
    {
        [HttpPost]
        [Route("Users/Save/{custID}/{CompanyName}")]
        public string Save(string custID, string CompanyName)
        {
            return string.Format("{0}-{1}",custID, CompanyName);
        }
    }

和html:

<body ng-app="myApp">
<div ng-controller="myController">
    <h1>Demo</h1>
    <input type="button" value="Save" ng-click="AddCustomer()" />
</div>
<script src="~/Scripts/angular.js"></script>
<script>
    var app = angular.module("myApp", []);
    app.controller("myController", function($scope, $http) {
        $scope.new = {
            CustomerID: "CustId1",
            CompanyName: "Company 1"
        }

        $scope.AddCustomer = function () {
            var urlPost = "/Users/Save/" + $scope.new.CustomerID + "/" + $scope.new.CompanyName
            $http({
                method: 'POST',
                url: urlPost,
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
                }

            }).success(function () {
                alert('Update Successfully!');
            });

        }
    });
</script>
</body>

如果我测试:

在此处输入图片说明

问候,

进行以下更改:

//either define parent object scope only
$scope.new  = {}  

//or if you want to define child object too . May be to show some default value . 
$scope.new = {
 CustomerID: '', //empty or may be some default value
 CompanyName: ''
}

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM