I've got a dictionary that has been serialized by WebApi2 so that the key is the object name and the value is the value.
How can I make knockout render that with it's foreach binding?
I tried to use $data[0] for the key and $data[1] for the value, but that didn't work.
<table id="context-data" class="table-striped properties">
<thead>
</thead>
<tbody data-bind="foreach: Properties">
<tr>
<th data-bind="text: $data[0]" style="text-align: right"></th>
<td data-bind="text: $data[1]"></td>
</tr>
</tbody>
</table>
The foreach binding needs an array and you can use the Object.keys method to get an array of a given object's own enumerable properties.
Then you can use the $data to display the property name and array indexer syntax on your Properties object to get its value (Properties[$data]):
<tbody data-bind="foreach: Object.keys(Properties)">
<tr>
<th data-bind="text: $data" style="text-align: right"></th>
<td data-bind="text: $parent.Properties[$data]"></td>
</tr>
</tbody>
Note: you need to use $parent to access the Properties inside the foreach.
Demo JSFiddle.
Related
I have some html code
<tfoot>
<tr>
<th class="first"> </th>
<td class="first-col">14</td>
<td class="">15</td>
<td class="">16</td>
<td class="">17</td>
<td class="">18</td>
<td class="">19</td>
<td class="">20</td>
<td class="last-col">21</td>
</tr>
</tfoot>
and i need to select text from first <td> (14). I use
HtmlAgilityPack and code like that:
_footer = _htmlDocument.DocumentNode.SelectSingleNode("//tfoot/tr/th[#class='first']/td[1]");
return _footer.First().InnerText;
It return me nothing. What I'm doing wrong?
td is not child element of th. They are at same level. You should select td as direct child of tr. And you can specify it's class first-col instead of using index:
//tfoot/tr/td[#class='first-col']
Also don't use First() thus you are selecting single node:
return _footer.InnerText;
NOTE: As Jon pointed, you can still use your code to select cell by index instead of using it's class:
//tfoot/tr/td[0]
I have an Index action method as follows.I am passing a list of Providers to the View.
public ActionResult Index()
{
Provider providerList = new Provider();
List<Provider> providers = DAL.GetListofProviders.ToList();
return View(providers);
}
In the View,I have the following code to receive the List of Providers.
#model IEnumerable<DEMO_JAN14.Models.Provider>
#{
Layout = "~/Views/Shared/_Layout.cshtml";
}
<head>
<title>LIST OF PROVIDERS</title>
</head>
<body>
<table class="table table-striped table-bordered table-hover">
<tr>
<th>Provider Type</th>
<th>First Name</th>
<th>Last Name</th>
<th>Certification</th>
<th>Specialization</th>
<th>SSN</th>
<th>Facility Name</th>
<th>Contact No</th>
<th>Contact Email</th>
<th></th>
</tr>
<tbody data-bind="foreach: viewmodel">
<tr>
<td class="col-lg-2" data-bind="text: ProviderType"></td>
<td class="col-lg-1" data-bind="text: FirstName"></td>
<td class="col-lg-1" data-bind="text: LastName"></td>
<td class="col-lg-1" data-bind="text: Certification"></>
<td class="col-lg-1" data-bind="text: Specialization"></td>
<td class="col-lg-1" data-bind="text: SSN"></td>
<td class="col-lg-4" data-bind="text: FacilityName"></td>
<td class="col-lg-4" data-bind="text: ContactNumber"></td>
<td class="col-lg-1" data-bind="text: ContactEmail"></td>
<td><a class="btn btn-danger" id="del" onclick = "return confirm('Are you sure, you want to delete');" data-bind="attr: { href: '/Provider/Delete/' + ProviderID }"> Delete </a>
</td>
</tr>
</tbody>
I see the list of Providers in the controller
But I dont see the same list in the view as shown
Am I doing something wrong.Please guide me in the right directions.Thanks.
You can iterate like this (using your code)
#model IEnumerable<DEMO_JAN14.Models.Provider>
#{
Layout = "~/Views/Shared/_Layout.cshtml";
}
<head>
<title>LIST OF PROVIDERS</title>
</head>
<body>
<table class="table table-striped table-bordered table-hover">
<tr>
<th>#Html.DisplayNameFor(m => m.ProviderType)</th>
<th>#Html.DisplayNameFor(m => m.FirstName)</th>
...
</tr>
#foreach (var item in Model)
<tr>
<td class="col-lg-2">#Html.DisplayFor(modelItem => item.ProviderType)</td>
<td class="col-lg-1">#Html.DisplayFor(modelItem => item.FirstName)</td>
...
</tr>
</table>
</body>
To check the count of the providers list inside the view use the following property #Model
In your view you can iterate like this on the items, and for example am displaying FirstName of each Provider in the List:
#foreach(var item in Model)
{
<h1>#item.FirstName </h1>
}
Using your html:
<tbody data-bind="foreach: viewmodel">
#foreach(var item in Model)
{
<tr>
<td class="col-lg-2">#item.ProviderType</td>
<td class="col-lg-1">#item.FirstName</td>
........................................
........................................
// and so on other properties
<td><a class="btn btn-danger" id="del" onclick = "return confirm('Are you sure, you want to delete');" href="#Url.Action("Delete","Provider")+ item.ProviderID }"> Delete </a>
</td>
</tr>
you can't access the razor Model object via knockout
you need to receive your data as json result
please refer to this article
http://www.codeproject.com/Articles/424642/Customer-KnockoutJS-and-MVC-demo-using-JSON
I have the following HTML:
<tbody>
<tr>
<td class="metadata_name">Headquarters</td>
<td class="metadata_content">Princeton New Jersey, United States</td>
</tr>
<tr>
<td class="metadata_name">Industry</td>
<td class="metadata_content"><ul><li>Engineering Software</li><li>Software Development & Design</li><li>Software</li><li>Custom Software & Technical Consulting</li></ul></td>
</tr>
<tr>
<td class="metadata_name">Revenue</td>
<td class="metadata_content">$17.5 Million</td>
</tr>
<tr>
<td class="metadata_name">Employees</td>
<td class="metadata_content">201 to 500</td>
</tr>
<tr>
<td class="metadata_name">Links</td>
<td class="metadata_content"><ul><li>Company website</li></ul></td>
</tr>
</tbody>
I want to be able to load the metadata_content value (ex "$17.5 Million") in to a var where the metadata_name is = to a value (ex: "Revenue").
I have tried to use combinations of code like this for a few hours...
orgHtml.DocumentNode.SelectNodes("//td[#class='metadata_name']")[0].InnerHtml;
But I'm not getting the right combination down. If you have a helpful SelectNodes syntax - that will get me the solution I would appreciate it.
It seems what you're looking for is this:
var found = orgHtml.DocumentNode.SelectSingleNode(
"//tr[td[#class = 'metadata_name'] = 'Revenue']/td[#class = 'metadata_content']");
if (found != null)
{
string html = found.InnerHtml;
// use html
}
Note that to get the text of an element, you should use found.InnerText, not found.InnerHtml, unless you specifically need its HTML content.
I have one following table html, the data of rows in the table is looped by foreach.
Can I use Razor to get the value of each row into a List or an array in C#?
My C# code Razor (I tried this so far)
#{
var l = new List<string>();
l.Add(#<input id="updated_value2" data-bind="value:value,visible:isEditing()" />);
}
Here's my table
<table class="table table-hover">
<tbody data-bind="foreach: $root.mapJsons(parameters())">
<tr class="data-hover">
<td>
<strong>
<span data-bind="text:key" />
</strong>
</td>
<td>
#*display label and input for dictionary<value> false DIS true APP*#
<input id="updated_value" data-bind="value:value,visible:isEditing()" />
<label id="display_value" data-bind="text:value,visible:!isEditing()" />
</td>
</tr>
</tbody>
<thead>
<tr>
<th style="width: 30%">
Name
</th>
<th style="width: 30%">
Value
</th>
<th></th>
</tr>
</thead>
</table>
Your foreach loop is being executed client-side (looks like a KnockoutJS binding?) rather than server-side, so any Razor code you embed in the table is only going to be called once as it's rendered by the server. So the answer is no, you cannot populate a server-side list with this particular foreach loop.
I'm working with in my first knockout experience and have been learning quite a bit. What I'm attempting to do is populate a new object and push it into the viewModel for display.
The select box ( drop down box) is populating but when I click on add, the object name is blank. Then it occurred to me, I have two fields I need to collect from to assemble the object so I'm not sure I'm going about this the right way....
My data model:
function Colors(data) {
this.ID = ko.observable(data.ID);
this.ColorName = ko.observable(data.ColorName);
this.Duration = ko.observable(data.Duration);
}
View:
<table id="NewColor">
<tbody>
<tr>
<td>
<select id="SelectColor" data-bind="options: AllColors, optionsText: 'ColorName', value: AllColorss.ID, optionsCaption: 'Select Color...'"></select>
<input id="Duration" data-bind="value: Duration" />
<button data-bind='click: addColor'>Add Color</button>
</td>
</tr>
</tbody>
The input ID="duration" isn't working / populating right but I'm working on getting the model data to update.... (This is a side issue I'll look at later so of there's syntax issues there, that's why)
The script to add from the button click:
self.addColor = function() { self.AddColors.push(new Color(NewColor )) };
When that runs, the ColorName is blank in the following table but a blank entry is added.
Display / update table:
<table>
<thead>
<tr>
<th padding: 10px; >Color</th>
<th padding: 10px; >Duration</th>
</tr>
</thead>
<tbody data-bind="foreach: AddColors">
<tr>
<td data-bind="text: ColorName"></td>
<td data-bind="text: Duration"></td>
<td>
<a href='#' data-bind='click: $parent.removeLine'>Remove</a>
</td>
</tr>
</tbody>
Is what I'm doing the way to add an object into the array for the newly created object? I don't see a SelectedColor.SelectedText or anything similar. How do I access the text property of the select drop down list?
I'm not sure if what I was doing before would work but I backed off what I had and added in the select box after the line was added which was the same thing the tutorial was doing. That worked. I can't thank you enough, Robert.