UI-Router isnt rendering childs correctly with templateurl in Asp.net Mvc

问题

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 ?

回答1:

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
    "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@" : { }

来源：https://stackoverflow.com/questions/23847068/ui-router-isnt-rendering-childs-correctly-with-templateurl-in-asp-net-mvc

标签

asp.net-mvc

angularjs

angular-ui-router