使用 Web Api 配置 AngularJS SPA 模板的问题

Question

我正在尝试将 VS 2013 的 AngularJS SPA 模板与 Web Api 一起使用，但应用程序永远不会进入我的控制器，即使它进入调用该控制器的 app.js 部分，这是我的设置：

App_Start 文件夹内的WebApiConfig.cs

using Newtonsoft.Json.Serialization;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web.Http;
//using System.Web.Mvc;

namespace App.TheForm
{
    public static class WebApiConfig
    {
        public static void Register(HttpConfiguration config)
        {
            // Web API configuration and services
            config.Formatters.JsonFormatter.SerializerSettings.ContractResolver = new CamelCasePropertyNamesContractResolver();
            // Web API routes
            config.MapHttpAttributeRoutes();

            config.Routes.MapHttpRoute(
                name: "DefaultApi",
                routeTemplate: "api/{controller}/{id}",
                defaults: new { id = RouteParameter.Optional }
            );
        }
    }
}

Controllers 文件夹内的FormController.cs：

namespace App.TheForm.Controllers
{
    public class FormController : ApiController
    {
        public IEnumerable<Dictionary<string, object>> GetFormList()
        {
            List<DataRow> formList = new List<DataRow>();
            SqlConnection con = new System.Data.SqlClient.SqlConnection(@"Data Source=MyConnection;Initial Catalog=Forms;Integrated Security=True");

            con.Open();
            SqlCommand cmd = new SqlCommand("sp_Get_FormList", con);
            cmd.CommandType = CommandType.StoredProcedure;
            SqlParameter pFormId = new SqlParameter("@FormId", 3);

            cmd.Parameters.Add(pFormId);

            SqlDataAdapter da = new SqlDataAdapter(cmd);
            DataTable dt = new DataTable();

            try
            {
                da.Fill(dt);
                itList<Dictionary<string, object>> rows = new List<Dictionary<string, object>>();
                Dictionary<string, object> row;

                foreach (DataRow dr in dt.Rows)
                {
                    row = new Dictionary<string, object>();
                    foreach (DataColumn col in dt.Columns)
                    {
                        row.Add(col.ColumnName, dr[col]);
                    }
                    rows.Add(row);
                }
                return rows;
            }
            catch (Exception ex)
            {

            }
            finally
            {
                cmd.Dispose();
                con.Close();
            }

            return null;
        }            
    }
}

AngularJS 控制器：

app.controller('FormController', function ($scope, $http) {
    $http.get('api/form/getformlist').success(function (data) {
        $scope.formlList = data;
    }).error(function () {
        alert('Error reading JSON file.');
    });

    }
});

index.cshtml

@{
    PageData["title"] = "AngularJS SPA Template for Visual Studio";
}
<h2>Welcome!</h2>
<p>This is just a demo page.</p>

<table ng-app="app" border="1" ng-controller="FormController">
    <tr ng-repeat="form in formlList" ng-class-odd="'odd'" ng-class-even="'even'">
        <td>
            {{form[0]}}
        </td>
        <td>
            {{form[1]}}
        </td>
    </tr>
</table>

App_Start 内的RouteConfig.cs：

namespace App.TheForm
{
    using System.Web.Routing;

    using App.TheForm.Routing;

    public class RouteConfig
    {
        public static void RegisterRoutes(RouteCollection routes)
        {
            routes.Add("Default", new DefaultRoute());
        }
    }
}

感谢任何帮助。

更新：我只在使用 AngularJS SPA 模板时遇到这个问题。当我使用带有 Web Api 的 Empty Web Application 重新创建这个项目时，一切正常。我认为 AngularJS SPA 模板搞乱了项目的配置和路由。

Answer 1

我会把它改成：

[RoutePrefix("api/form")]
public class FormController : ApiController
{
    [Route("getFormList")]
    public IEnumerable<Dictionary<string, object>> GetFormList()

然后我相信你的电话应该会成功。

Answer 2

在客户端使用$http.get('api/form') 而不是$http.get('api/form/getformlist')。