All geek questions in one place

UI-Router does not pass template children to Asp.net Mvc correctly

I have mentioned conditions

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

 <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 that 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 a request in the accounts.add state, it always calls the accounts state. And it displays the _icons , which is nothing more than a partial view, like _icons.cshtml . I see in firebug that the url has been called, but it is never displayed. WHY????

Firebug output is similar to 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 finish rendering the index action. Can someone tell me why this is happening? This should not happen. Is there something that I am missing from the agreement with ui-router?

0
source share
1 answer

I created a plunker showing / explaining the problem.

The fact is that this is a child state:

 .state('accounts.add', { url: "/add", views: { 'content': { templateUrl: "/accounts/add" } }

has the same idea as its parent: 'content'. This means that it does not mean that they are aimed at the same view. No - the child is looking for a view in the parent element - with the same name as content .

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

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

The purpose of the child state ( accounts.add ) is 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>

How to target root ui-view="content" (index.html) is to use absolute naming. In plunker, I used the Insert state for this:

  .state('accounts.insert', { url: "/insert", views: { ' content@ ': { templateUrl: "accounts.insert.tpl.html" } }

Where in the view name is ' content@ ' @ I am a way to target the root. See the documentation for more details:

Small extract:

 views: { //////////////////////////////////// // Relative Targeting // // Targets parent state ui-view // //////////////////////////////////// // Relatively targets the 'detail' view in this state parent state, 'contacts'. // <div ui-view='detail'/> within contacts.html "detail" : { }, // Relatively targets the unnamed view in this state 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@ " : { }
0
source

Source: https://habr.com/ru/post/969920/

More articles:


All Articles