c# - HashLocationsstrategy 在 Angular 6 应用程序中不起作用
问题描述
我正在研究 Angular 6 应用程序。我想在我的应用程序中使用 HashLocationstrategy。我的用户界面如下所示:
因此,现在当用户单击“链接子广告系列”时,我将用户带到浏览器中的新选项卡以选择所需的子广告系列以绑定和发布链接,我将用户返回到我的 Angular 应用程序。现在,当将用户返回到我的应用程序时,我想用哈希返回用户。
例如:http://localhost:4200/#/campaign-details/2(必需格式) http://localhost:4200/campaign-details/2(我得到的实际格式)
这是我的 Component.html 的样子:
<div class=" text-center">
<h3 *ngIf="!SubCampaign">{{SubCampaign}}</h3>
<a href="http://localhost:64674/portal/Campaigns/Edit/{{CampaignId}}" target="_blank" *ngIf="SubCampaign == null" class="btn btn-outline-primary "> <i class="zmdi zmdi-link zmdi-hc-fw"></i>Link SubCampaign</a>
</div>
然后上面的链接会将他带到我的后端,它是一个 C#(Web API),我的控制器看起来像这样:
public ActionResult Edit(int? id)
{
if (id == null)
{
return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
}
Campaign campaign = db.Campaigns.Find(id);
var subcampaign = db.SubCampaigns.Select(x => new {x.Id , x.Name }).ToList();
if (campaign == null)
{
return HttpNotFound();
}
var cId = db.Campaigns.Where(x => x.Id == id);
ViewBag.cmapId = cId;
ViewBag.CampaignName = campaign.Name;
ViewBag.SubCampaigns_Id = new SelectList(subcampaign, "Id", "Name");
ViewBag.Department_Id = new SelectList(db.Departments, "Id", "Name", campaign.Department_Id);
ViewBag.BeneficiaryGroup_Id = new SelectList(db.BeneficiaryGroups, "Id", "Name", campaign.BeneficiaryGroup_Id);
return View(campaign);
}
上面的代码片段有一个用于选择子活动的视图 ( .cshtml )。注意:(这里没有提到查看代码。)
上述代码的 http Post 方法如下所示:
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Edit([Bind(Include = "Id,Department_Id,Name,IsIVRCampaign,BeneficiaryGroup_Id,SubCampaigns_Id")] Linksubcampaign campaign)
{
if (ModelState.IsValid)
{
//db.Entry(campaign).State = EntityState.Modified;
//db.SaveChanges();
//return RedirectToAction("Index");
var subcamp = db.SubCampaigns.Where(x => x.Id == campaign.SubCampaigns_Id).FirstOrDefault();
subcamp.Campaign_Id = campaign.Id;
db.SaveChanges();
ViewBag.campId = campaign.Id;
return View("ReturnUrl", new { CampaignId = ViewBag.campId });
}
我将用户带到“ RetrunUrl ”操作方法,在该方法中我将用户带回 Angular 6 应用程序。RetrunUrl操作方法控制器和视图页面 (.cshtml) 页面如下所示。
public ActionResult ReturnUrl(int? CampaignId)
{
ViewBag.CampId = CampaignId;
return View();
}
<div class="hidden">
<form action="http:localhost:4200/#/campaign-details/@ViewBag.CampId" method="post" id="returnForm">
<input type="submit" />
</form>
</div>
<script type="text/javascript">
setTimeout(function () {
$('form#returnForm').submit();
}, 2000);
</script>
我的应用模块如下所示:
import { browser } from 'protractor';
import { CampaignDetailsComponent } from './campaign-details/campaign-details.component';
import { HttpClientModule } from '@angular/common/http';
import { CampaignService } from './../../services/campaign.service';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {RouterModule} from '@angular/router'
import { AppComponent } from './app.component';
import { HttpModule } from '@angular/http';
import { HomeComponent } from './home/home.component';
import { FormsModule } from '@angular/forms';
import { Ng2GoogleChartsModule } from 'ng2-google-charts';
import { CampaignHeaderComponent } from './campaign-header/campaign-header.component';
import { CountToModule } from 'angular-count-to';
import { QuestionnaireComponent } from './questionnaire/questionnaire.component';
import { FilterPipe } from './filter.pipe';
import { BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {MatProgressBarModule} from '@angular/material/progress-bar';
import { TreemapComponent } from './treemap/treemap.component';
import { LocationStrategy, HashLocationStrategy } from '@angular/common';
@NgModule({
declarations: [
AppComponent,
CampaignDetailsComponent,
HomeComponent,
CampaignHeaderComponent,
QuestionnaireComponent,
FilterPipe,
TreemapComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
MatProgressBarModule,
HttpModule,
HttpClientModule,
FormsModule,
CountToModule,
Ng2GoogleChartsModule,
RouterModule.forRoot([
{path:'',component:HomeComponent},
{path:'campaign-details/:Id',component:CampaignDetailsComponent}
])
],
providers: [
CampaignService,
{provide: LocationStrategy, useClass: HashLocationStrategy}
],
bootstrap: [AppComponent]
})
export class AppModule { }
这正是我的问题。它没有返回哈希值。甚至我也试图明确地保留一个哈希值。任何我出错的建议。非常感谢提前。
解决方案
只是在这里快速更新,我想出了自己的解决方案。它符合我的要求。把它放在这里以防万一有人需要它。:)
@*This code is my "ReturnUrl.cshtml"*@
<script src="~/Scripts/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
window.open('http://localhost:4200/#/campaign-details/@ViewBag.CampId', '_self')
});
</script>
推荐阅读
- mysql - 加入多列匹配
- c# - 使用 microsoft.interope.word 拒绝从 ASP.Net 应用程序访问 Office
- python - 我如何解决断管问题 MQTT 客户端
- chat - 如何在 Jitsi 中发送短信?
- python - 如何将 Python Pandas 函数转换为 Python PySpark
- android - 资源布局差距
- react-native - 有什么方法可以在 React Native 中使用 ref 获取 TextInput 的文本值?
- javascript - 在 Firefox 中延迟加载输入数据列表
- c# - 在 Visual Studio 2017 中进行远程调试时,调试未达到断点
- android - 基于谷歌账号的用户状态管理