在调用数据库时,asp core 2角度spa路径在刷新时不起作用

时间:2018-03-02 17:50:42

标签: .net typescript asp.net-core asp.net-core-2.0

我在使用asp.net core 2 angular SPA中的页面刷新工作时遇到问题。

如果从创建一些假数据的测试控制器,但在调用数据库时返回..

,它可以正常工作

NodeInvocationException:意外的令牌<在位置0的JSON中 SyntaxError:意外的令牌<在位置0的JSON中

import { Component, Inject } from '@angular/core';
import { Http } from '@angular/http';

@Component({
    selector: 'testroute',
    templateUrl: './testroute.component.html'
})
export class TestRouteComponent {
public jobs: TestJob[];

constructor(private http: Http, @Inject('BASE_URL') private baseUrl: string) 
{
    http.get(baseUrl + 'api/TestData/TestJobs').subscribe(result => {

        this.jobs = result.json() as TestJob[];
    }, error => console.log(error));
   }
 }
interface TestJob {
jobTitle: string;
}

testDataController(在app和刷新时工作)

    [HttpGet("[action]")]
    public IEnumerable<TestJob> TestJobs()
    {
        var rng = new Random();
        var jobs =  Enumerable.Range(1, 10).Select(index => new TestJob
        {
            JobTitle = JobTitles[rng.Next(JobTitles.Length)]
        });

        return jobs;
        }
    }

    public class TestJob
    {
        public string JobTitle { get; set; }

    }

savedjobscontroller方法(从应用程序调用但不刷新时工作)

    [HttpGet("[action]")]
    public IActionResult SavedJobs()
    {
        try
        {
            var username = User.Identity.Name;

            var jobs = mapper.Map<IEnumerable<Job>,
                IEnumerable<JobViewModel>>(
                userSavedJobsRepository.GetUserSavedJobs(username));

            return Ok(jobs);
        }
        catch (Exception ex)
        {
            logger.LogError($"Failed to get User Saved Jobs {ex}");
            return BadRequest("Failed to get User Saved Jobs");
        }
    }

如果我在savejobs控制器而不是测试控制器中调用该方法,只要我从应用程序中重定向到该路径,该路由就会起作用。如果我只是将url放在浏览器中,我会在0位错误时得到意外的json。

我已经尝试了我在这里可以找到的所有内容,在startup.cs等中更改路由。

两次调用的repsonse格式相同,所以我不明白为什么数据库/存储库调用会影响它。

在测试控制器中创建数据时可以正常工作。

如果有人能指出我正确的方向,我们将不胜感激。

1 个答案:

答案 0 :(得分:1)

如果其他人遇到类似的问题,我发现让它运作的唯一方法是在路线中添加{useHash:true}。

例如

import { NgModule } from '@angular/core';

const routes: Routes = [
    { path: '', redirectTo: 'home', pathMatch: 'full' },
    { path: 'home', component: HomeComponent },
    { path: '**', redirectTo: 'home' }
];

@NgModule({
  imports: [
      BrowserModule,
      FormsModule,
      RouterModule.forRoot(routes, { useHash: true })
  ],
  bootstrap: [AppComponent]
 })

export class AppModule { }

不幸的是,顾名思义它会在所有网址中添加/#/ page,但页面会刷新并可以通过在浏览器中添加网址直接导航到网页。