我有下一个例子
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");
}
}
}
}
如果我退回View,它将正常工作。
这是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();
}
}
}
这是角度的代码
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>
最佳答案
我发现了问题所在。
在控制器中,我添加了另一种方法
[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;
});
}
})();