使用Web Api配置AngularJS SPA模板的問題

Question

我試圖使用VS 2013的AngularJS SPA模板與Web Api，但應用程序永遠不會進入我的控制器，即使你進入調用該控制器的app.js部分，這是我的設置：

AppAStart文件夾中的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的空Web應用程序重新創建此項目時，一切正常。 我認為AngularJS SPA模板會破壞項目的配置和路由。

Answer 1

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

Answer 2

我會改為：

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

然后我相信你的電話會成功。