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.
Related
I want to send NumberBox Inputted values to the controller.
I can send the numberBox value to the controller in the bellow way
<input type="button" value="+" onclick="location.href='#Url.Action("GetProductInReceipt", "Sale")?id=' + document.getElementById('SaleQuantity#(i)').value" />
or
<input type="button" value="+" onclick="location.href='#Url.Action("GetProductInReceipt", "Sale")?id=' + $('#SaleQuantity#(i)').val()" />
Both ways send the NumberBox value from this code
but I need to send one more parameters to the controller which I can send seperately like this,
+
How can I send both parameters together?
I need to send both parameters using any one way.
Here is my code
#{ var i = 0;}
<tbody id="myTable">
#foreach (var item in Model) {
<tr>
<td>
#Html.DisplayFor(modelItem => item.ProductCode)
</td>
<td>
#Html.DisplayFor(modelItem => item.ProductName)
</td>
<td>
#Html.DisplayFor(modelItem => item.SellingPrice)
</td>
<td>
<input type="number" class="numberInput" name="SaleQuantity#(i)" id="SaleQuantity#(i)" min="1">
<td> +
</td>
</tr>
i++;
}
</tbody>
</table>
I want to do it without ajax call. Simply how can I send both parameters together?
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
});
I'm starting web development with ASP .NET MVC4 and I'm stuck with the following problem:
I need to display certain fields of a viewmodel in a table, and when a row is selected or clicked display extra data in another div with textboxes. This is because the wiewmodel has to many fields and I want to display the more important data in the table (no need to scroll in the screen) and the less significant data bellow the table in another div (similar to outlook mail client functionality, when you select an email the body of the email is displayed below).
So I think to resolve this I need to know the selected row argument item.A and then with AJAX retrieve the extra data related to item.A.
Some generic code:
#foreach (var item in Model) {
<tr>
<td>
#Html.DisplayFor(modelItem => item.A)
</td>
<td>
#Html.DisplayFor(modelItem => item.B)
</td>
<td>
#Html.DisplayFor(modelItem => item.C)
</td>
...
...
...
<td>
#Html.DisplayFor(modelItem => item.Z)
</td>
</tr>
}
I tried several Jquery and javascripts scripts to achieve this with no success, so I think I'm missing something.
Here an example script
<script>
$('tr').click(function () {
alert('values: ' + $(this).data('A'));
});
</script>
Note: Just using alert to test the script, later I will replace it with the AJAX call.
Any help will be appreciated.
#foreach (var item in Model) {
<tr data-id="#item.A">
<td>
#Html.DisplayFor(modelItem => item.A)
</td>
<td>
#Html.DisplayFor(modelItem => item.B)
</td>
<td>
#Html.DisplayFor(modelItem => item.C)
</td>
...
...
...
<td>
#Html.DisplayFor(modelItem => item.Z)
</td>
</tr>
}
<script>
$(document).ready(function () {
$('tr').click(function () {
alert('values: ' + $(this).data('id')); //you will get item.A value
//do ajax call here and add partial view html data to div
});
});
</script>
I'm migrating a webforms project to MVC and I've come across a repeater control. The repeater control allows for inline editing (by this I mean each line that can be edited (because there is a criteria to allow this) has input controls on it where you can change the values and an edit button that takes those values and updates the db) as well as display of records displayed in a table.
With the repeater control it's easy to tell which record got updated since when that records edit button is clicked it calls the ItemCommand function passing in the row that was edited allowing me to just get that control name value to get the values. How is this done in MVC? I know we have display templates and edit templates but I need to combine them into 1, which I'm able to do with the below code, but if I have more than 1 row that can be edited how do I get the correct row of input controls to get the values?
#foreach (var item in Model.Data)
{
if(item.User == "PIRA" || DateTime.Today != item.EntryDate.Value.Date)
{
<tr style="height: 25px;">
<td hidden="hidden">
#Html.DisplayFor(modelItem => item.TransactionID)
</td>
<td align="center">
#Html.DisplayFor(modelItem => item.EntryDate)
</td>
<td align="center">
#Html.DisplayFor(modelItem => item.User)
</td>
<td align="center">
#Html.DisplayFor(modelItem => item.EffectiveDate)
</td>
<td align="center">
#Html.DisplayFor(modelItem => item.RecordType)
</td>
<td align="right">
#Html.DisplayFor(modelItem => item.Value)
</td>
<td align="center">
#Html.DisplayFor(modelItem => item.Comments)
</td>
<td align="center">
</td>
</tr>
}
else
{
<tr style="height: 25px;">
<td hidden="hidden">
#Html.DisplayFor(modelItem => item.TransactionID)
</td>
<td align="center">
#Html.DisplayFor(modelItem => item.EntryDate)
</td>
<td align="center">
#Html.DisplayFor(modelItem => item.User)
</td>
<td align="center">
#Html.EditorFor(modelItem => item.EffectiveDate)
</td>
<td align="center">
#Html.DropDownListFor(modelItem => item.RecordType, Model.RecordTypes)
</td>
<td align="center">
#Html.EditorFor(modelItem => item.Value, new { style = "text-align: right;" })
</td>
<td align="center">
#Html.EditorFor(modelItem => item.Comments, new { cols = 50, #rows = 3 })
</td>
<td align="center">
<div style="margin-bottom:10px;">
<input type="submit" value="Edit" name="action:Edit" />
</div>
<div>
#Html.ActionLinkWithList("Delete", "Delete", "Capacity", new { id = item.TransactionID }, null)
</div>
</td>
</tr>
}
}
I was able to get this by not using DisplayFor() but instead the control *For() function so I can set the id property (because DisplayFor() doesn't seem to allow this). I set the id to include that records transactionID so each input can be unique. Then each records edit link passes in the transactionID to a javascript function. Then inside there once I have the id I can build the id properties to get all the input values and make my controller call.
ie.
#Html.TextBoxFor(modelItem => item.EffectiveDate, new { id="effectiveDate_" + item.TransactionID, #class="datepicker", style="width: 150px;" })
#Html.ActionLink("Edit", "Edit", "Data", new { onclick = "EditRecord(" + item.TransactionID + ");" })
function EditRecord(id) {
// get the control values based off the passed in id
var effDate = $("#effectiveDate_" + id).val();
// make the call to our controller passing in the edited row data
$.post("/Data/Edit/", { effectiveDate: effDate });
}
Kind of a pain to do it manually like this but it works. In the web forms repeater control this is probably what it's doing behind the scenes so I wish MVC had something like this as well.
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>
}