We Keep Coding

asp-for binding and route-value issues inside loop

I am building a little website where users can manage personal gear, which has a name and mass among other properties. I want to display all of this gear in a table, using input boxes bound to each item so the user can change values if desired, then hit an edit button and update the gear database. I can get my foreach loop to bind all of the right values, but when it routes to the handler, it always sets the EditGearName and EditGearMass value to whatever value is in the first row.
<table>
#foreach (var g in Model.Gears) {
<tr class="list-table-main">
<td><input class="form-control" asp-for="EditGearName" value="#g.GearName" /></td>
<td><input class="form-control" asp-for="EditGearMass" value="#g.Mass" type="number" min="0" /></td>
<td style="width:12.5%"><button type="submit" asp-page-handler="EditGear" asp-route-groupid="#gg.ID">Save</button></td>
</tr>
}
</table>
Here is an example of my handler method called on the button press. The GearBL.EditGear method is code behind that handles saving it to database. I know this works (so long as the right values are passed in)
public IActionResult OnPostEditGroup(int groupid)
{
try
{
base.OnGetParent();
if (string.IsNullOrEmpty(EditGearName))
throw new ValidationException("Gear name must not be empty");
if (EditGearMass < 0)
throw new ValidationException("Gear mass cannot be less than 0");
GearBL.EditGear(groupid, User, EditGearName, EditGearMass, false);
Response.Redirect("GearList");
}
catch (Core.Domain.ValidationException ve)
{
ModelState.AddModelError("Error", ve.Message);
}
return Page();
}
I am new to asp.net/razor so any help would be appreciated. I'm not sure I even have the best way to implement something like either.

it always sets the EditGearName and EditGearMass value to whatever value is in the first row.
You should add the form tag in the foreach loop to enable one submit for one row.
<table>
<form>
#foreach (var g in Model.Gears) {
<tr class="list-table-main">
<td><input class="form-control" asp-for="EditGearName" value="#g.GearName" /></td>
<td><input class="form-control" asp-for="EditGearMass" value="#g.Mass" type="number" min="0" /></td>
<td style="width:12.5%"><button type="submit" asp-page-handler="EditGear" asp-route-groupid="#gg.ID">Save</button></td>
</tr>
}
</form>
</table>

Check html field hidden or not using C# backend code

I have the following code in which I am showing and hiding html controls based on Dropdown list selected value. Show and Hide is working fine but I want to Check in backend i.e C# that the which <tr> is visible and which one is hidden.
Here is my aspx page code
<script type="text/javascript">
$(document).ready(function () {
$("#AttachemntType").change(function () {
if ($(this).val() == "F") {
$("#tr_CompileFile").show();
$("#tr_SourceFile").show();
}
else if ($(this).val() == "R") {
$("#tr_CompileFile").hide();
$("#tr_SourceFile").show();
}
else {
$("#tr_SourceFile").hide();
$("#tr_CompileFile").hide();
}
});
});
</script>
<tr bgcolor="white">
<td style="height: 20px">
Attachment Type
</td>
<td>
<select id="AttachemntType" name="AttachemntType" style="width: 344px">
<option value="0">Select</option>
<option value="F">Form</option>
<option value="R">Report</option>
</select>
</td>
</tr>
<tr bgcolor="white" id="tr_SourceFile" style="display:none;" runat="server">
<td style="height: 20px">
Source File
</td>
<td>
<input class="body_text" type="file" id="src_File" name="src_File" runat="server"
style="width: 420px" />
</td>
</tr>
<tr bgcolor="white" id="tr_CompileFile" style="display:none;" runat="server">
<td style="height: 20px">
Compiled File
</td>
<td style="height: 16px; width: 625px;">
<input class="body_text" type="file" id="comp_File" runat="server" style="width: 420px" />
</td>
</tr>
This is the code which I am trying in Backend but its returning always true for all fields
if (tr_CompileFile.Visible == true && tr_SourceFile.Visible == true)
{
//This Condition is always true
}
else if (tr_SourceFile.Visible == true && tr_CompileFile.Visible == false)
{
//something
}
else
{
//something else
}

You cannot actually check this in backend. .show() and .hide() are jQuery methods which only operates on client side.
One workaround could be to use a MVVM pattern with knockout.js (Don’t try angular for that, you’ll be lost in docs)
Another option is to actually put your select box and the hidden/visible parts into UpdatePanel. So when you change the selector, the server side is called and you can assign / remove “visible” field.
More : https://msdn.microsoft.com/en-us/library/bb399001.aspx
In last resort, you can put a hidden field, which will be populated on submit with “hidden,shown,etc” values for you inputs.
Personally, I’ll vote for the first, but second is the easiest one to implement

