I've been searching for an article or example but can't seem to find what I'm looking for. If I write out a table in a View with a checkbox in one of the columns, how would I go about looping through the row, seeing if the checkbox is checked, and if it is then add the record to a database?
I'm still learning about checkboxes and dropdownlists in MVC so I will eventually have to figure out how I would assign the UserID to the row or checkbox and then I'll look at a dropdownlist for the GroupId to assign them to.
The basic scenario is to have a list of unassigned users with a dropdownlist of Groups above the table. The Admin will then make a selection of which group from the DDL and then check the users he wants to assign to it. Then I need to loop through get the UserId for the records that were checked and add them to a database with EntityFramework.
Anyone know of any examples or articles for something similar?
<table class="table table-bordered table-striped table-hover table-condensed tbackground">
<tr>
<th class="text-center">
</th>
<th class="text-center">
First Name
</th>
<th class="text-center">
Last Name
</th>
<th class="text-center">
Email
</th>
<th class="text-center">
Phone
</th>
</tr>
#foreach (var item in Model)
{
if (item.GroupId == 0)
{
<tr>
<td>
#Html.CheckBox("isSelected")
</td>
<td>
#Html.DisplayFor(modelItem => item.FirstName)
</td>
<td>
#Html.DisplayFor(modelItem => item.LastName)
</td>
<td>
#item.EmailPrimary
</td>
<td class="text-center">
#Html.DisplayFor(modelItem => item.PhonePrimary)
</td>
</tr>
}
}
</table>
You can do it in a couple ways:
If you wanna check everything and post the form that contains your table
Add IsSelected property to your model and change your foreach to a for loop. This way your table for will look like this:
#for (var i = 0; i < Model.Count(); i++)
{
if (item.GroupId == 0)
{
<tr>
<td>
#Html.CheckBoxFor(x => x[i].IsSelected)
</td>
<td>
#Html.DisplayFor(x => x[i].FirstName)
</td>
<td>
#Html.DisplayFor(x => x[i].LastName)
</td>
<td>
#Model[i].EmailPrimary
</td>
<td class="text-center">
#Html.DisplayFor(x => x[i].PhonePrimary)
</td>
</tr>
}
}
Using index allows your ModelBinder to know that you're posting a list and will bind the properties of this list. That is, if a checkbox is checked, you'll get a true value for your IsSelected property in Controller.
Then, you can do this in Controller to get the selected records:
var selecteds = MyPostedModel.Where(x => x.IsSelected);
or...
If you want to check and save then
First add an data-* property to the checkbox which will hold your Id:
#Html.CheckBox("isSelected", false, new { data_group_id = item.GroupId})
Then add an event listner to your checkbox click with jquery:
$("input[name='isSelected']").on('click', function() {
var groupId = $(this).data("group-id");
var isChecked = $(this).is(":checked");
$ajax.... //Use an ajax call and pass the values to your action
});
Related
I have a list view that lists all of the products that were ordered per order# (OrderID). I added a checkbox and a textbox on each product.
I'm trying to make it to where when the user opens up the form, when they go down the list of products from a particular order, if they check the checkbox it will auto calculate a value to insert into the textbox.
For example, there's two columns I want to add together to get the value for the textbox (QtyOrdered and QtyAvailable). So let's say for Order# 1: ProductA has a QtyAvailable of 4 and for that order they ordered 2.
What I want to happen is if the user checks the checkbox, then it would put the value of "QtyOrdered" + "QtyAvailable" (which would be 6) into the textbox. And if the user unchecks the checkbox, then that textbox value would go back to null or empty.
The reason I want to do this is because when we receive an order back, sometimes not all the products from that order come back so I want to be able to check which products we received back so it will add it back to inventory. I'm then going to use the textbox values to update the QtyAvailable column in another table when the form is submitted, but I just need help with solving the checkbox and textbox issue I'm having.
I am struggling to get it working properly. I got it working for just the first product, but if I click on any additional checkboxes, nothing happens. Also, I can't get it to change back to null or empty when I uncheck the checkbox. Any help would be great, I'm new to ASP.NET MVC and C# and would really appreciate any advice on what I'm doing wrong.
So far here is my view page:
<table class="table">
<tr>
<th>
Order #
</th>
<th>
Product Code
</th>
<th>
Qty Ordered
</th>
<th>
Qty Available
</th>
<th>
Qty Returned
</th>
<th>
Return?
</th>
<th>
New Qty Available
</th>
</tr>
#foreach (var item in Model)
{
<tr>
<td>
#Html.DisplayFor(modelitem => item.OrderID)
</td>
<td>
#Html.DisplayFor(modelItem => item.Product_Code)
</td>
<td>
#Html.DisplayFor(modelItem => item.Qty_Ordered)
</td>
<td>
#Html.DisplayFor(modelItem => item.Qty_Available)
</td>
<td>
#Html.DisplayFor(modelItem => item.Qty_Returned)
</td>
<td>
<input type="checkbox" name="return" onclick="newQuantity(this)">
</td>
<td>
<input class="ctl-number" type="number" name="newQty" id="nsq" />
</td>
</tr>
<script>
function newQuantity() {
var returned = [];
$('input[type="checkbox"]').each(function () {
if ($(this).is(':checked')) {
returned.push($(this).val());
var qty = #item.Qty_Ordered.Value + #item.Qty_Available.Value;
$('#nsq').val(qty);
}
})
}
</script>
}
</table>
I have an ASP.Net MVC website and I want to pass a textbox value from view to controller using URL Action.
Below is my code,
<table class="table table-striped table-bordered table-hover" id="products" width="100%">
<thead>
<tr>
<th>ProductId</th>
<th>Name</th>
<th>ShortName</th>
<th>ProductNamePrefix</th>
<th>Minimum Count</th>
<th>Add Product</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model)
{
<tr>
<td>
#Html.DisplayFor(modelItem => item.ProductId)
</td>
<td>
#Html.DisplayFor(modelItem => item.Name)
</td>
<td>
#Html.DisplayFor(modelItem => item.ShortName)
</td>
<td>
#Html.DisplayFor(modelItem => item.ProductNamePrefix)
</td>
<td>
#Html.TextBox("MinCount", item.MinimumCount, new {#class = "form-control" + " " + item.ProductId})
</td>
<td>
#if (item.IfExists == true)
{
<div class='isa_success'><i class='fa fa-check'></i></div>
}
#if (item.IfExists == false)
{
<div class='isa_info'><i class='fa fa-plus-circle'></i></div>
}
</td>
</tr>
}
</tbody>
</table>
I want to pass the textbox value in url action method to controller. I am creating a custom class based on the id for textbox but I am not able to retrieve it using javascript or jQuery.
but I am not able to retrieve it using javascript or jQuery
Why not? It's pretty simple.
In the absence of JavaScript, you can't do this with just a link. Instead, you'd need to use a form. So you'd have to wrap each table row in a form element and replace your link with an input type="submit". (And, of course, style it according to your needs.) This would post the values of the contained form elements (including the text box) to the form's action.
This does get a little ugly, since you can't wrap a form around a tr, so you'd have to nest your structure. Something like this:
<table>
<tr>
<td>
<form>
<table><!-- Your 1-row table goes here --></table>
</form>
</td>
</tr>
</table>
The outer tr is what gets repeated for each row of your "table", so each row is actually a single cell containing a nested table which itself has only one row. As I said, a bit ugly. But it gets the job done.
This is how i am set my page according my database column:
This is the code (only for the first column)
<table class="table">
<tr>
<th style="font-size: 20px">
#Html.DisplayNameFor(model => model.fileName)
</th>
<th></th>
</tr>
#foreach (var item in Model)
{
<tr>
<td style="font-size: 15px">
#Html.DisplayFor(modelItem => item.fileName)
</td>
<td>
#Html.ActionLink("File Details", "Details", new { id = item.id })
</td>
</tr>
}
</table>
How can i change fileName to another string when over my html page ?
I don't know if this will work(I am unable to test it at the moment, not on windows),
[Display(Name = "File Name")] //this is the line you must add.
public string fileName{get;set;} //this is your model property name.
This should change it to File Name
I pass my model to my view. On this view I am displaying a table and trying to populate it with a list of information from the database.
I am using asp.net-mvc, entity framework, razor, c# and LINQ
However I need it grouped by a certain column kpiID.
Here are all of the columns in the table.
kpiHistoryID
kpiID
startAmount
completedamount
endAmount
completeBy
comments
The kpiID links back the the KPI table and is where I can grab the actual name of the KPI.
How exactly do I group the data and can it be done in the below #foreach line?
<tbody>
#foreach (var item in #Model.IPACS_Department.IPACS_Functions.SelectMany(m => m.IPACS_Processes).SelectMany(m => m.IPACS_Procedures).SelectMany(m => m.IPACS_KPIS).SelectMany(m => m.IPACS_kpiHistory))
{
<tr class="gradeX">
<td>
#item.IPACS_KPIS.name
</td>
<td>
#item.startAmount
</td>
<td>
#item.completedAmount
</td>
<td>
#item.endAmount
</td>
</tr>
}
</tbody>
This:
#Model.IPACS_Department.IPACS_Functions.SelectMany(m => m.IPACS_Processes)
.SelectMany(m => m.IPACS_Procedures).SelectMany(m => m.IPACS_KPIS)
.SelectMany(m => m.IPACS_kpiHistory)
gives a list of denormalised kpiHistories, yes? Does it not give you the answer you want if you do
thatList.GroupBy(x => x.kpiID)
Only way I could figure out how to do it was using sum. Couldn't get it to work with group by at all.
<tbody>
#foreach (var item in #Model.IPACS_Department.IPACS_Functions.SelectMany(m => m.IPACS_Processes).SelectMany(m => m.IPACS_Procedures).SelectMany(m => m.IPACS_KPIS))
{
<tr class="gradeX">
<td>
#item.name
</td>
<td>
#item.IPACS_kpiHistory.Select(m => m.startAmount).Sum()
</td>
<td>
#item.IPACS_kpiHistory.Select(m => m.completedAmount).Sum()
</td>
<td>
#item.IPACS_kpiHistory.Select(m => m.endAmount).Sum()
</td>
</tr>
}
</tbody>
I got the following Razor view that display a list of HDD so an user and add to a cart. When the user press the button next to each row of HDD, it will pass the quantity and HDD's identity to a controller. However, while each HDD's ID does display properly, "hddId" is always 1 and "quantity" is correctly 5 when I inspect the Controller's parameters.
#model IEnumerable<TestStore.Models.Hdd>
#{
ViewBag.Title = "Index";
}
<h2>Index</h2>
<p>
#Html.ActionLink("Create New", "Create")
</p>
#using(Html.BeginForm("AddToCart","Cart")){
<table>
<tr>
<th>
Ident
</th>
<th>
Brand
</th>
<th>
Name
</th>
<th>
Model
</th>
<th>
Speed
</th>
<th>
Capacity
</th>
<th>
Cache
</th>
<th></th>
</tr>
#foreach (var item in Model) {
<tr>
<td>
#Html.DisplayFor(modelItem => item.hddId)
</td>
<td>
#Html.Hidden("hddId", item.hddId)
#Html.Hidden("quantity", 5)
#Html.DisplayFor(modelItem => item.brand)
</td>
<td>
#Html.DisplayFor(modelItem => item.name)
</td>
<td>
#Html.DisplayFor(modelItem => item.model)
</td>
<td>
#Html.DisplayFor(modelItem => item.speed)
</td>
<td>
#Html.DisplayFor(modelItem => item.capacity)
</td>
<td>
#Html.DisplayFor(modelItem => item.cache)
</td>
<td>
<input type="submit" value="Add to Cart" />
</td>
</tr>
}
</table>
}
Codingbiz is correct. The submit button wasn't referring to any particular row but the entire table. I suspect the reason why "hddId" was always "1" is because that's the first reference of "hddId" it see when the form is submitted. I changed it so #using(Html.BeginForm(...)) is inside the #foreach loop so each row has its own form and submit button:
#foreach (var item in Model) {
<tr>
#using(Html.BeginForm("AddToCart","Cart")){
<td>
#Html.DisplayFor(modelItem => item.hddId)
</td>
<td>
#Html.Hidden("hddId", item.hddId)
#Html.Hidden("quantity", 5)
#Html.DisplayFor(modelItem => item.brand)
</td>
<td>
#Html.DisplayFor(modelItem => item.name)
</td>
<td>
#Html.DisplayFor(modelItem => item.model)
</td>
<td>
#Html.DisplayFor(modelItem => item.speed)
</td>
<td>
#Html.DisplayFor(modelItem => item.capacity)
</td>
<td>
#Html.DisplayFor(modelItem => item.cache)
</td>
<td>
<input type="submit" value="Add to Cart" />
</td>
}
</tr>
}
As others have said, this doesn't work because when you submit, you're submitting every row in the table, not just the one clicked.
One option is to do what they suggest in this article:
http://federmanscripts.com/2010/01/12/form-and-table-row-nesting-workaround/
That is, using javascript, you copy the form values on button press to a hidden row and submit that.
I got around the validation problem by using button type="submit" instead of input type="submit". It still works correctly by passing the id number to the controller.
#using(Html.BeginForm("AddToCart","Cart")){
<table>
<tr>
//header stuff here
</tr>
#foreach (var item in Model) {
//row data goes here
//remove hidden field reference to #item.hddId
<tr>
<td>
<button type="submit" value="#item.hddId" name="hddId">Add to Cart</button>
</td>
</tr>
</table>
}