我正在与Angular作斗争,想要让它在ng-view之外使用ng-include来包含一个部分cshtml视图。
这是我的主视图:
<div class="container">
<div class="header">
<div class="loginView">
<div ng-include="Home/Template/login"></div>
</div>
</div>
</div>
<div class="container">
<div ng-view></div>
</div>
这是我的部分Login.cshtml:
<form name="login" ng-controller="LoginCtrl" class="form-inline">
<div class="form-group"><input type="text" name="loginName" class="form-control input-sm" placeholder="Brugernavn" oninvalid="this.setCustomValidity('Indtast brugernavn')" ng-model="UserData.LoginName" ng-required="true"></div>
<div class="form-group"><input type="text" name="password" class="form-control input-sm" placeholder="Kodeord" oninvalid="this.setCustomValidity('Indtast kodeord')" ng-model="UserData.Password" ng-required="true"></div>
<div class="form-group">
<button class="btn btn-primary btn-sm" ng-click="Login()" ng-disabled="login.password.$error.required || login.loginName.$error.required">Login</button>
</div>
</form>
我使用MVC返回特定的局部视图,例如调用下面的URL: public ActionResult Template(string id)
{
switch (id.ToLower())
{
case "login":
return PartialView("~/Views/Account/Partials/Login.cshtml");
case "register":
return PartialView("~/Views/Account/Partials/Register.cshtml");
case "main":
return PartialView("~/Views/Main/MainPage.cshtml");
default:
throw new Exception("template not known");
}
}
基本上,我认为ng-include应该调用一个URL,以返回要包含在页面中的HTML。但实际情况并非如此,模板方法根本没有被调用。当然,我可以在主页面上包含整个模板,但稍后在登录后,我希望用已登录用户数据模板替换这个模板。有什么解决办法吗?
Html.Partial("_PartialName")
- 然后在局部视图中使用{{angularData}}
,只要你的 Angular 控制器在顶部页面中定义了这些值。我认为通过 ng-include 的方式可能会让你自己复杂化了。请记住,Angular 是为单页应用程序使用 API 服务而构建的。MVC 和 Razor 是一个功能齐全的语言,已经具备了所有这些功能。将它们结合起来有点像挑选和混搭。在我看来,这是不必要的,但事实就是这样。 - Piotr Kula