Yes, Jurion was right. just adding more explanation: you can try
tr_CompileFile.Style["HTML Style key here"]
for example you can try
tr_CompileFile.Style["display"]
but it will return to you the value of the particular style defined in your aspx files, not the actual style displayed and changed in client side.
If you defined
<asp:Button ID="btnTest" runat="server" style="display:none" />
when you check it,
btnTest.Style["display"]
will return "none"

Mixing javascript and C#

I have #model IEnumerable<HotelWithRating> - some hotels.
At the view I have 5 checkboxes - stars of the hotel.
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td><input type = 'checkbox' value="false" id= '1' onclick = ' ShowHotels();'/></td>
<td><input type = 'checkbox' value="false" id= '2' onclick = ' ShowHotels();'/></td>
<td><input type = 'checkbox' value="false" id= '3' onclick = ' ShowHotels();'/></td>
<td><input type = 'checkbox' value="false" id= '4' onclick = ' ShowHotels();'/></td>
<td><input type = 'checkbox' value="false" id= '5' onclick = ' ShowHotels();'/></td>
</tr>
</table>
I need that hotels to be displayed which has for example 5 or 4 stars (if forth and fifth checkboxes are checked).
It should be something like this
<table class="Grid">
<tr>
<th>Name</th>
<th>Stars</th>
<th>Rating</th>
<th>Description</th>
</tr>
<script type="text/javascript">
function ShowHotels()
{
#foreach (var item in Model)
{
<text>
if (document.getElementById(item.Hotel.stars).checked == true)
{
<tr>
<td>#item.Hotel.Name</td>
<td>#item.Hotel.Stars</td>
<td>#item.Rating</td>
<td>#item.Hotel.Description</td>
</tr>
}
</text>
}
}
</script>
</table>
I have found many topics about mixing javascript with code but still haven't an decision.

Better first you filter the model based on the check box selection. It can be done on client side by comparing the property of each hotel in model. Otherwise you can do server side filtering too, using AJAX (sending the info of selected check box and then server will send you filtered model). Server side filtering is better is you have huge list of hotels to be look into.
Then assign this filtered model to the Grid or generate the table using for loop for every element in filtered model using JavaScript.
Feel free to ask any further question if you get. Thanks.

How to Get All HtmlInputText Controls Within a Table Row?

I'm trying to create a web page to create small playlists. Once data has been entered into the fields, it needs to be saved to an XML file. Currently the table looks like this:
<%-- song list table --%>
<table runat="server" id="table" class="table">
<%-- info row --%>
<thead>
<tr>
<td>Song Title</td>
<td>Song Artist</td>
<td>Song Album</td>
<td><%-- column for delete button --%></td>
</tr>
</thead>
<%-- input rows --%>
<tbody>
<tr>
<td><input runat="server" placeholder="Title" type="text" /></td>
<td><input runat="server" placeholder="Artist" type="text" /></td>
<td><input runat="server" placeholder="Album" type="text" /></td>
<td>
<a href="#">
<img src="Images/Delete.png" onmouseover="this.src='Images/Delete-Hover.png'" onmouseout="this.src='Images/Delete.png'" alt="Delete" />
</a>
</td>
</tr>
</tbody>
</table>
New rows will be added dynamically with jQuery. When the user clicks save, I need to write the table data into their specific XML file. Currently my backend code looks like this:
//for each row
foreach (HtmlTableRow row in table.Rows)
{
//create row info
textWriter.WriteStartElement("Row");
//for each cell
foreach (HtmlTableCell element in row.Cells)
{
//get inputs
//write current input to xml
}
//close row
textWriter.WriteEndElement();
}
My question is where I go from there with my code to be able to get the values of each input and write them to the XML.

You need to give the element's an ID so you can refer to them by. Also, any dynamically added rows will not be able to be accessed this way; that is because they do not exist in the control tree as a server control, but are a pure client control. You would have to access these using Request.Form collection. You'd have to add them dynamically to the control tree if you want them to persist across postbacks too.
If you are using JQuery, it would be more efficient and easier to grab all the values on the client and send the values to a web service or something like that.

My suggestion would be to re-think how you're gathering the data. I assume that you're going to have this information do an HTTP POST to your server using $.ajax() or something similar - and on the server-side, you're wanting to get all of the instances of the Title, Artist and Album fields, grouped by row.
Instead of posting back the table, which is a set of UI elements that display your data, but do not represent it, consider posting back to the server and having the server expect an IEnumerable of Song objects, which would look something like this:
public class Song {
public String Album { get; set; }
public String Artist { get; set; }
public String Title { get; set; }
}
Now, when you bind the form itself, you can bind something like:
<table>
<thead>
<tr>
<td>Song Title</td>
<td>Song Artist</td>
<td>Song Album</td>
<td><%-- column for delete button --%></td>
</tr>
</thead>
<tbody>
<tr>
<td><input placeholder="Title" type="text" name="Songs[0].Title" /></td>
<td><input placeholder="Title" type="text" name="Songs[0].Artist" /></td>
<td><input placeholder="Title" type="text" name="Songs[0].Album" /></td>
</tr>
</tbody>
</table>
The [0] notation indicates that this element is part of an IEnumerable called Songs, and is at index 0. When your jQuery script then goes and adds new rows, you simply increment the indexes. So - a new row would be something like:
<tr>
<td><input placeholder="Title" type="text" name="Songs[1].Title" /></td>
<td><input placeholder="Title" type="text" name="Songs[1].Artist" /></td>
<td><input placeholder="Title" type="text" name="Songs[1].Album" /></td>
</tr>
The only trick to this is to ensure that you never have gaps in your indexes. I.E. - if you have 5 rows, and you delete the third, you need to re-index rows 4 and 5 (by decrementing the [#] values).
Note: All of the above assumes you are using server-side binding.
If you are already using jQuery, you might also find it simpler to simply parse your table's input elements with jQuery and post things as an object that you have direct control over. This prevents you from having to do any indexing at all. An example would be something like:
$('#submit-button').on('click', function (ev) {
var songs = [];
$('#table > tbody > tr').each(function (index, element) {
var $tr = $(element);
var album = $tr.find('input[placeholder=Album]').val();
var artist = $tr.find('input[placeholder=Artist]').val();
var title = $tr.find('input[placeholder=title]').val();
songs.push({ Album: album, Artist: artist, Title: title });
});
$.ajax({
url: '/my/post/url',
type: 'POST',
data: songs
});
});
On the server-side, you will now receive an HTTP POST to /my/post/url which has a payload containing the song data in the table - without having to worry about funky data-binding syntax or indexing.
Hope this helps.

How to save a single record with knockout

I have a basic table set up using knockout, but I was wondering if there is any way to edit/save a single record, rather than having to save the entire view model every time a change is made? Here's my code...
<tbody data-bind="foreach: movies">
<tr>
<td data-bind="text: title"></td>
<td data-bind="text: releaseDate"></td>
<td data-bind="text: genre"></td>
<td data-bind="text: price"></td>
<td><input type="button" value="Edit" id="edit"/></td>
</tr>
<tr class="editable"> <!-- hide this initially, only show when edit button is clicked -->
<td><input id="titleInput" data-bind="value: title" /></td>
<td><input id="releaseDateInput" data-bind="value: releaseDate" /></td>
<td><input id="genreInput" data-bind="value: genre" /></td>
<td><input id="priceInput" data-bind="value: price" /></td>
</tr>
<!-- save button/form or something here containing ONLY this record -->
</tbody>
</table>
<script type="text/javascript">
function Film(data) {
this.title = ko.observable(data.Title);
this.releaseDate = ko.observable(data.ReleaseDate);
this.genre = ko.observable(data.Genre);
this.price = ko.observable(data.Price);
}
function MovieListViewModel() {
var self = this;
self.movies = ko.observableArray([]);
self.title = ko.observable();
self.releaseDate = ko.observable();
self.genre = ko.observable();
self.price = ko.observable();
$.getJSON("/Movies/GetAllMovies", function (allMovies) {
var mappedMovies = $.map(allMovies, function (movie) { return new Film(movie) });
self.movies(mappedMovies);
});
}
ko.applyBindings(new MovieListViewModel());
Any thoughts? Thanks!

Actually, through the magic of binding contexts, this is quite easy!
Step one. Place the following element anywhere inside your foreach template.
<button data-bind="click: $root.saveMovie">Save</button>
Step two. Add the saveMovie method to your viewModel
self.saveMovie = function(movie) {
$.ajax({
type: "POST",
url: "/someurl",
dataType: "json",
contentType: "application/json",
data: ko.toJSON(movie),
success: function(result) {
//...
}
});
}
The movie variable will contain the item of your foreach loop! Why? Because in Knockout, we have the amazing feature called binding contexts:
A binding context is an object that holds data that you can reference
from your bindings. While applying bindings, Knockout automatically
creates and manages a hierarchy of binding contexts. The root level of
the hierarchy refers to the viewModel parameter you supplied to
ko.applyBindings(viewModel). Then, each time you use a control flow
binding such as with or foreach, that creates a child binding context
that refers to the nested view model data.
http://knockoutjs.com/documentation/binding-context.html