I have the following problem.
I have a product for which I run some tests.
In my cshtml page, I show the test runs for some product item, like this:
<td><a asp-action="TestDetail" asp-route-id="#Model.ResultViewModels[i].TestRunId">Content</a></td>
TestRunId is an integer. For example, TestRunId could be 9. This works: the URL looks correct.
In my cshtml page, the user can click on this, to see more details.
However, when I log the asp-route-id in my controller, this TestRunId seems to be 'lost'. In my example below, the second logging shows testrunId: 0. I expect this to be also 9.
public IActionResult TestPlanRunDetail(int TestRunId)
{
logger.LogInformation("TestPlanRunDetail function called.");
logger.LogInformation("TestRunId: " + TestRunId);
// Omitted for brevity
return View(detail);
}
The parameter name in asp-route-xxx must be same as the parameter name in the backend (int xxx)
So, change one of your param names to match the other
asp-route-{value} is an Anchor Tag Helper.
The Anchor Tag Helper enhances the standard HTML anchor (<a ... ></a>) tag by adding new attributes. By convention, the attribute names are prefixed with asp-. The rendered anchor element's href attribute value is determined by the values of the asp- attributes.
The Reason:
Any value occupying the {value} placeholder is interpreted as a potential route parameter
Therefore, if you use asp-controller="controller" asp-action="action" asp-route-id="#Model.ResultViewModels[i].TestRunId".
The generated HTML href will be href="/controller/action?id=0">Content</a>
where 0 is the actual #Model.ResultViewModels[i].TestRunId.
Notice that the parameter name in href is id instead of TestRunId?
Your TestPlanRunDetail(int TestRunId) take TestRunId, but not id, and that is why you get TestRunId=0.
The Easier Solution:
Change asp-route-id to asp-route-TestRunId (or asp-route-testrunid as it is not case sensitive).
Alternate Solution:
Define a default route template in Startup.Configure:
app.UseMvc(routes =>
{
routes.MapRoute(
name: "default",
template: "{action=Index}/{id?}");
});
In the model:
<a asp-action="TestDetail"
asp-route-id="#Model.ResultViewModels[i].TestRunId">
Content
</a>
Then, the generated href will be href="/TestDetail/12".
Related
Within the author it displays a breadcrumb, and I know you can modify its display to either some other static text or localisation, but I'm wondering if it's possible to dynamically show an attribute, or execute some other context-specific xpath dynamically.
As a test I can change the breadcrumb using the localisation editor variable ${i18n()}.
cc_config.xml
<elementRenderings platform="webapp">
<render element="num" as="${i18n(test)}" annotation="${i18n(test)}"/>
translation-cc.xml
<key value="test">
<comment></comment>
<val lang="en_US">Year</val>
"Year" is actually a num element.
However, trying any other variable, even 'more static' ones like ${cf} or ${tp} simply render the variable text literally, instead of evaluating it.
cc_config.xml
<elementRenderings platform="webapp">
<render element="paragraph" as="${xpath_eval(./#eId)}" annotation="${xpath_eval(./#eId)}"/>
<render element="p" as="${tp}" annotation="${tp}"/>
(paragraphs do have an eId attribute)
As you can see, I tried using annotation; but these tooltips also simply display the variable literally.
I also fiddled and tried a bunch of xpath stuff, like #eId/.#eId//#eId, but I think there's some restriction in using the Content Completion Configuration File with respect to editor variables.
So is the thinking right but I am doing something wrong, or is it not the right way but there is some other way to affect the breadcrumb? Maybe with the schema?
The element display names in cc_config.xml file do not support most of the editor variables. Most of them, like ${cf} (current file) and ${tp} (total number of pages) don't make sense to be used when rendering the name of an element.
The xpath_eval would make sense - the display name of an element may depend on its attributes (e.g. the #id attribute), it's index in the document (e.g. 'Section 3'), etc. We have a feature request registered for this case and I added your vote to it.
As a partial workaround you can use a JS API to compute the display name of the element based on the element original name and its attributes:
goog.events.listen(workspace, sync.api.Workspace.EventType.BEFORE_EDITOR_LOADED, function(e) {
e.options.elementNameEnhancer = function(elemName, attrs) {
var displayString = elemName;
var attr = attrs['id'];
if (attr) {
displayString += ' (#' + attr.attributeValue + ')';
}
return displayString;
};
});
I need to set a variable or array in meteor JS which whenever changes. Wherever it is used on the page changes.
So far I have tried to set values in session.
let in = Session.get("in");
and this in HTML. The following works fine. This changes whenever it detects a change in array
{{#each in}}
<span class="selectable-tags"> {{this}} </span>
{{/each}}
But whenever I try to add these tags to other div using following. Then the ones added to other div does not change.
"click .selectable-tags"(e, t) {
// sets the tags inside the Method box on click
var el = e.target.cloneNode(true);
el.setAttribute('contenteditable', false);
document.querySelector('[contenteditable]').appendChild(el); },
using meteor with blaze UI. This can be used as reference link
Edit: Session.get or set is given for reference . This was to tell that these values are changing as they on any event triggered wherever set.
You need to add a helper that returns the session variable and show the helper in your html code :
Template.yourtemplate.helpers({
inHelper: ()=> {
return Session.get('in');
}
)}
And in html :
<div>{{inHelper}}</div>
Every modification on in by Session.set('in', newValue) will change your HTML.
I'm trying to create a dynamic slider that can be reused with different images.
<div id="sly_container" class="sly">
<ul>
{{#each propertyImages}}
<li><img src="{{ImageURL}}"></li>
{{/each}}
</ul>
<button id="gallery_btn-prev"><img class="gallery_arrow"/>prev</button>
<span id="middleSpan"></span>
<button id="gallery_btn-next"><img class="gallery_arrow"/>next</button>
</div>
I populate propertyImages with an httpRequest (I make several of these):
(function(o){
HTTP.call( 'GET', 'https://api.rentcafe.com/rentcafeapi.aspx?requestType=images&type=propertyImages&companyCode=c00000084939&propertyCode='+v+'', {},
function( error, response ) {
if ( error ) {
console.log( error );
} else {
var content = JSON.parse(response["content"]);
obj[p] = content;
if( o == l){
CommunityImages.insert(obj)
Session.set('imagesLoaded',true);
}
}
console.log(v+ ' ' + p + ' ' + o + ' images delivered')
})
}(o++))
and then use this helper:
Template.sly.helpers({
propertyImages: function(){
if(Session.get('property') && CommunityImages.find().fetch()[0]){
return CommunityImages.find().fetch()[0][Session.get('property')]
}
})
After it renders I run some more logic on it to create the slider from the images. It works well when there is one slider per view, since it is dependent on the Session.set('property', 'whatever') but I want to have many on the same page each populated with different images. I can add keys and values to the image objects, so I suppose maybe I can do this with a Spacebars conditional? In the end I'd like to have something like this
<div id="summit-sly">{{> sly}}</div>
<div id="hillcroft-sly">{{> sly}}</div>
<div id="merrit_station-sly">{{> sly}}</div>
with each slider containing it's respective images, OR I'm now seeing that maybe partials could work somehow:
{{>sly summit}}
{{>sly hillcroft}}
{{>sly merrit_station}}
Each slider will basically need it's own class name, so that the logic that runs on render will target each one specifically and not all of them.
Indeed, you can use partials in Blaze spacebars with either:
A single argument that acts as the data context of the called template (as exemplified in Meteor Guide > View > User Interfaces > UI components > Smart components).
Named arguments (as shown in Meteor Guide > View > Blaze > Spacebars > Template inclusion), which are actually assembled into a data object (see below).
{{> subComponent arg1="value-of-arg1" arg2=helperThatReturnsValueOfArg2}}
Another tutorial: http://meteorcapture.com/spacebars/#template-inclusion-ex-2
Reference: Meteor API Docs > Packages > spacebars > Inclusion and Block Arguments
Inclusion tags ({{> foo}}) and block tags ({{#foo}}) take a single data argument, or no argument. Any other form of arguments will be interpreted as an object specification or a nested helper:
Object specification: If there are only keyword arguments, as in {{#with x=1 y=2}} or {{> prettyBox color=red}}, the keyword arguments will be assembled into a data object with properties named after the keywords.
Nested Helper: If there is a positional argument followed by other (positional or keyword arguments), the first argument is called on the others using the normal helper argument calling convention.
Then you retrieve the data context through the templateInstance.data property:
In an onCreated, onRendered or onDestroyed callback, the template instance is directly available in this.
In a helper or in the HTML part of the template, the data context is directly available in this (no need to look for its data child property). In a helper, you can also access the template through Template.instance().
In an event handler, the template instance is passed as the 2nd argument of the listener.
I would like to integrate a date picker in a form. So I created a custom DateTimePickerView like this :
App.DateTimePickerView = Em.View.extend
templateName: 'datetimepicker'
didInsertElement: ->
self = this
onChangeDate = (ev) ->
self.set "value", moment.utc(ev.date).format("dd/MM/yyyy hh:mm")
#$('.datetimepicker').datetimepicker(language: 'fr', format: 'dd/mm/yyyy hh:ii').on "changeDate", onChangeDate
Here is the template :
<script type="text/x-handlebars" data-template-name="datetimepicker" >
<input type="text" class="datetimepicker" readonly>
</script>
In my form I want to bind this component to an attribute of my model (I am using the RestAdapter) :
<script type="text/x-handlebars" id="post/_edit">
<p>{{view Ember.TextField valueBinding='title'}}</p>
<p>{{view App.DateTimePickerView valueBinding='date'}}</p>
</script>
Everything works fine in apparence : the DateTimePicker is well displayed and the value is set inside the input.
But there is a problem in the effective binding : when I send the form, the post param "date" (corresponding to the attribute) is null.
When I look inside the generated html code I can see the following :
<p>
<input id="ember393" class="ember-view ember-text-field" type="text" value="Event 1">
</p>
<div id="ember403" class="ember-view">
<input type="text" class="datetimepicker" readonly="">
</div>
I am not an expert in the global ember structure, but I guess that the id element is important for the binding. In that case, for my component, the ember id is put to the container of my component and not to the input containing the value. So I guess the problem is here.
So what could be the correct way to make it work ?
I just created a working jsfiddle here ; we can see that the modifications in the title field are taken into account but not the modifications in the DateTimePickerView component.
I guess the problem lies in the fact that you where trying to listen on an event fired from the datetimepicker which is not captured, and thus the model value not set.
To make things more solid you should get the datetimepicker current date value in your doneEditing function, just before saving the model back to the store.
Let me show in code what I mean:
window.App.EventController = Ember.ObjectController.extend(
...
doneEditing: ->
// relevant code line
#get("model").set("date_begin", $('.datetimepicker').data('date'))
#set "isEditing", false
#get("store").commit()
...
)
And here your (working) jsfiddle.
Hope it helps
Edit
After reading your comment I've modified the input field inside your datetimepicker template. Please see here an updated jsfiddle that also initializes the input field of the datetimepicker on edit begin when calling edit.
...
edit: ->
#set "isEditing", true
startDate = #get("model").get("date_begin")
#$(".datetimepicker").data({date: startDate}).datetimepicker("update")
...
You are now safe to remove the onDateChange function and do init and save inside your edit and doneEditing respectively, applying format or whatever.
Edit 2
Reading your last comment, this is how you register customEvents for example in your App.DateTimePickerView:
...
customEvents: {
changedate: "changeDate"
}
...
this way Ember will be aware of your custom events. You can register whatever events you want but notice that the keyname is lowercased and the value must have the event name to listen to camelcased. For more infos on custom events see here.
Please see here for another update jsfiddle with the changeDate custom event registered.
I have finally resolved this problem making some controls when using the moment.js library.
Everything was working fine with the binding process of the custom datetimepickerview.
Here is a working jsfiddle : here
The relevant code is here :
window.App.DateTimePickerView = Ember.View.extend(
templateName: 'datetimepicker'
didInsertElement: ->
#this test is important and was the problem
if #.get 'value'
#$('input').val moment.utc(#.get 'value').format('LLL')
onChangeDate = (ev) =>
date = moment.utc(ev.date).format('LLL')
#.set "value", date
#$('.datetimepicker').datetimepicker(format: 'dd/MM/yyyy', pickTime: false).on "changeDate", onChangeDate
)
I am getting started with Meteor, and adapting the todo example to include nested tag groups. I have the following HTML, which outputs each name of each tag group, plus the list of tags in that each group:
<template name="tag_filter">
{{#each tag_types }}
{{ tag_name }}
{{#each values }}
<div data-taggroup="{{ ../tag_name }}">
{{ name }} ({{ count }})
</div>
{{/each}}
{{/each}}
</template>
My question is this: how do I adapt the event handler for clicks on the tags to access the value of the parent group's tag_name? (i.e. the data from the outer each loop).
Currently I have the code below, but this object only gives me access to name and count.
Template.tag_filter.events({
'mousedown .tag': function () {
console.log('tag mousedown', this);
// How do I get the value of tag_name?
}
});
As you can see, I've used Handlebars parent paths to add a data-taggroup attribute containing the name, but I'm not sure how to access that from within the event handler.
I think this question is related, but I don't understand the OP's solution (partly because I'm not using Coffeescript). There's also an closed Meteor issue which is related.
I found the solution to access parent data:
Template.nestedTemplate.events({
'click a.class':function(event,template){
var parentID = template.data._id;
console.log(parentID);
}
});
The .events handler function receives two arguments: event, an object with information about the event, and template, a template instance for the template where the handler is defined. Took me a really long time to figure this one out. Don't use the handlebars solution, it shows your data!
I'm not sure whether you can get parent template data, but in your event handler you can access DOM elements: event.currentTarget will get the clicked element. Then just use jQuery to access attributes. If needed, event.currentTarget.parentNode will get the parent element in the DOM.
Ex: I don't know where you put the tag class, but let's say it's the class of your div where data-taggroup is defined. Then you could get the tag name using:
$(event.currentTarget).attr('data-taggroup')
"click selected":function(e){
// this._id
var doc_id = $(e.currentTarget).parent().parent().attr("uid")
console.log(doc_id)
},
//specify the each id in the div above the nearest #each
//this will work in events but not in helpers`