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?

how to pass list of object from view to controller on submit button using html.beginform [duplicate]

I have a HTML table as below in my View:
<table id="tblCurrentYear">
<tr>
<td>Leave Type</td>
<td>Leave Taken</td>
<td>Leave Balance</td>
<td>Leave Total</td>
</tr>
#foreach (var item in Model.LeaveDetailsList)
{
<tr>
<td>#Html.TextBoxFor(m => item.LeaveType, new { width = "100" })</td>
<td>#Html.TextBoxFor(m => item.LeaveTaken, new { width = "100" })</td>
<td>#Html.TextBoxFor(m => item.LeaveBalance, new { width = "100" })</td>
<td>#Html.TextBoxFor(m => item.LeaveTotal, new { width = "100" })</td>
</tr>
}
</table>
I want to iterate through all the html table rows and insert the values in ADO.NET DataTable.
Simple speaking, converting HTML Table to ADO.NET DataTable.
How to extract values from HTML Table and insert into ADO.NET DataTable?
The view is based on the following model
public class LeaveBalanceViewModel
{
public LeaveBalanceViewModel()
{
this.EmployeeDetail = new EmployeeDetails();
this.LeaveBalanceDetail = new LeaveBalanceDetails();
this.LeaveDetailsList = new List<LeaveBalanceDetails>();
}
public EmployeeDetails EmployeeDetail { get; set; }
public LeaveBalanceDetails LeaveBalanceDetail { get; set; }
public List<LeaveBalanceDetails> LeaveDetailsList { get; set; }
}

In order to bind to a model on post back, the name attributes of the form controls must match the model properties. Your use of a foreach loop does not generate the correct name attributes. If you inspect the html you will see multiple instances of
<input type="text" name="item.LeaveType" .../>
but in order to bind to your model the controls would need to be
<input type="text" name="LeaveDetailsList[0].LeaveType" .../>
<input type="text" name="LeaveDetailsList[1].LeaveType" .../>
etc. The easiest way to think about this is to consider how you would access the value of a LeaveType property in C# code
var model = new LeaveBalanceViewModel();
// add some LeaveBalanceDetails instances to the LeaveDetailsList property, then access a value
var leaveType = model.LeaveDetailsList[0].LeaveType;
Since your POST method will have a parameter name (say model), just drop the prefix (model) and that's how the name attribute of the control must be. In order to do that you must use either a for loop (the collection must implement IList<T>)
for(int i = 0; i < Model.LeaveDetailsList.Count; i++)
{
#Html.TextBoxFor(m => m.LeaveDetailsList[i].LeaveType)
....
}
or use a custom EditorTemplate (the collection need only implement IEnumerable<T>)
In /Views/Shared/EditorTemplates/LeaveBalanceDetails.cshtml
#model yourAssembly.LeaveBalanceDetails
<tr>
<td>#Html.TextBoxFor(m => m.LeaveType)</td>
....
</tr>
and then in the main view (not in a loop)
<table>
.... // add headings (preferably in a thead element
<tbody>
#Html.EditorFor(m => m.LeaveDetailsList)
</tbody>
</table>
and finally, in the controller
public ActionResult Edit(LeaveBalanceViewModel model)
{
// iterate over model.LeaveDetailsList and save the items
}

With respect to your requirement, try this
jQuery(document).on("change", ".DDLChoices", function (e) {
var comma_ChoiceIds = '';
var comma_ChoicesText = '';
$('input[class="DDLChoices"]').each(function (e) {
if (this.checked) {
comma_ChoiceIds = comma_ChoiceIds + $(this).val() + ',';
comma_ChoicesText = comma_ChoicesText + $(this).parent('label').parent() + ',';
}
});
$('#ChoiceIds').val(comma_ChoiceIds);
$('#ChoiceText').val(comma_ChoicesText);
});
#using (Html.BeginForm("Actionname", "Controllername", FormMethod.Post, new { id = "frmChoices" }))
{
#Html.HiddenFor(m => m.ChoiceText, new { #id = "ChoiceText" })
#Html.HiddenFor(m => m.ChoiceIds, new { #id = "ChoiceIds" })
<div class="form-group">
<div>
<table>
<tr>
<th>Name</th>
<th>Selected</th>
</tr>
#foreach (var item in #Model.Choices)
{
<tr>
<td> <label>#item.ChoicesText</label> </td>
<td> <input class="DDLChoices" value="#item.ChoiceIds" type="checkbox" /></td>
</tr>
}
</table>
</div>
<input type="button" value="Submit" onclick="return ChoicesPoster.passChoices()"
</div>
}

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!