2017-07-06 6 views
1

私は、次の例に Link to source.NETのコアは、(OKを返すIActionResult)

に従っていると私はデータで[OK]を返すために私のコントローラ(彼TripsControllerと同じである必要があります)を作成したときに、ブラウザがそれを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(); 
     } 
    } 
} 

ある

// 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

角度app.jsからコードで

@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> 

答えて

1

問題が見つかりました。コントローラ内

  1. 私は

    (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; 
         }); 
    
    } 
    })(); 
    
machineController.jsを変更もう一つの方法

[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"); 
    } 
} 
  • セカンドを追加

  • 関連する問題