I have this anchor tag helper inside a view component:
<a asp-controller="Account" asp-action="Signup" asp-route-xxx="xxx" asp-route-returnUrl="/">Sign Up</a>
When it gets rendered in the browser, it looks like this:
It doesn't pass in the asp-route-* that I added. But the exact same tag helper I copy and pasted on a controller view, it gets rendered like this:
It contains the asp-route-* values in the query string. Do I need to do something to make it work for ViewComponents?
Related
I am writing a custom TagHelper that should change its behavior based on what child elements its owner tag has. This will be used for substituting custom html elements in a localized string.
Here's a simple example of what I'm trying to do:
<h2 locale-key="Hello, %1!">
<span class="bold" locale-parameter="1">#userName</span>
</h2>
In the example above, the TagHelper for LocaleKey will change the content of the <h2> tag to a localized string. If this is a simple string with no parameters, then I can just simply use output.Content.SetHtmlContent() in the TagHelper to set the h2's content to the string. However in this case, the localized string has a parameter (%1), and I want the corresponding child element (<span parameter="1">) to be substituted in the final output. So the final rendered html would look like this:
<h2>Hello, <span class="bold">Lázár Zsolt</span>!<h2/>
To achieve this, I should be able to see all the child elements in the DOM from the LocaleKey TagHelper, so I can generate the correct HTML code. In the TagHelper's ProcessAsync method I can access the TagHelperContext and the TagHelperOutput, but I couldn't find any information about child elements in either of these objects while debugging. Is this possible somehow?
Another approach is to leave the string as is, with the %1 parameter key, and then use the child ParameterTagHelper to substitute itself into the parameterized string. To do this, I'd have to see the siblings of the current tag from the TagHelper.
Recursion would also be fun (e.g. the <span> is also localized and has its own parameters), but for the scope of this question, I'd be happy if I could get this to work without recursion.
I posted too soon again... There is a GetChildContentAsync() method in TagHelperOutput that will... get the child content asynchronously.
I have a view that is rendering Person objects in a list called People in a table with dynamic rows. I render it like so in the HTML:
<partial name="_People" for="Model.People[i]" />
With i being the index in the for loop.
So it then goes and renders a partial view with the correct input names so I can bind back to it. Like so:
<input name="People[0].Name" ...
<input name="People[0].PhoneNumber" ...
I want to call back to my razor model to render a new row programmatically and have it return a row with the correct index. So say there are already 7 rows in the table, I hit a button and it returns a Partial View with my row inputs with the correct index of 8 in their names. I can then append this row to the table with javascript. So just wondering if there is a programmatic equivalent to
<partial name="_People" for="Model.People[8]" />
I figured it out. You can set the HTML Field Prefix in the view data template info.
Like so:
int index = 8;
ViewData.TemplateInfo.HtmlFieldPrefix = string.format("People[{0}], index)";
I have a parent form that loads child forms into tabs.
The parent looks like this:
<div repeat.for="app of Apps">
<compose if.bind='app.Url.startsWith("modules/")' view-model="${app.Url}"></compose>
</div>
So each of the "compose" tags loads a different page based on URL.
How can I find the specific page and call a function from that page's ts file?
I have a temporary solution in place by, on the parent, declaring a variable with:
childPage: any;
and then on the activate event of the child, I do:
parent.childPage = this;
Then, on the parent page, I have can do:childPage.childFunction();
This of course doesn't give me intellisense and won't work with multiple children, but for now, it meets my needs.
I have a list of composed elements:
<compose repeat.for="foo of someList" view-model="./bar" model.bind="foo">
Now, from the parent, I would like to call a function on a specific bar view model. How do I do that?
You can add view-model.ref in your compose tag:
<compose repeat.for="foo of someList" view-model="./bar" model.bind="foo" view-model.ref="foo.barviewmodel">
You can replace view-model.ref by compose.ref. The both give the same result.
And in the parent you can call a function on a bar view model like this:
this.someList[2].barviewmodel.currentViewModel.action();
It works, but I don't know if it's a public api. See this issue for more details
I have created a TitlePane and wish to load data dynamically from a get method into the Title property. As of the current this all works. However, now when the data is loaded (4 separate types), its all getting mushed together. I wish to divide this received data evenly (25%) across the title.
For example:
<div id="tp2" data-dojo-type="dijit/TitlePane" data-dojo-props="title: 'I'm a TitlePane
Too'">
Click arrow to close me.
</div>
In this example the title is set to "I'm a TitlePane Too".
I wish to change the title so that each of the four words is evenly distributed across the title section of the pane. However there are no extra properties for doing this sort of thing.
Use the "set" method to set the new title.
E.g:-
<div id="tp2" data-dojo-type="dijit/TitlePane" data-dojo-props="title: 'I'm a TitlePane
Too'">
Click arrow to close me.
</div>
//For this above example, title is replaced as follows in JS
dijit.byId('tp2').set('title','New title');
Update: If this title pane is created dynamically without an ID, then get the widget object using the css query.
dijit.getEnclosingWidget(dojo.query(".dijitTitlePane")[0]).set('title','New title');
dojo.query(".dijitTitlePane") => will give array of all titlepane domNodes. From this chose the one you need. I chose at "0"th index i.e. 1st title pane node in the page.
Then I get the widget object of that domNode and then set the title.