How to compare changed values and actual values from table using Jquery - javascript

I have a table using foreach I'm filling the td values. There is a check box when user is changed that value i need to get username.
For example while loading time checkbox value is true. Then user will do uncheck immedetaily i should get the value. Same user same row if user check again(i.e old postion(value)) i shouldn't the values.
My Code:
<table>
.......
<tr>Heading 1</tr>
........
#foreach (var getData in Model.DBValue)
{
<tr>
<td>
#Html.CheckBoxFor(model => getData.AffectedItemId, new { #id =
"AffectedItemIdR" + index, #class = "RChangeEvent", #checked =
getData.AffectedItemId })
</td>
<td>
#Html.TextBoxFor(model => getData.updatedDate, "{0:MM/dd/yyyy}", new {
#disabled = "disabled", #id = "SignedDateR" + index})
</td>
</tr>
}
</table>
Question:
If there 100 rows how to get the changed rows values?
Could you please help to solve this?

Related

foreach loop does not update to next item properly, but runs proper number of times

I have passed a list of Models from my controller to my View, and I am trying to use a foreach loop to display elements of each item in the list. The same item is being displayed each time, though my foreach loop runs the correct number of times (i.e. if my list has 3 items, it will create a table with 3 rows, but every row will be the same).
I have confirmed that my list is populated correctly by changing the order in which the elements are passed to the View. The table always displays elements of the first item in every row, once for every time the for loop runs. Here is my code in the view to iterate through my list:
<tbody>
#foreach (var item in Model)
{
<tr>
<td>
<b>#Html.DisplayFor(Modelitem => item.Name)</b>
</td>
<td>
<b>#Html.DisplayFor(Modelitem => item.IPAddress)</b>
</td>
</tr>
}
</tbody>
This is my code from the controller to populate the list. I have verified that by changing the order of the elements, a different element will be displayed multiple times in the View.
public ActionResult Index()
{
List<IPWhitelist> model = new List<IPWhitelist>();
long companyID = Convert.ToInt64(Session["CompanyID"].ToString());
long branchID = Convert.ToInt64(Session["BranchID"].ToString());
model = db.IPWhitelists.Where(w => w.CompanyID == companyID && w.BranchID == branchID && w.IsActive).OrderBy(w => w.Name).ToList();
return View(model);
}
I am very stumped so any help is appreciated!
I didn't use MVC in a while, I think you have a problem in the syntax
If you want to iterate you can either use simply #item.Name and #item.IPAdress, and if you want to use the Html.DisplayFor, you have to use it as so:
<tbody>
#for (var i=0; i < Model.Count; i++)
{
<tr>
<td>
<b>#Html.DisplayFor(Modelitem => Modelitem[i].Name)</b>
</td>
<td>
<b>#Html.DisplayFor(Modelitem => Modelitem[i].IPAddress)</b>
</td>
</tr>
}
</tbody>
DisplayFor helper can be used in this way:
#foreach (var item in Model)
{
<tr>
<td>
<b>#Html.DisplayFor(model => item.Name)</b>
</td>
</tr>
}

How do I get specific values from checked rows in MVC razor view?

