Question

我使用AngularJS和Web API创建了一个应用程序。我可以使用web api和angular js中的参数插入国家/地区记录。但是当我使用模型类在Web API和Angular JS之间传递值时它无效。

这是Country类：

public class Country
{
    /// <summary>
    /// Country id
    /// </summary>
    public int ID { get; set; }

    /// <summary>
    /// Name of country
    /// </summary>
    public string Name { get; set; }

    /// <summary>
    /// Status
    /// </summary>
    public int Status { get; set; }

    /// <summary>
    /// CreatedDate
    /// </summary>
    public DateTime CreatedDate { get; set; }

    /// <summary>
    /// CreatedUser
    /// </summary>
    public int CreatedUser { get; set; }

    /// <summary>
    /// Updated Date
    /// </summary>
    public DateTime UpdatedDate { get; set; }

    /// <summary>
    /// Updated User
    /// </summary>
    public int UpdatedUser { get; set; }
}

下面是用于web api服务定义的CountryController.cs，

[HttpPost]
    [Route("api/Country/UpdateCountry")]
    public bool UpdateCountry(Country country)
    {
        var uttCountry = UserDefinedTableTypeGenerator.GetCountry(country);
        var parameters = new[]
        {
            new Parameter("@Country", uttCountry)
        };
        return CommonContext.SqlHelper.ExecuteScalar<long>("[dbo].[spUpdateCountry]", parameters.ToArray(), storedProcedure: true) > 0 ? true : false;
    }

CountryController.js文件，

(function () {
angular.module("HRMSApplication").controller("countrycontroller", ["$scope", "$filter","$http", "countryservice", function ($scope, $filter,$http, countryservice) {

    $scope.add = function (Country) {
        alert('controller save');

     var data = {

            Name: Country.Name

        };

        $http.post('http://localhost/HrmsApi/api/Country/UpdateCountry', data).success(function (data) {
            $scope.returnValue = data;
            alert('hi');
        }).error(function (data) {
            $scope.error = "An Error has occured while Saving person! " + data;
            $scope.loading = false;
        });

}

Country.html代码，

    <form class="form-horizontal" method="post">

        <div class="pull-right icon-btn"><a class="btn btn-info" href="country_view.html"><i class="fa fa-eye"></i>View</a></div>

        <div class="box-body col-md-6 center-form">

            <div class="form-group">
                <label for="" class="col-sm-4 control-label">Country Name</label>
                <div class="col-sm-8">
                    <input type="text" data-ng-model="Country.Name" class="form-control" placeholder="">
                </div>
            </div><!--form group-->

            <div class="form-group">
                <label for="" class="col-sm-4 control-label">Status</label>
                <div class="col-sm-8">
                    <input type="checkbox" checked data-toggle="toggle" data-on="Active" data-off="Inactive" data-onstyle="success" data-offstyle="danger">
                </div>
            </div><!--form group-->

            <div class="box-footer">
                <a href="employee.html" class="btn btn-default">Cancel</a>
                <button type="submit" ng-click="add(Country)" class="btn btn-success">Save</button>
            </div><!-- /.box-footer -->
        </div><!-- /.box-body -->
    </form>

虽然没有通过AngularJS控件从Web API服务传递Country模型。

Answer 1

如果我没记错的话，JavaScript方面的属性名称必须是小写的。

var data = {
    name: Country.Name
};

而不是

var data = {
    Name: Country.Name
};

您应该设置一些断点，这样您就可以看到与您认为发生的事情相比发生了什么。

WEBAPI是否完全被调用？它有任何数据吗？如果有的话会出现什么错误？

使用带有模型类的Web API AngularJS插入新项

1 个答案: