angular $ resource save函数不与dataannotation映射

时间:2014-12-03 18:41:10

标签: asp.net asp.net-mvc angularjs asp.net-web-api

我是棱角分明的新人。我正在创建一个练习项目。我关注This tutorial。 一切都工作正常,除非我尝试在我的View模型中放置数据注释$ resource.save方法不再有效。没有数据注释,它可以正常工作。

这是我的代码:

Home.html中:

<!DOCTYPE html>
<html ng-app="movieModule">
<head>
    <meta name="viewport" charset="UTF-8" content="width=device-width, initial-scale=1">
    <title>Movie Sample</title>


    <link href="../Content/bootstrap.min.css" rel="stylesheet" />
    <script src="../Scripts/angular.min.js"></script>
    <script src="../Scripts/angular-resource.min.js"></script>
    <script src="../Scripts/angular-route.min.js"></script>
    <script src="../Scripts/jquery-2.1.1.min.js"></script>
    <script src="../Scripts/bootstrap.min.js"></script>
    <script src="../Scripts/movie-module.js"></script>
    <script src="../Scripts/Category/category-controller.js"></script>
    <script type="text/javascript">
        $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
            var target = $(e.target).attr("href") // activated tab
        });
    </script>
</head>

<body>
    <div class="container">
        <div class="container-fluid">
            <div class="well">
                <ul class="nav nav-pills">
                    <li role="presentation" class="active"><a href="home.html" data-toggle="tab">Home</a></li>
                    <li role="presentation"><a href="#" data-toggle="tab">Movies</a></li>
                    <li role="presentation"><a href="categories.html" data-toggle="tab">Categories</a></li>
                    <li role="presentation"><a href="#" data-toggle="tab">Artists</a></li>
                </ul>
            </div>
        </div>
        <div class="container-fluid">
            <div ng-view="">
            </div>
        </div>
    </div>
</body>
</html>

Categories.html:

<div>
    <a href="create-category.html" class="btn btn-primary">
        <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
    </a>
</div>

<div class="panel panel-default">
    <!-- Default panel contents -->
    <div class="panel-heading">Categories</div>

    <!-- Table -->
    <table class="table">
        <tr>
            <th>ID
            </th>
            <th>Name
            </th>
            <th>Description
            </th>
        </tr>
        <tr data-ng-repeat="category in categories">
            <td>{{ category.id }}
            </td>
            <td>{{ category.name }}
            </td>
            <td>{{ category.description }}
            </td>
        </tr>
    </table>
</div>

创建-category.html

<div class="row">
    <div class="col-md-12">
        <h3>Create Category
        </h3>
    </div>
</div>
<!--<div class="row">-->

<div class="col-md-12">
    <div class="form-group">
        <label for="id">Id:</label>
        <input type="text" ng-model="category.Id" class="form-control">
    </div>
    <div class="form-group">
        <label for="name">Name:</label>
        <input type="text" ng-model="category.Name" class="form-control">
    </div>
    <div class="form-group">
        <label for="description">Description:</label>
        <input type="text" ng-model="category.Description" class="form-control">
    </div>
    <button type="submit" class="btn btn-primary" ng-click="save(category)">Create Category</button>
</div>

movieModule.js

var movieModule = angular.module('movieModule', ['ngRoute', 'ngResource']);

movieModule.config(function ($routeProvider, $locationProvider) {
    $routeProvider.when('/templates/categories.html', { templateUrl: '/templates/categories.html', controller: 'categoryController' }).
                   when('/templates/create-category.html', { templateUrl: '/templates/create-category.html', controller: 'categoryController' });
    $locationProvider.html5Mode(true);
});

类别-controller.js

movieModule.controller('categoryController', function ($scope, $resource, $location) {
    $scope.categories = $resource('/api/Category').query();

    $scope.save = function (category) {
        $scope.errors = [];
        $resource('/api/Category').save(category).$promise.then(
            function () { $location.url('templates/categories.html'); },
            function (response) {
                $scope.errors = response.data;
            });
    }
});

CategoryVM.cs

public class CategoryVM
{
   [Required(ErrorMessage="Is is required.")]
    public int Id { get; set; }

    public string Name { get; set; }

    public string Description { get; set; }
}

问题是[Required(ErrorMessage="Is is required.")]。没有[Required(ErrorMessage="Is is required.")],一切正常,但是当我放[Required(ErrorMessage="Is is required.")]时,它开始给出错误: 以下是错误的快照:

Snapshot of the error

1 个答案:

答案 0 :(得分:1)

尽量不要在Id上添加[Required]属性。 如果您将数据注释放在其他属性上,它应该可以工作。

[必需]到值类型(int)将导致500错误 (字符串不是值类型)