Ok, so I have this partial view (part of an MVC application) which just displays data from a view in the database.
#model IEnumerable<TransportPlanner.Models.TRANSPORT_PLANNER_VIEW>
<table>
<tr>
<th>#Html.CheckBox("HeaderCheck")</th>
<th>#Html.DisplayNameFor(model => model.Status)</th>
....
<th>#Html.DisplayNameFor(model => model.Volume)</th>
<th>#Html.DisplayNameFor(model => model.Weight)</th>
....
</tr>
#foreach (var item in Model) {
<tr>
<th>#Html.CheckBox("RowCheck")</th>
<td>#Html.DisplayFor(modelItem => item.Status)</td>
....
<td>#Html.DisplayFor(modelItem => item.Volume)</td>
<td>#Html.DisplayFor(modelItem => item.Weight)</td>
....
</tr>
}
</table>
I want to be able to find a way in which I can get the values for the Volume and Weight fields of only the checked rows (after checking them), and add them to get the total (which is displayed but not stored).
For example, once I get the results displayed on screen, and I check 3 rows (having the values of 'weight' as 5, 10 and 15), then value displayed should be '30' (sum of the weights). Similarly, if I remove the checkbox for the row having weight as '5', then the value displayed should be '25'.
My front end skills are almost non-existent, and I have scourged over the internet for nearly 12 hours but not found a way to do it. I know that I need to either use JavaScript (or some flavour of it like JQuery) or Ajax (if I need the values updates dynamically as I check/uncheck them).
What is the best way to achieve this, without updating my model? I don't have the luxury of time because I am the only developer at my workplace, and this is the first step of a huge task I need to complete in 3 weeks.
Your #Html.CheckBox("RowCheck") is generating invalid html (duplicate id attributes). Replace it with
<input type="checkbox" class="checkbox" />
Then add class names to the <td> elements for Volume and Weight
<td class="volume">#Html.DisplayFor(modelItem => item.Volume)</td>
<td class="weight">#Html.DisplayFor(modelItem => item.Weight)</td>
And assuming you want to display the totals in the table footer, add the following html to the <table> element (note you should also use the <thead> and <tbody> in your table
<table>
....
<tfoot>
<tr>
<td></td>
....
<td id="totalvolume"><td>
<td id="totalweight"><td>
....
</tr>
</tfoot>
</table>
Then you can use javascript/jquery to handle the change event of the checkboxes, and sum the values in each row. Using jquery:
$('.checkbox').change(function() {
var totalVolume = 0;
var totalWeight = 0;
var selected = $('.checkbox:checked'); // get the selected checkboxes
$.each(selected, function(index, item) { // loop through the selected checkboxes
var row = $(this).closest('tr'); // get the containing tr element
totalVolume += Number(row.find('.volume').text());
totalWeight += Number(row.find('.weight').text());
})
// display the totals
$('#totalvolume').text(totalVolume);
$('#totalweight').text(totalWeight);
});
Note, the above code assumes the values of properties Volume and Weight are numeric (without any formatting)

ASP.NET MVC 4 How to add rows to table containing dropdownlistfor

I have a small table as part of a form. It displays a number alongside a dropdown that allows a user to select a value for to go along with that number. I want to allow the user use add rows to this table and be able to assign as many values as is required. I've been searching Google all day and trying many things but nothing seems to fit my situation. What is the best way to achieve this functionality?
Here is the code from my view containing the table and my add actionlink:
<div class="form-group">
#Html.LabelFor(m=>m.Part.PartConnectionTypes, new {#class = "control-label col-md-5"})
<div class="col-md-7">
<table class="table table-condensed table-striped table-bordered">
<thead>
<tr>
<td>Number</td>
<td>Value</td>
</tr>
</thead>
<tbody>
#{
for(var i = 0; i < Model.Part.PartConnectionTypes.Count; i++)
{
var count = i + 1;
<tr>
<td>#count</td>
<td>#Html.DropDownListFor(m => m.Part.PartConnectionTypes[i].ConnectionType, new SelectList(Model.ConnectsTo, "CodeId", "ValChar"), "", new { #class = "form-control" })</td>
</tr>
}
}
</tbody>
</table>
#Html.ActionLink("Add Connection", "AddNewPartConnection", "Home", new { id = "addConnection"})
</div>
And here is my controller method from for the action link:
public ActionResult AddNewPartConnection(IndexViewModel model)
{
var newPartConnectionType = new PartConnectionType();
model.Part.PartConnectionTypes.Add(newPartConnectionType);
return View("Index", model);
}
and the index method:
public ActionResult Index(string searchString)
{
var model = new IndexViewModel { Part = new Part() };
model.Part.PartConnectionTypes.Add(new PartConnectionType());
if (!String.IsNullOrEmpty(searchString))
{
model.Part = CoreLogic.GetPartByPartCode(searchString);
if (model.Part == null)
{
model.Part = new Part();
model.Part.PartConnectionTypes.Add(new PartConnectionType());
ViewBag.SearchMessage = "That is not a current part";
}
}
return View(model);
}
I appreciate any help anyone can provide.
I would just separate the view for "table rows" to be as a "partial view" and render that on add button click event.
Two was you can achieve this,
1) using jquery, call ajax and let mvc return html to you and you
place it right after your "last row" in the table
2) Use mvc ajax
form and tell it what to do - render an extra row(placeholder) in
the end and give that as an id to replace html on success.
Hope this helps.

Display a Label and its value on change of dropdown value

I want to display a label and its value when a dropdown value is changed.
For eg:- when AddressType is changed then i want to display the AddressLine1 label and its respective value.
I am able to display the <td></td> part and the label also gets displayed. But the value of Address1 is not getting displayed. I tried setting in ViewBag and then using it in <td></td> but that is not working. I tried to set the value of displayFor id also. but that too doesn't work.
How can i display the value ?
Code:
<td id="Address1Label">
#Html.LabelFor(model => model.Address1)
</td>
<td id="Address">
#this.ViewBag.AddressLine1
#Html.DisplayFor(model => model.Address1, new {#id = "Address1" })
</td>
$(document).ready(function () {
$('#Address1Label').hide();
$('#Address').hide();
});
$(function () {
$('#AddressType').change(function (e) {
// i call an Action and get the result as json
if (data.HomeAddress != null) {
$('#Address1Label').show();
$('#Address').show();
// $('#Address1').val(data.HomeAddress.Address1);
$('#Address1').html(data.HomeAddress.Address1);
});
As far As I know
#Html.DisplayFor<TModel, TValue>
by default, ignore your overload html attributes which means
<td> #Html.DisplayFor(model => model.Address1, new {#id = "Address1" }) </td>
only produce an text like
<td> Address </td>
instead of what you may think like
<td><xxx id="Address1"> Address </xxx></td>
So if you want to change this value, you can do
$('#Address').html(data.HomeAddress.Address1);

How to validate the Two Date fields on my view using jquery or javascript

I have two fileds in my View one is Effective data and one is Cancel date
<td>
Effective date:
</td>
<td>
<%= Html.TextBoxFor( x => Model.SelectedAccountGroup.GroupEffectiveDate, new { #class="datepicker"} )%>
<%= Html.ValidationMessageFor( x => x.SelectedAccountGroup.GroupEffectiveDate )%>
</td>
</tr>
<tr>
<td>
Cancel date:
</td>
<td>
<%= Html.TextBoxFor( x => Model.SelectedAccountGroup.GroupCancelDate, new { #class = "datepicker" } )%>
<%= Html.ValidationMessageFor( x => x.SelectedAccountGroup.GroupCancelDate )%>
</td>
On Save button I should not allow user to Enter the Cancel date Before Effective data? can any body tell me how to do this?
get the two date field value as a single integer value . For eg 20101006 .
if time is also there add that too,
if you use jquery
var dateval= $("#dateid").val();
for javascript
var dateval = document.getElementById("dateid").value;
I assume the text box where you show date is having an id. let it be dateid
Now you can compare two fields just as integer.
if(date1>date2)
do something
return false

Categories

Resources