I want to create simple list in a form of table like on the image:
I am confused how to implement update/delete actions.
Both are [HttpPost] methods.
But I can't create forms inside <td> tags.
What is the valid way to make a table in the way that I want?
I think I have understood what do you need.
You can make one simple table and into each row put only one td which keep form.
Something like this:
<table>
#{
foreach (var item in Model.MyCollection)
{
<tr>
<td>
<form>
<table>
and hear put your existing row with your columns <tr><td>...</td><td>...</td></tr>
</table>
</form>
</td>
</tr>
}
}
and you will have one form for each record.
Related
I have an MVC5/Bootstrap application that has a page where the user, as part of a larger form, can add and delete rows in a table.
To add rows, the user clicks an icon and then searches for data using a TypeAhead field that appears in a popover, which when selected retrieves row data using AJAX and inserts the row into the table.
Rows can be deleted by clicking on an icon in each row, the row is then removed. Both these actions affect a bound hidden input field that contains a list of IDs of the rows, e.g. "{100001},{100003},{100004}".
When the form that contains this table is submitted this hidden field is parsed and the appropriate database actions are performed using EF6 to add or delete items.
My question is whether this approach of using a single hidden field that is manually parsed by the controller method is the best choice. I was thinking there may be a more idiomatic way to utilize MVC model binding. e.g. having hidden checkboxes on each row or some such mechanism.
The ViewModel you are binding to could contain a collection of row viewmodels that wrap all inputs for a single row.
To submit these, bind them using the index.
<table>
<tbody>
<tr>
<td>
#Html.HiddenFor(m => m.RowData[0].SomeRowProperty)
<input type="hidden" name="RowData.Index" value="0" />
</td>
</tr>
<tr>
<td>
#Html.HiddenFor(m => m.RowData[1].SomeRowProperty)
<input type="hidden" name="RowData.Index" value="1" />
</td>
</tr>
</tbody>
</table>
See also Model binding to a list
I have the following table structure inside a view which gets displayed in the _Layout view in place of #RenderBody
<table>
<thead>
<tr>
<th>first</th>
<th>second</th>
<th>third</th>
</tr>
</thead>
<tbody>
<tr>
<td>1st</td>
<td>2nd</td>
<td>3rd</td>
</tr>
</tbody>
</table>
In my _Layout page, I want to apply the contextMenu event to the th elements, however, being a beginner, I'm having a hard time figuring the selector for the same.
Some combinations that I've tried -
I have a reference to my table in a variable called oTable
oTable.$('tr th').contextMenu ....
oTable.$('thead tr th').contextMenu ....
$('table.tableID th').contextMenu ....
None of them are working. Any suggestions?
If you simply want to select ALL of your th elements then you don't need anything more complicated than this:
$('th').contextMenu ....
If your table has an id associated to it then the following will allow you to target just that table:
$('#yourid th')
I wish to build a partial view that gets a model column and print it.
Something like that:
At the view:
#model IEnumerable<products_comparison.Models.Product>
#{
ViewBag.Title = "Index";
var Brand = (from r in Model
select r.Brand).Distinct();
}
<h2>
Index</h2>
#Html.RenderPartial("_DisplayAttribute",Brand)
And at the partial view:
<table>
<tr>
<th>
Brand
</th>
</tr>
#foreach (var row in Model)
{
<tr>
<td>
#Html.DisplayFor(r => row)
</td>
</tr>
}
</table>
There are a few problems I run into:
The compiler doesnt allow me to send Barnd to the partial view.
If you look at the partial view code you will see the word Brand, which is the column name. I dont wish to hard-coded the word "Brand" in the partial view, instead I like that the column name will be there.
In the partial view I need to put #model products_comparison.Models.Product, but I dont
want to send the hole table. I want to send only one column - But I dont know what to put there..
Thanks!
EDIT:
Just to clear one thing, I want that the view will call the same partial view for each column in the table(for most of the columns in the table anyway) and each time I'll send a different column(distinct value column to be exact).
Start by refactoring and putting the right logic into the right place. This LINQ query has strictly nothing to do in a view. A view is not supposed to do any LINQ queries or whatever to pull data. A view is supposed to work with data that it is passed to it from the controller action under the form of a view model. A controller action builds and passes an adapted view model that you define for the view.
So as always you start by defining a view model that will be adapted to the requirements of your view:
public class MyViewModel
{
public IEnumerable<Brand> Brands { get; set; }
}
then you write a controller action that will populate this view model and pass it to the view:
public ActionResult Foo()
{
IEnumerable<products_comparison.Models.Product> products = ...
var model = new MyViewModel
{
Brands = (from r in Model select r.Brand).Distinct()
};
return View(model);
}
then a view:
#model MyViewModel
<table>
<tr>
<th>
Brand
</th>
</tr>
#Html.DisplayFor(x => x.Brands)
</table>
and finally you could define a corresponding display template which will automatically be rendered for each element of the Brands collection of your view model (~/Views/Shared/DisplayTemplates/Brand.cshtml):
#model Brand
<tr>
<td>
#Html.DisplayForModel()
</td>
</tr>
For 1 try changing #Html.RenderPartial("_DisplayAttribute",Brand) to #Html.Partial("_DisplayAttribute",Brand)
You will also need to specify the model in the partial view like #model products_comparison.Models.Brand or something like it
Also please clarify 2 & 3 as they are not clear what you want
I'll use the famous NerdDinner as an example here.
I have a search page where the user can enter a search string and then see the result in a table below. The user can also add more results to the table, like this:
Search for dinners today and display in a table.
Search for dinners tomorrow and add the result to the table.
The table will now show dinners today and tomorrow.
The user is also able to remove dinners from the table by clicking on them, one by one.
I need to generate a pdf with the results in the table. Not like a print screen because the pdf has it's own layout. I just need the data in the table. Preferably in a list of Dinner models.
Right now I can generate a pdf from a list of Dinner models. But once I've printed them to the table and the user has manipulated it I don't know how to get it back to a list of Dinner models.
Another solution could be to keep the Id's hidden in the table and then do another search in the DB with the Id's from the table (after the user has manipulated it). At least then I would get the result in the form of a list of Dinners. But this seems redundant to me.
Has anyone had a similar problem and how did you solve it?
You could put the table inside an html <form> and on each row in addition to the label you could have a hidden field:
#model IEnumerable<Dinner>
#using (Html.BeginForm())
{
<table>
<thead>
<tr>
<th>Prop1</th>
<th>Prop2</th>
<th>Prop3</th>
</tr>
</thead>
<tbody>
#Html.EditorForModel()
</tbody>
</table>
<input type="submit" value="Export to PDF" />
}
and in the editor template:
#model Dinner
<tr>
<td>
#Html.DisplayFor(x => x.Prop1)
#Html.HiddenFor(x => x.Prop1)
</td>
<td>
#Html.DisplayFor(x => x.Prop2)
#Html.HiddenFor(x => x.Prop2)
</td>
<td>
#Html.DisplayFor(x => x.Prop3)
#Html.HiddenFor(x => x.Prop3)
</td>
</tr>
Now this form could be submitted to the following controller action:
public ActionResult GeneratePdf(IEnumerable<Dinner> dinners)
{
byte[] pdf = ...
return File(pdf, "application/pdf", "dinners.pdf");
}
You may also checkout the following blog post for managing a variable length list in order to keep input field names in sync for the binder when adding/removing elements.
I have a partial view that is bound to an object Cart. Cart has a collection of CartLines. My view is below:
<tbody>
<% foreach (var line in Model.Lines) { %>
<tr>
<td align="center"><%=Html.CatalogImage(line.Product.DefaultImage, 80) %></td>
<td align="left">
<%=Html.ActionLink(line.Product.Name, "Product", "Catalog",
new { productId = line.Product.Id }, new { title = "View " + line.Product.Name })%>
</td>
<td align="right"><%= line.Product.Price.ToString("c")%></td>
<td align="center">
<%=Html.Hidden("lines[" + i + "].key", line.Product.Id) %>
<%=Html.TextBox("lines[" + i + "].value", line.Quantity, new { #class = "quantity" })%>
</td>
<td align="right"><%= (line.LineTotal).ToString("c")%></td>
<td>
<%using (Ajax.BeginForm("RemoveFromCart", "Cart",
new {ProductId = line.Product.Id, returnUrl = ViewData["returnUrl"]},
new AjaxOptions { UpdateTargetId="cart", LoadingElementId="loading" }))
{%>
<input type="image" src="<%=AppHelper.ImageUrl("delete.gif")%>" value="Remove item" />
<%} %>
</td>
</tr>
<% i++; } %>
</tbody>
There are two things to note. The first is that I am using a form per line for removing items.
The second is that I had attempted to allow users to change the quantity of line items and then click an update button to pass all the changes to the controller action:
// POST: /Cart/Update
[HttpPost]
public ActionResult Update(Cart cart, IDictionary<int,int> lines, string returnUrl)
{
foreach (var line in lines) {
Product p = _catalogService.GetProduct(line.Key);
cart.UpdateItem(p, line.Value);
}
if (Request.IsAjaxRequest())
return PartialView("Cart", cart);
else
return RedirectToAction("Index", new { returnUrl });
}
Note that I am using a dictionary since I am only concerned about the product and quantity. I don't really like the fact that I am having to retrieve the product again before calling cart.UpdateItem but I couldn't figure out how to pass the Product from the model to my action instead of the id.
The main problem however, is rather stupidly I wrapped the entire cart in a form so that I could post back the values and then spent a good hour wondering why things were not working correctly in IE - doh! nested forms
So I am stuck on how to get round this. I want the ability to remove items individually but allow a user to change item quantities and then pass all changes at once to the controller. I can't use links for my remove action as I would need to use javascript to force a post and everything must work without javascript enabled.
[Update]
Would a better solution be to allow updates on my custom model binder? This way I could make changes inside my view and post the cart object back to the controller - although I'm not sure whether this is possible with child collections (Cart.CartItems).
I've had a look on sites like Amazon and it would appear they wrap the entire cart in a form and both global update buttons and indidivual remove item buttons post back to the same action when javascript is disabled.
Any help would be appreciated.
Thanks,
Ben
There is only one way here and thats the ugly way. Have 1 form around everything.
Then in the action you have to check which button was pressed (you get the name of the button in the request).
It gets even more ugly with differences in firefox and ie. If you have a button pressed ie or firefox (Dont remember which one) not only sends the name of the pressed button, but also the location where the button was pressed.
You have more options if your solution can rely on JS enabled browsers. But thats another story.