簡體   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