UI-Router 无法在 Asp.net Mvc 中使用 templateurl 正确渲染子项 [英] UI-Router isnt rendering childs correctly with templateurl in Asp.net Mvc

问题描述

我有这样提到的州

 $stateProvider.state('仪表板', {网址:/仪表板"，意见:{内容:{ templateUrl:/dashboard/index"}}}).state('账户', {网址:/帐户"，意见:{'内容':{templateUrl:/accounts/index"}}}).state('accounts.add', {网址:/添加"，意见:{'内容':{templateUrl:/accounts/add"}}});

和 URL 是

服务用户<a class="list-group-item submenu" ui-sref="accounts.add">添加用户</a>

我正在使用 asp.net Mvc，所以我的控制器目前为模板提供服务

 公共类 AccountsController : 控制器{////获取:/账户/公共 ActionResult 索引(){返回 Request.IsAjaxRequest() ?(ActionResult)PartialView("_Icons") : View();}公共 ActionResult 添加(){返回 Request.IsAjaxRequest() ?(ActionResult)PartialView("_Add") : View();}}

但是每当我向状态 accounts.add 发出请求时，它总是调用 accounts 状态.并呈现 _icons 视图，它是只不过是 _icons.cshtml 的部分视图.我可以在萤火虫中看到 url 已被调用，但它从未被渲染.为什么????

萤火虫输出是这样的

GET http://localhost:2060/accounts/index 200 OK 2msGET http://localhost:2060/accounts/add 200 OK 5ms

这是当我单击 ui-sref="accounts.add" 并最终呈现索引操作时发生的情况.有人能告诉我为什么会这样吗?它不应该发生.作为 ui-router 的约定，我是否遗漏了某些内容?

解决方案

我创建了一个 plunker 展示/解释问题.

重点是，这个子状态:

.state('accounts.add', {网址:/添加"，意见:{'内容':{templateUrl:/accounts/add"}}

与其父视图具有相同的视图名称:内容".这实际上不意味着它们针对相同的视图.否 - 子项正在父项中搜索视图 - 具有相同的名称 content.

父状态的目标 (accounts) 是 Index.html (在 ASP.NET MVC/home/中):

<div ui-view="内容" ></div>

子状态的目标 (accounts.add) 是 templateUrl: "/dashboard/index":

... 父内容 ......这是子状态的占位符(同名)... 内容"<div ui-view="内容" ></div>

定位根目录 ui-view="content" (index.html) 的方法是使用绝对命名.在 plunker 中，我为此使用了插入状态:

 .state('accounts.insert', {网址:/插入"，意见:{'content@': { templateUrl: "accounts.insert.tpl.html" }}

视图名称 'content@' 中的 @ i 是如何定位根的方式.请查看文档以获取更多详细信息:

• 查看名称 - 相对名称与绝对名称

小摘录:

 视图:{///////////////////////////////////////相对定位////以父状态 ui-view 为目标/////////////////////////////////////////相对地针对此状态的父状态联系人"中的详细信息"视图.//<div ui-view='detail'/>在contacts.html中细节" : { }，//相对地指向此状态的父状态中的未命名视图，'contacts'.//
在contacts.html中"" : { },////////////////////////////////////////////////////////使用@"的绝对定位////定位此状态内的任何视图或祖先//////////////////////////////////////////////////////////绝对针对此状态下的 'info' 视图，'contacts.detail'.//<div ui-view='info'/>在contacts.detail.html 中[e-mail]":{}//绝对以联系人"状态下的详细信息"视图为目标.//<div ui-view='detail'/>在contacts.html中详细@联系人":{}//绝对以父联系人"状态的未命名视图为目标.//
在contacts.html中@联系人":{}//绝对针对根未命名状态中的状态"视图.//<div ui-view='status'/>在 index.html 中地位@" : { }

I have states mentioned like this

 $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" }
            }
        });

and the URLS are

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

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();
    }
}

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

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

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 ?

解决方案

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.

The target for the parent state (accounts) is the Index.html (in ASP.NET MVC /home/):

<body>
    <div ui-view="content" ></div>
</body>

The target for the child state (accounts.add) is the templateUrl: "/dashboard/index":

<div>
  ... parent content ...
  ... and here is the place holder for child state (with the same name)
  ... "content"
  <div ui-view="content" ></div>
</div>

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

Small extract:

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
    "[e-mail]" : { }

    // 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-Router 无法在 Asp.net Mvc 中使用 templateurl 正确渲染子项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！