UI的心不是路由器在Asp.net的mvc templateurl正确渲染童车 [英] UI-Router isnt rendering childs correctly with templateurl in Asp.net Mvc
问题描述
我有国家提到这样
$stateProvider
.state('dashboard', {
url: "/dashboard",
views: {
content: { templateUrl: "/dashboard/index" }
}
}).state('accounts', {
url: "/accounts",
views: {
'content': { templateUrl: "/accounts/index" }
}
})
.state('accounts.add', {
url: "/add",
views: {
'content': { templateUrl: "/accounts/add" }
}
});
和中的网址
<a class="list-group-item submenu" ui-sref="accounts">Service Users</a>
<a class="list-group-item submenu" ui-sref="accounts.add">Add User</a>
我使用asp.net的MVC所以我控制器供应模板目前看起来像这样
I am using asp.net Mvc so my Controller which serves the templates currently looks like this
public class AccountsController : Controller
{
//
// GET: /Accounts/
public ActionResult Index()
{
return Request.IsAjaxRequest() ? (ActionResult)PartialView("_Icons") : View();
}
public ActionResult Add()
{
return Request.IsAjaxRequest() ? (ActionResult)PartialView("_Add") : View();
}
}
但每当我提出请求状态 accounts.add 那么它总是调用状态。而呈现帐户在 _icons 查看这不过是为 _icons.cshtml 的局部视图。我可以看到萤火虫该网址已被调用，但它从来没有得到呈现。为什么????
But whenever I make request to the state accounts.add then it always calls the accounts state .And renders the _icons view which is nothing but a partial view as _icons.cshtml. I can see in firebug that url has been called but it never gets rendered . WHY ????
Firebug的输出是这样的
The firebug output is something like this
GET http://localhost:2060/accounts/index 200 OK 2ms
GET http://localhost:2060/accounts/add 200 OK 5ms
这是当我点击 UI-SREF =accounts.add发生了什么，并最终使该指数的行动。谁能告诉我，为什么会出现这种情况？它不应该发生。有一些东西，我从UI的路由器？
This is what happens when I click ui-sref="accounts.add" and ends up rendering the index action . Can someone tell me why is this happening ? It shouldn't be happening . Is there something which I am missing out as convention from ui-router ?
推荐答案
我创建了一个的 plunker 显示/解释的问题。
I've created a plunker showing/explaining the issue.
问题的关键是，这个孩子的状态：
The point is, that this child state:
.state('accounts.add', {
url: "/add",
views: {
'content': { templateUrl: "/accounts/add" }
}
有相同的查看命名为其父：内容。这实际上做的不可以的意思是，他们的目标同样的观点。否 - 孩子正在寻找在父视图 - 具有相同的名称内容
has the same view name as its parent: 'content'. This in fact does not mean, that they target the same view. No - child is searching for a view in a Parent - with the same name content.
父国家目标的（帐户）的是中的index.html的（ASP.NET MVC中的/ home /） 的：
<body>
<div ui-view="content" ></div>
</body>
对于孩子的状态目标的（ accounts.add ）的是 templateUrl：/仪表板/指数 ：
<div>
... parent content ...
... and here is the place holder for child state (with the same name)
... "content"
<div ui-view="content" ></div>
</div>
如何定位根用户界面视图=内容的方式的（的index.html）的是使用绝对命名。在 plunker 我用插入的状态为：
The way how to target the root ui-view="content" (index.html) is to use absolute naming. In the plunker I used Insert state for that:
.state('accounts.insert', {
url: "/insert",
views: {
'content@': { templateUrl: "accounts.insert.tpl.html" }
}
在视图名称内容@'在 @ 我是方式如何定位的根源。有关详细信息，请查看文档：
Where in the view name 'content@' the @ i is the way how to target the root. Please check the documentation for more details:
- View Names - Relative vs. Absolute Names
小摘录：
views: {
////////////////////////////////////
// Relative Targeting //
// Targets parent state ui-view's //
////////////////////////////////////
// Relatively targets the 'detail' view in this state's parent state, 'contacts'.
// <div ui-view='detail'/> within contacts.html
"detail" : { },
// Relatively targets the unnamed view in this state's parent state, 'contacts'.
// <div ui-view/> within contacts.html
"" : { },
///////////////////////////////////////////////////////
// Absolute Targeting using '@' //
// Targets any view within this state or an ancestor //
///////////////////////////////////////////////////////
// Absolutely targets the 'info' view in this state, 'contacts.detail'.
// <div ui-view='info'/> within contacts.detail.html
"info@contacts.detail" : { }
// Absolutely targets the 'detail' view in the 'contacts' state.
// <div ui-view='detail'/> within contacts.html
"detail@contacts" : { }
// Absolutely targets the unnamed view in parent 'contacts' state.
// <div ui-view/> within contacts.html
"@contacts" : { }
// absolutely targets the 'status' view in root unnamed state.
// <div ui-view='status'/> within index.html
"status@" : { }
这篇关于UI的心不是路由器在Asp.net的mvc templateurl正确渲染童车的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
