Question

我已经按照下一个例子 Link to source

当我创建我的控制器（应该与他的TripsController相同）以使用数据返回Ok时，浏览器不会解析为HTML，它只在浏览器中显示为json格式。

using System;
using System.Collections.Generic;
using AutoMapper;
using Microsoft.AspNetCore.Authorization;
using Microsoft.AspNetCore.Mvc;
using Microsoft.Extensions.Logging;
using RnD.Models.Repository;
using RnD.Models.ViewModels;

namespace RnD.Controllers.Web
{

    [Route("/machines")]
    [Authorize]
    public class MachineTypeController : Controller
    {
        private ILogger<MachineTypeController> _logger;
        private IMachineTypeRepository _repository;

        public MachineTypeController(IMachineTypeRepository repository, ILogger<MachineTypeController> logger)
        {
            _logger = logger;
            _repository = repository;
        }

        [HttpGet("")]
        public IActionResult Index()
        {
            try
            {
                var results = _repository.GetAllMachineTypes();

                return Ok(Mapper.Map<IEnumerable<MachineTypeViewModel>>(results));
            }
            catch (Exception ex)
            {
                _logger.LogError($"Failed to get all Machine types: {ex}");
                return BadRequest("Error Occurred");
            }

        }
    }
}

如果我返回查看它将正常工作。

这是Startup.cs

using System.Threading.Tasks;
using AutoMapper;
using Microsoft.AspNetCore.Authentication.Cookies;
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Identity.EntityFrameworkCore;
using Microsoft.AspNetCore.Mvc;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using Newtonsoft.Json.Serialization;
using RnD.Models.DataFixtures;
using RnD.Models.Entity;
using RnD.Models.Repository;
using RnD.Models.ViewModels;

namespace RnD
{
    public class Startup
    {
        private IHostingEnvironment _env;
        private IConfigurationRoot _config;

        public Startup(IHostingEnvironment env)
        {
            _env = env;

            var builder = new ConfigurationBuilder()
                .SetBasePath(_env.ContentRootPath)
                .AddJsonFile("config.json")
                .AddEnvironmentVariables();

            _config = builder.Build();
        }

        public void ConfigureServices(IServiceCollection services)
        {
            services.AddSingleton(_config);

            services.AddDbContext<RnDContext>();

            services.AddIdentity<ApplicationUser, IdentityRole>(config =>
            {
                config.User.RequireUniqueEmail = false;
                config.Password.RequireDigit = false;
                config.Password.RequireUppercase = false;
                config.Password.RequiredLength = 8;
                config.Cookies.ApplicationCookie.LoginPath = "/auth/login";
                config.Cookies.ApplicationCookie.Events = new CookieAuthenticationEvents()
                {
                    OnRedirectToLogin = async ctx =>
                    {
                        if (ctx.Request.Path.StartsWithSegments("/api") && ctx.Response.StatusCode == 200)
                        {
                            ctx.Response.StatusCode = 401;
                        }
                        else
                        {
                            ctx.Response.Redirect(ctx.RedirectUri);
                        }
                        await Task.Yield();

                    }
                };
            }).AddEntityFrameworkStores<RnDContext>();

            services.AddScoped<IMachineTypeRepository, MachineTypeRepository>();

            services.AddTransient<RnDContextSeedData>();

            services.AddLogging();

            services.AddMvc(config =>
            {
                if (_env.IsProduction())
                {
                    config.Filters.Add(new RequireHttpsAttribute());
                }
            })
            .AddJsonOptions(config =>
            {
                config.SerializerSettings.ContractResolver = new CamelCasePropertyNamesContractResolver();
            });
        }

        // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
        public void Configure(IApplicationBuilder app,
            IHostingEnvironment env,
            RnDContextSeedData seeder,
            ILoggerFactory loggerFactory

            )
        {

            Mapper.Initialize(config =>
            {
                config.CreateMap<MachineTypeViewModel, MachineType>().ReverseMap();
            });
            loggerFactory.AddConsole();

            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
                loggerFactory.AddDebug(LogLevel.Information);
            }
            else
            {
                loggerFactory.AddDebug(LogLevel.Error);
            }
            app.UseStaticFiles();
            app.UseIdentity();
            app.UseMvc(config =>
            {
                config.MapRoute(
                  name: "Default",
                  template: "{controller}/{action}/{id?}",
                  defaults: new { controller = "Home", action = "Index" }
                  );
            });

            seeder.EnsureSeedData().Wait();
        }
    }
}

这是来自angular

的代码

app.js

// app.js
(function () {
    "use strict";

    angular.module("app",[]);
})();

machineController.js

// machineController.js
(function () {
    "use strict";

    angular.module("app")
        .controller("machineController", machineController);



    function machineController($http) {
        /* jshint validthis:true */
        var vm = this;

        vm.machines = [];

        vm.errorMessage = "";

        $http.get("/machines")
            .then(function (response) {
                // Success
                angular.copy(response.data, vm.machines);
            }, function (error) {
                // Failure
                vm.errorMessage = "Failed: " + error;
            });

    }
})();

Index.cshtml

@model IEnumerable<RnD.Models.Entity.MachineType>
@{
    ViewBag.Title = "Machine Type List";
}

@section scripts{

    <script src="~/lib/angular/angular.js"></script>
    <script src="~/js/app.js"></script>
    <script src="~/js/machineController.js"></script>
}
<div class="row" ng-app="app">
    <div ng-controller="machineController as vm" class="col-md-6 col-md-offset-6">
        <table class="table table-responsive">
            <tr ng-repeat="machine in vm.machines">
                <td>{{machine.name}}</td>
            </tr>
        </table>
    </div>
</div>

Answer 1

我发现了什么问题。

在Controller中我再添加一个方法

[HttpGet("GetMachines")]
public IActionResult GetMachines()
{
    try
    {
        var results = _repository.GetAllMachineTypes();

        return Ok(Mapper.Map<IEnumerable<MachineTypeViewModel>>(results));
    }
    catch (Exception ex)
    {
        _logger.LogError($"Failed to get all Machine types: {ex}");
        return BadRequest("Error Occurred");
    }
}

第二我改变了machineController.js

(function () {
"use strict";

angular.module("app")
    .controller("machineController", machineController);



function machineController($http) {
    /* jshint validthis:true */
    var vm = this;

    vm.machines = [];

    vm.errorMessage = "";

    $http.get("/machines/GetMachines")
        .then(function (response) {
            // Success
            angular.copy(response.data, vm.machines);
        }, function (error) {
            // Failure
            vm.errorMessage = "Failed: " + error;
        });

}
 })();

.net core IActionResult返回OK（）

1 个答案: