We Keep Coding

How to display data from model in td based off select list item in another td

I have a separate TR and inside, a TD from the rest of my table. I have some data in my model that contains a list of strings, and also a list of IDs (not sure if I need the list of IDS for this) and I would like to display on the lower Tr's td a specific part of the list, based off of the selection of a SelectListItem in the table row's td above it.. i.e. If a user select's a list item of X, I want the TD below to display "X's help description" (which like I mentioned earlier, is being stored inside a list of strings in my model)
I am not sure if I should be doing this in Razor, Javascript, or something else. Can anyone give me some tips? Below is some code.
View:
<div class="row">
<div class="col-md-12" style="overflow-y:scroll">
<table class="table table-striped table-hover table-bordered">
<thead>
<tr>
<th>Terminal</th>
<th>Command</th>
<th>Command Value</th>
<th> </th>
</tr>
</thead>
<tbody>
<tr>
<td>#Html.DropDownListFor(o => o.TerminalsDDL, Model.TerminalsDDL, new { id = "ddlTerminalID", #class = "form-control" })</td>
<td>#Html.DropDownListFor(o => o.TerminalCommandLookupsDDL, Model.TerminalCommandLookupsDDL, new {id = "ddlCommandValue", #class = "form-control" })</td>
<td>#Html.TextBoxFor(o => o.UserEnteredTerminalCommands, new { Class = "form-control", Id = "cmdValueValue"})</td>
<td> <input id="btnSaveTerminalCommand" type="button" value="Insert" class="btn btn-primary" /> </td>
</tr>
<tr>
<td colspan="4" id="helpDescript">#Html.DisplayFor(model => model.HelpDescription)</td>
</tr>
</tbody>
</table>
</div>
</div>
VM:
public TerminalCommandVM()
{
//Terminals Drop Down List
TerminalsDDL = new List<SelectListItem>();
//Terminal Commands Drop Down List
TerminalCommandLookupsDDL = new List<SelectListItem>();
//Terminal Command Values list
TerminalCommandValues = new List<SelectListItem>();
}
public TerminalCommand TerminalCommand { get; set; }
public List<TerminalCommand> TerminalCommands { get; set; }
[Display(Name = "Terminal ID")]
public List<SelectListItem> TerminalsDDL { get; set; }
[Display(Name = "Command")]
public List<SelectListItem> TerminalCommandLookupsDDL { get; set; }
public List<SelectListItem> TerminalCommandValues { get; set; }
public string UserEnteredTerminalCommands { get; set; }
public List<string> HelpDescription { get; set; }
public List<int> HelpDescriptionID { get; set; }
}
The DisplayFor I want populated is the one with the ID = "helpDescript", and the select list item that should dictate which help descript is displayed has the ID = "ddlCommandValue".
As of now, helpDescript is displaying the entire list (obviously).
If anyone needs any other code or more information, please let me know.

