I am looping an array of objects. each object has name and address for example. On click event, i want to send the clicked name to the function.
Example: on-click="myFunc('[[item.name]]')"
My current code:
static get template() {
...
<template is="dom-repeat" items="[[users]]">
<a name="[[item.name]]" on-click="myFunc">[[item.name]]</a>
</template>
}
myFunc(name) {
console.log('Clicked name is ', name);
}
How to get the clicked name in the function myFunc ??
The easiest way is to use the API:
When you add a declarative event handler inside the dom-repeat
template, the repeater adds a model property to each event sent to the
listener. The model object contains the scope data used to generate
the template instance, so the item data is model.item
Using that information, you can access your item using
myFunc(event) {
const name = event.model.item.name;
console.log('Clicked name is', name);
}
Related
In my custom helper, the options object has the loc property where it returns the start and end position of the parsed code where the helper is called. Is there a way to also get the partial name from the helper?
Handlebars.registerHelper("helper", function(options) {
// get the partial name "part" here
});
Handlebars.registerPartial("part", `
{{helper}}
`);
Handlebars.compile(`
{{> part}}
`)();
Net MVC and I have a table with products I want to buy.
I want to use a Checkbox to confirm the purchase.
But how can I insert the ID in a List<int>?
I have a class Approved with an attribute List<int> approve
I tried:
#Html.CheckBoxFor(m.approve.Add(id))
#Html.CheckBoxFor(m=>m.approve.Add(id))
#Html.CheckBoxFor(ViewBag.l.approve.Add(id)
How can that task be done ?
You can easyly bind a list to a model:
Model Binding To A List
So, you simply need to make a list of a class created for this, which includes the integer id, and a boolean to hold the checkbox state, somethign like this:
public class IdState
{
public int Id {get;set;}
public bool Checked {get;set;}
}
The list must be of this class, i.e. List<IdState>
The key is using a syntax like this:
Html.CheckBoxFor(m => m[i].Product)
Which will produce and input whose name is something like this:
name="[0].Product"
Then, the model binder will bind your list automatically. Of course, your post action must recevied a List<IdState> to function properly.
u can use html to insert id to your checkbox
#model yourModel
//for generate checkbox
<input type="checkbox" #(yourmodel ? " checked=checked " : null) name="YourCheckBoxName" value="#model.ID" >
use formCollection for get value in your controller from your view
I solved this problem that way:
This Javascript function walks through all checkboxes and saves the Id of the checked once to an hidden input.
<script>
function submit() {
var x = new Array();
for (i = 0; i < ids.length; i++){
if ($("#" + ids[i].toString() + ".cb").is(':checked')) {
x.push(ids[i]);
}
}
console.log(x.toString());
$("#str").val(x.toString());
}
</script>
After toggling a checkbox the value of the hidden input is refreshed
<script>
$(document).ready(function () {
$("input.cb").change(function () {
submit();
});
});
</script>
Here I create an array with all possible ids to improve simplicity and performance.
Otherwise I had to walk through all possible ids and check them.
<script>ids.push(#id);</script>
This is my checkbox:
<input type="checkbox" value="#id" id="#id" class="cb" />
Situation is : when i select a value from a html.dropdown then i need corresponding values stored in another table at database with in the same view in any manner (keep dropdown visible).My consideration:: Firstly i need to pass selected value of dropdown to some controller action(using jquery handler). then that controller action must return a partial view which i can display on dropdownlist view with the help of Ajax........need some code
You could use javascript to subscribe to the .change event of the dropdown list and trigger an AJAX request sending the selected value to the server. For example assuming you have the following dropdown (with an unique id so that it can be referenced more easily from your javascript files and an HTML5 data-* attribute pointing to the server controller action that will be invoked when the value changes):
#Html.DropDownListFor(
x => x.SomeProperty,
Model.Items,
new {
data_url = Url.Action("Foo", "SomeController"),
id = "myddl"
}
)
in a separate javascript file you could subscribe to the change event:
$(function() {
// When the DOM is loaded subscribe to the .change event of the dropdown list
// with id="myddl"
$('#myddl').click(function() {
// when the value of the dropdown changes fetch the new value
var selectedValue = $(this).val();
// fetch the url
var url = $(this).data('url');
// send the selected value to the server using a AJAX POST request
$.post(url, { value: selectedValue }, function(result) {
// will be called when the AJAX succeeds. Here you could process
// any eventual results sent by the server. For example the server could
// return some JSON object indicating whether the operation succeeded or not
});
});
});
which would invoke the corresponding action:
[HttpPost]
public ActionResult Foo(string value)
{
// at this stage value will equal the selected dropdown value
// so that you can update your database and do whatever you want with it
...
}
I'm trying to create a single page form to create a 'work item'. One of the properties is a drop down for 'work item type'.
Depending on the work item type, the user may need to provide additional information in a name-value-pair style attributes grid (property sheet).
I would like to dynamically render the property sheet as soon as a work item type is selected or changed. Once the user provides all information, he would click submit to create the 'work item'.
This is what I have so far:
#using (Ajax.BeginForm("AttributeData", new AjaxOptions() { UpdateTargetId="AttributeDataCell" }))
{
<div style="float:left">
#{
Html.RenderPartial("CreateWorkItemPartialView");
}
</div>
<div id="AttributeDataCell" style="float:right">
#Html.Action("AttributeData", new {id = 1})
</div>
}
The AttributeData action in the controller simply renders the partial view:
public ActionResult AttributeData(int id = 0)
{
var attributes = _workItemDataService.ListWorkItemTypeAttributes(id);
return PartialView("EditWorkItemAttributesPartialView", attributes);
}
Now I would like to hook this up to the drop-down-list's selection event so that the partial view re-renders in the above table cell at every selection change. I would like to pass in the selected value as id.
One way is to force the form to submit itself (and thus re-render).
If that is the right approach, how do we go about it? Esp., how do we make only the property sheet to re-render?
If there is a better way to achieve the above, please indicate.
Thanks
You could subscribe to the .change() event of the dropdown and trigger an AJAX request:
$(function() {
$('#Id_Of_Your_Drop_Down').change(function() {
// This event will be triggered when the dropdown list selection changes
// We start by fetching the form element. Note that if you have
// multiple forms on the page it would be better to provide it
// an unique id in the Ajax.BeginForm helper and then use id selector:
var form = $('form');
// finally we send the AJAX request:
$.ajax({
url: form.attr('action'),
type: form.attr('method'),
data: form.serialize(),
success: function(result) {
// The AJAX request succeeded and the result variable
// will contain the partial HTML returned by the action
// we inject it into the div:
$('#AttributeDataCell').html(result);
}
});
});
});
I have a dynamic view created using jQuery template. The UI is basically a grid with last column being a hyper-linked image. On click on that image i want to pass some data to the controller and that data is present in some other column of the same row. Following is the markup of the code
UI :
{{each Results}}
<tr>
<td>${UserName}</td>
{{if IsActive === 'True'}}
<td><a href=<%: Url.Action("Test","User",new {userName=???,mode="DeActivate"}) %>><img></img><a></td>
{{/if}}
</tr>
{{/each}}
Controller :
public ActionResult Test(string userName,string mode)
{
}
Basically I want to associate the ${UserName} value to userName field in Url.Action's parameter list.
Most of the examples I have seen on Url.Action or Html's helper action methods have string data as parameters. I want to know whether it is possible to read data from other controls in the page inside Url.Action parameter list.
Try like this:
<a href=<%: Url.Action("Test", "User", new { mode = "DeActivate" }) %>&userName=${$item.urlEncodeUserName()}>
...
</a>
where you have defined:
$('#someTemplate').tmpl(contacts, {
urlEncodeUserName: function () {
return encodeURIComponent(this.data.UserName);
}
}).appendTo('#someContainer');