I've got a json list of objects I've populated into an observablearray([]). I know the data is there because of if I do this:
<table id="tblColors">
<thead>
<tr>
<th padding: 10px; >Color</th>
</tr>
</thead>
<tbody data-bind="foreach: AllColors">
<tr>
<td data-bind="text: ColorName"></td>
</tr>
</tbody>
The view shows all the colors.
However, when I do this:
<select data-bind="options: AllColors, optionsText: AllColors.ColorName,
value: AllColors.ID, optionsCaption: 'Select Color...'"></select>
I get the default "select color..." in the drop down box but each of the colors have [object Object]
I've tried optionsText: ColorName but the program stops and says JavaScript runtime error: 'ColorName' is undefined.
Try it like this
<select data-bind="options: AllColors, optionsText: 'ColorName', value: selectedColor, optionsCaption: 'Choose...'></select
Where the single quotes (') are the secret sauce.
Related
I want to choose a specific selection in this table, my table & specific selection being:
<table border="0" align="CENTER">
<tbody>
<tr>
<tr>
<td class="FieldLabel" valign="top" nowrap="" colspan="1">
<td valign="top" nowrap="" colspan="3">
<select class="HandleSelectChange" name="DISPLAY_RequestingProvider" style="width:100%;" size="1">
<option selected="" value="">Choose One</option>
<option value="1134303902NMDX0NMDX0 NMDX0Company Name">Company Name - 1234567890</option>
</select>
</td>
</tr>
</tr>
</tbody>
</table>
There are about 25 selections in this table, which is why I only included one of them.
Currently, my code can not find the element. My current code is as follows:
driver.FindElement(By.XPath("//tr[td[contains(text(),'Company Name')]]/td[2]")).Click();
Locate the select element and use SelectElement object to select an option by text:
IWebElement element = driver.FindElement(By.XPath("//tr[.//option = 'Company Name')]]//select[#name = 'DISPLAY_RequestingProvider']")).Click()
SelectElement selector = new SelectElement(element);
selector.SelectByText("Company Name");
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 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'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.
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.