Try the following. In the dropdown change event call the action to display the value and in the success function display the value in label
$("#ddlCommandValue").change(function () {
var obj = {
valueToPass: $(this).val()
};
$.ajax({
url: '/Home/GetValueToDisplayInlabel',
contentType: 'application/json; charset=utf-8',
type: 'POST',
data: JSON.stringify(obj),
cache: false,
success: function (result) {
$("#helpDescript").html(result);
},
error: function () {
alert("Error");
}
});

Get values from an Html table and map to a C# List using jQuery

I have an MVC project where I'm rendering the data using a table in my partial view as:
<table id="tblUserSettings" class="table table-bordered CmtTable">
<thead>
<tr>
<th>User Name</th>
<th>Country</th>
<th>System (s)</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
#if (Model == null)
{
<tr></tr>
}
else
{
foreach (var item in Model)
{
<tr>
<td><input type="hidden" id="usrId" value="#item.UserId" />
#item.UserName</td>
<td> <input type="hidden" id="usrCountryKey" value="#item.UserCountryKey" style="display:none"/>
#item.UserCountryName</td>
<td> <input type="hidden" id="usrSourceSystemKey" value="#item.UserSourceSystemKey" />
#item.UserSourceSystemDescription</td>
<td><a onclick='DeleteUserSettingsRow();'><i class='fa fa-times'></i> Delete</a><a onclick='EditUserSettingsPopup();'><i class='fa fa-pencil'></i> Edit</a></td>
</tr>
}
}
</tbody>
</table>
I'm going to save the values from this table into the database and need to call the AddUserSettingsaction method in controller as:
[HttpPost, Route("AddUserSettings")]
public ActionResult AddUserSettings(IEnumerable<UserSettings> request)
{
AddUserSettingsRequest apiRequest = null;
return View();
}
The model of UserSettings is as follows:
public class UserSettings
{
public UserSettings();
public string UserId { get; set; }
public string UserName { get; set; }
public string UserCountryKey { get; set; }
public string UserCountryName { get; set; }
public string UserSourceSystemKey { get; set; }
public string UserSourceSystemDescription { get; set; }
}
I need to save the data from the table (including the hidden fields) into the database using jQuery, so I have created a function and calling it as:
<button type="button" id="btnAdd" onclick="SaveUserSettings();"><i class="fa fa-save"></i> Save</button>
function SaveUserSettings()
{
debugger;
var userSettings = [];
$("table#tblUserSettings tr").each(function (i, v) {
userSettings[i] = [];
$(this).children('td').each(function (ii, vv)
{
userSettings[i][ii] = $(this).text();
});
})
alert(userSettings);
$.ajax({
url: '#Url.Action("AddUserSettings", "Admin")',
type: "POST",
contentType: "application/json;",
data: JSON.stringify(userSettings),
success : function (result)
{
//alert(result);
},
error: function (result)
{
//alert(result);
}
});
}
With the above SaveUserSettings() function, I can get the values which are not hidden, but I need to create an array which contains the hidden properties as well and can be sent with the ajax request to the controller as the parameter. How can I get the hidden fields and create an array mapped to the IEnumerable request of my controller?

Provided the javascript is in the partial view, you can set your userSettings directly against the model, for example:
var userSettings = #Html.Raw(JsonConvert.SerializeObject(Model));
This will then serialize your object into JSON and it will be passed to the browser, where you can then use it to pass it back to the server in jQuery without having to go through each row in the table.

MVC - Expandable Partial View within ForEach loop

I have a View with a model of type:
IEnumerable<StoreMonthlyTarget>
Here is the class
public partial class StoreMonthlyTarget
{
public int STORE_KEY { get; set; }
public Nullable<short> RetailYear { get; set; }
public Nullable<short> RetailMonthID { get; set; }
public IEnumerable<F_MonthlyTargets> EmployeeTargets { get; set; }
}
In my Index view, I loop over each StoreMonthlyTarget. I then want to be able to click on any of these, and expand a PartialView that will show the attached list of F_MonthlyTargets.
So far, I have this
#foreach (var item in Model)
{
<table class="table">
<tr>
<th>Store</th>
<th>Month</th>
<th>
Expand
</th>
</tr>
<tr>
<td>#Html.DisplayFor(modelItem => item.Store)</td>
<td>#Html.DisplayFor(modelItem => item.RetailMonth)</td>
<td>
<input type="button" value="Expand" id="btnExpand"
onclick="javascript:BtnOnclick('#item.STORE_KEY'
,'#item.RetailYear'
,'#item.RetailMonthID');"/>
</td>
</tr>
</table>
<div id="divpopup" style="display:none">
#Html.Partial("_Store", item);
</div>
This passes the keys needed into a function
<script>
function BtnOnclick(Store, Year, Month) {
$.ajax({
type: 'POST',
url: '#Url.Content("~/Targets/PartialStore")',
data: {
store: Store,
year: Year,
month: Month
},
success: function (data) {
$('#divpopup').css("display", "block");
$('#btnExpand').css("display", "none");
$('#divpopup')[0].innerHTML = data;
}
});
}
function CollapseDiv() {
$('#divpopup').css("display", "none");
$('#btnExpand').css("display", "block");
}
</script>
That in turn, uses those keys to find the record needed and return it.
[HttpPost]
public ActionResult PartialStore(string store
, string year
, string month)
{
StoreMonthlyTarget s = (
from a in db.StoreMonthlyTargets
where a.RetailMonthID.ToString() == month
&& a.RetailYear.ToString() == year
&& a.STORE_KEY.ToString() == store
select a
).ToList()[0];
s.EmployeeTargets = (
from t in db.F_MonthlyTargets
where t.STORE_KEY == s.STORE_KEY
&& t.RetailYearID == s.RetailYear
&& t.RetailMonthID == s.RetailMonthID
select t
);
return PartialView("_Store", s);
}
The Partial view is then of type StoreMonthlyTarget, and contains a table that loops over the EmployeeTargets in here.
When I run it, i get my list of Stores. I then click on the button, and it retrieves the correct store. But every time it places the PartialView div after the first Store item. Not under the corresponding entry.
Anyone have any ideas as to why? Perhaps it's badly structured and there are better ways to do this?

Passing partial view data to controller

Let say I have a model DailyTasks and a model Task. The initial view is strongly typed with DailyTasks model. It shows a list of existing tasks for the day. Users can add more task to the list/table by clicking the add button. When the add button is clicked, I render a partial view which is tied to a Task model.
I want to be able to save any changes the user made to the existing tasks and as well as newly added tasks.
I'm not sure sure what is the best way to do this. I have been playing with model binding and as well as creating a json object of the model and then pass it to the controller upon Save. So far I was only able to pass back the existing tasks to the Save controller, none of the newly added tasks show up.
Model:
public class DailyTasks
{
public int ID { get; set; }
public List<Task> TaskList{ get; set; }
}
public class Task
{
public int Id { get; set; }
public string MyTask { get; set; }
}
Main View:
#model Example.Models.DailyTasks
#using (Ajax.BeginForm("Save", "DailyTasks", new AjaxOptions { HttpMethod = "Post" }))
{
<input type="button" value="Add New Task" id="addBtn" />
<input type="submit" value="Save" id="saveBtn"/>
<table class="table">
<tr>
<th>Column Header Name Goes Here</th>
<th>Column Header Name Goes Here</th>
</tr>
#for (var i = 0; i < Model.TaskList.Count(); i++)
{
<tr>
<td>
#Html.DisplayFor(m => Model.TaskList[i].ID)
#Html.HiddenFor(m => Model.TaskList[i].ID)
</td>
<td>
#Html.DisplayFor(m => Model.TaskList[i].MyTask)
#Html.HiddenFor(m => Model.TaskList[i].MyTask)
</td>
</tr>
}
</table>
}
<script type="text/javascript">
$(document).ready(function () {
$("#addBtn").on("click", function () {
$.get('#Url.Action("AddTask")', function (data) {
$("table tbody").append(data);
});
});
});
</script>
Add New Task AcitionResult for Partial View:
public ActionResult AddTask()
{
Task model = new Task();
return PartialView("_AddTask", model);
}
Partial View (_AddTask):
#model Example.Models.Task
<tr>
<td>
#Html.DisplayFor(m => Model.ID)
#Html.HiddenFor(m => Model.ID)
</td>
<td>
#Html.DisplayFor(m => Model.MyTask)
#Html.HiddenFor(m => Model.MyTask)
</td>
</tr>

I found exactly what I needed here: http://blog.stevensanderson.com/2010/01/28/editing-a-variable-length-list-aspnet-mvc-2-style/ Now I can use modelbinding method instead of the traditional ways (FormCollection and Request).
I hope it helps someone in the future. Also, thanks to Tobias for the link. It is definitely discusses core problem that i presented but unfortunately the solution found there didn't work in my case.
Cheers!

Deleting from breeze/knockout table produces "Cannot read property 'BoardName' of null"

I have been using simple and clean access to removing items in a table populated from a breeze data service. Everything worked well until I started including navigation properties in the displayed table. Now whenever I use the delete functionality I get an error of Uncaught TypeError: Cannot read property 'BoardName' of null.
My database entities are set as:
public class SpecificAdapter
{
public int Id { get; set; }
public string PbaNumber { get; set; }
public int NumberOfPorts { get; set; }
public int AdapterId { get; set; }
public virtual Adapter Adapter { get; set; }
}
public class Adapter
{
public int Id { get; set; }
public string BoardName { get; set; }
public string DeviceId { get; set; }
public virtual ICollection<SpecificAdapter> SpecificAdapters { get; set; }
}
I am using a data service base in Breezejs this way:
var loadSpecificAdaptersTable = function () {
return em.executeQuery(breeze.EntityQuery.from('SpecificAdapters').expand('Adapter'));
};
Loaded in the view model like this:
adaptersDataService.loadSpecificAdaptersTable()
.then(function (data) { specificAdapters(data.results); })
.fail(function (error) { logger.error(error.message, "loadSpecificAdaptersTable failed during initialization"); });
I map it in the html like this:
<table class="table tablesorter">
<thead>
<tr>
<th data-bind="sort: {arr: specificAdapters, prop: 'Adapter().BoardName'}">Board Name</th>
<th data-bind="sort: {arr: specificAdapters, prop: 'PbaNumber'}">Pba Number</th>
<th data-bind="sort: {arr: specificAdapters, prop: 'NumberOfPorts'}"># Ports</th>
<th data-bind="sort: {arr: specificAdapters, prop: 'FirmwareVersion'}">Firmware Version</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody data-bind="foreach: specificAdapters">
<tr>
<td data-bind="text: Adapter().BoardName"></td>
<td data-bind="text: PbaNumber"></td>
<td data-bind="text: NumberOfPorts"></td>
<td data-bind="text: FirmwareVersion"></td>
<td>
<button data-bind="click: $parent.editSpecificAdapter" class="btn">Edit</button>
</td>
<td>
<button data-bind="click: $parent.deleteSpecificAdapter" class="btn">Delete</button>
</td>
</tr>
</tbody>
</table>
Previous to Adapter().BoardName being added as a reference in the table, I could click the delete button and everything worked. Now I get an error. The delete logic is as:
var deleteSpecificAdapter = function (item) {
item.entityAspect.setDeleted();
specificAdapters.remove(item);
};
The error is thrown upon item.entityAspect.setDeleted(); being run. Does adding the data-binding to Adapter().BoardName change the item variable in a way that doesn't map back well enough to use? Do I need to have different logic for determining the actual item or do I need to bind the click event differently in order to get the specific, non-remapped item from the foreach?

By binding to the BoardName the way you are it is creating a timing issue. Since the value is being cleared before the parent context updates fully it throws an error. There are a few ways to get around this -
<td data-bind="with: Adapter"><span data-bind="text: BoardName"></span></td>
This will only bind to the BoardName property when adapter is populated
<td data-bind="if: Adapter"><span data-bind="text: BoardName"></span></td>
This will only evaluate the inner-span's data-binding when Adapter has a value.