Using a EditorFor template and trying to create a table, how can I get only one header row instead of one for each item of the collection?
Being the viewmodel
public class CashbackOfferViewModel
{
public List<SingleCashbackOfferViewModel> Offers { get; set; }
}
In the view I have
#Html.DisplayFor(m => m.Offers)
And the display template is
#using LMS.MVC.Infrastructure
#model LMS.MVC.Areas.Finance.Models.SingleCashbackOfferViewModel
<table class="dataGrid">
<thead>
<tr class="headerRow">
<th>#Html.LabelFor(m => m.CampaignName)</th>
<th>#Html.LabelFor(m => m.PersonId)</th>
<th>#Html.LabelFor(m => m.FullName)</ths>
</tr>
</thead>
<tbody>
<tr>
<td>#Html.DisplayFor(m => m.CampaignName)</td>
<td>#Html.DisplayFor(m => m.PersonId)</td>
<td>#Html.DisplayFor(m => m.FullName)</td>
</tr>
</tbody>
</table>
One solution can be:
Create display template for your whole model
#using LMS.MVC.Infrastructure
#model LMS.MVC.Areas.Finance.Models.CashbackOfferViewModel
<table class="dataGrid">
<thead>
<tr class="headerRow">
<th>CampaignName</th>
<th>PersonId</th>
<th>FullName</ths>
</tr>
</thead>
<tbody>
#for(int i = 0; i < Model.Offers.Count; ++i)
{
<tr>
<td>#Html.DisplayFor(m => m.Offers[i].CampaignName)</td>
<td>#Html.DisplayFor(m => m.Offers[i].PersonId)</td>
<td>#Html.DisplayFor(m => m.Offers[i].FullName)</td>
</tr>
}
</tbody>
</table>
Also i think in your code, your model must be List of SingleCashbackOfferViewModel and you can easily iterate over the list and create table
Related
This question already has answers here:
Post an HTML Table to ADO.NET DataTable
(2 answers)
Closed 6 years ago.
Hi I want to grab all user modify data.
My question is why controller can't receive the model data from View in my project.
Please explain why this error was caused and how to solve it.
Models:
public class ShoppingCart
{
public List<ShoppingCartItemModel> items = new List<ShoppingCartItemModel>();
public IEnumerable<ShoppingCartItemModel> Items
{
get { return items; }
}
}
public class ShoppingCartItemModel
{
public Product Product
{
get;
set;
}
public int Quantity { get; set; }
}
Controller
[HttpPost]
public RedirectToRouteResult EditFromCart(ShoppingCart MyModel)
{
ShoppingCart cart = GetCart();
foreach (var CartItem in cart.items)
{
foreach (var ReceiveModelItem in MyModel.items)
{
if (CartItem.Product.ProductID == ReceiveModelItem.Product.ProductID)
{
CartItem.Quantity = ReceiveModelItem.Quantity;
}
}
}
return RedirectToAction("Index", "ShoppingCart");
}
View
#model ShoppingCart
#{
ViewBag.Title = "購物車內容";
}
<h2>Index</h2>
<table class="table">
<thead>
<tr>
<th>
Quantity
</th>
<th>
Item
</th>
<th class="text-right">
Price
</th>
<th class="text-right">
Subtotal
</th>
</tr>
</thead>
<tbody>
#using (Html.BeginForm("EditFromCart", "ShoppingCart", FormMethod.Post))
{
foreach (var item in Model.items)
{
<tr>
<td class="text-center">
#item.Product.ProductName
</td>
<td class="text-center">
#item.Product.Price.ToString("c")
</td>
<td class="text-center">
#( (item.Quantity * item.Product.Price).ToString("c"))
</td>
<td class="text-left">
#Html.EditorFor(model => item.Quantity, null, "UserInputQuantity")
#Html.Hidden("ProductId", item.Product.ProductID)
</td>
</tr>
}
<tr>
<td colspan="3">
<input class="btn btn-warning" type="submit" value="Edit">
</td>
</tr>
}
</tbody>
</table>
You must explicitly create a hidden input for each property in your complex object that you want to be bound. IEnumerables and binding don't play very nicely directly out of the box - it looks like MVC has better base support for IList<> and arrays, but you'll still have to enumerate the collection and create hidden inputs for each item. Have a look at this link. So, ideally your view should be:
#model ShoppingCart
#{
ViewBag.Title = "購物車內容";
}
<h2>Index</h2>
<table class="table">
<thead>
<tr>
<th>
Quantity
</th>
<th>
Item
</th>
<th class="text-right">
Price
</th>
<th class="text-right">
Subtotal
</th>
</tr>
</thead>
<tbody>
#using (Html.BeginForm("EditFromCart", "ShoppingCart", FormMethod.Post))
{
for (int i = 0; i < Model.items.Count(); ++i)
{
<tr>
<td class="text-center">
#Model.items[i].Product.ProductName
</td>
<td class="text-center">
#Model.items[i].Product.Price.ToString("c")
</td>
<td class="text-center">
#( (Model.items[i].Quantity * Model.items[i].Product.Price).ToString("c"))
</td>
<td class="text-left">
#Html.EditorFor(model => Model.items[i].Quantity)
#Html.HiddenFor(model => Model.items[i].Product.ProductID)
#Html.HiddenFor(model => Model.items[i].Product.ProductName)
#Html.HiddenFor(model => Model.items[i].Product.Price)
</td>
</tr>
}
<tr>
<td colspan="3">
<input class="btn btn-warning" type="submit" value="Edit">
</td>
</tr>
}
</tbody>
</table>
Names are not correctly set for your text and hidden inputs:
#Html.EditorFor(model => item.Quantity, null, "UserInputQuantity")
#Html.Hidden("ProductId", item.Product.ProductID)
If you inspect elements you can see names are UserInputQuantity and ProductId, but they should be
items[i].Quantity and items[i].Product.ProductID respectively.
You can take a look at this link:
MVC Model binding of complex objects
I have following view:
#model StockItemDetailModel
#using (Html.BeginForm("EditDetails", "StockItem"))
{
<div class="ItemDetails">
<table class="datagrid">
<tr>
<th colspan="3">#Model.StockItemPropertiesCaption</th>
</tr>
<tr>
<td class="label">#Model.StoreLabel</td>
<td class="value">#Html.DisplayFor(item => item.Store)</td>
<td></td>
</tr>
<tr>
<td class="label">#Model.BuildingLabel</td>
<td class="value">#Html.DevExpress().TextBoxFor(model => model.Building).GetHtml()</td>
<td class="validationError">#Html.ValidationMessageFor(model => model.Building)</td>
</tr>
...
<tr>
<td colspan="3">#Html.EditorFor(model => model.AmountModel, "Amounts")</td>
> </tr>
<tr>
<td colspan="3" class="validationError">#Html.ValidationMessageFor(model => model.AmountModel)</td>
</tr>
<tr />
</table>
</div>
<br />
<input type="submit" class="button" value="#Model.SaveButtonLabel" />
}
The partial View "Amounts" is as follows:
#model AmountModel
<table>
<tr>
<td class="label">#Model.AmountLabel</td>
<td class="value">
#Html.DevExpress().SpinEditFor(model => model.DenormalizedNetAmount,
settings =>
{
settings.Name = "DenormalizedNetAmount";
settings.Width = 153;
settings.Properties.DisplayFormatString = #"0.0,0";
settings.Number = 0;
}).GetHtml()
</td>
<td class="value">
#Html.DevExpress().ComboBoxFor(model => model.NetAmountUnit,
settings =>
{
settings.Name = "NetAmountUnit";
settings.Width = 60;
}).BindList(args => this.Model.AllUnits, args => this.Model.AllUnits).GetHtml()
</td>
</tr>
...
</table>
This is the AmountModel:
public class AmountModel
{
public decimal DenormalizedNetAmount { get; set; }
public string NetAmountUnit { get; set; }
...
public string AmountLabel
{
get { return i18n.StockItemDetailModel_AmountLabel; }
}
...
}
But the values of the input fields are not in the model in the Controller created by the model binder.
Why does the model binder not recognize the values in the editor template?
When I passed the FormCollection the values where correctly passed under the names "AmountModel.~"
public ActionResult EditDetails(FormCollection collection)
{
var netamount = collection["AmountModel.DenormalizedNetAmount"]; //correct value!
...
}
Do NOT specify the Name property when using the strong-typed (***For) helpers.
See the MVC Data Editors - Model Binding and Editing learning resource on the DevExpress forum.
I would like to take the model as in view?
#model Dictionary<string,List<string>>
<table width="60%">
<tr class="ui-widget-header">
<td>
___Category___
</td>
<td>
___Detail___
</td>
</tr>
<tr>
<td>
#Model.Key
</td>
<td>
#Model.Count
</td>
</tr>
</table>
How could I do this?
here is my view with razor syntax.
Please help me.
Yes you can do it. Below is the sample
#model Dictionary<string,List<string>>
#foreach (KeyValuePair<string, List<string>> pair in Model)
{
<label> #pair.Key</label>
<div>
#foreach(string data in #pair.Value)
{
<span>#data </span>
}
</div>
}
Add #model Dictionary<string,List<string>> to your view (assuming Razor is used).
#model Dictionary<string, List<string>>
#foreach (var group in Model)
{
<h2>#group.Key</h2>
<table>
<tr>
<th>Title</th>
</tr>
#foreach (var aString in group.Value){
<tr>
<td>#aString </td>
</tr>
}
</table>
}
It does not seem to like #{index++;} , I have tried
#{int index++}, #(index++), #(int index++;)
This code didn't throw errors when used with MVC 2.
Here's it's giving me
ambiguity warnings about index.
#model CartTest.Models.Cart
#{
ViewBag.Title = "Index";
}
<h2>Cart Index</h2>
<table width="80%" align="center">
<thead><tr>
<th align="center">Quantity</th>
<th align="left">Item</th>
<th align="right">Price</th>
<th align="right">Subtotal</th>
</tr></thead>
<tbody>
#{int index = 0;}
#foreach (var line in Model.Lines)
{
<tr>
#Html.Hidden("Lines.Index", index);
<td align="center">#Html.TextBox("Lines[" + index + "].Quantity",line.Quantity)</td>
<td align="left">#line.Product.Name</td>
<td align="right">#line.Product.Price</td>
<td align="right">#(line.Quantity * line.Product.Price)</td>
<td align="right">#Html.ActionLink("Remove", "RemoveItem", new { productId = line.Product.ProductID }, null)</td>
</tr>
#{index++;}
}
</tbody>
<tfoot>
</tfoot>
</table>
Try like this:
#{int index = 0;}
#foreach (var line in Model.Lines)
{
<tr>
...
</tr>
index++;
}
Now that's just to make the Razor compiler happy. It's not a solution I recommend. The real solution I would recommend you is to use editor templates:
<table width="80%" align="center">
<thead>
<tr>
<th align="center">Quantity</th>
<th align="left">Item</th>
<th align="right">Price</th>
<th align="right">Subtotal</th>
</tr>
</thead>
<tbody>
#Html.EditorFor(x => x.Lines)
</tbody>
<tfoot>
</tfoot>
</table>
and inside the corresponding editor template of a Line (~/Views/Shared/EditorTemplates/LineViewModel.cshtml) which will be rendered for each element of the Line collection:
#model LineViewModel
<td align="center">
#Html.TextBoxFor(x => x.Quantity)
</td>
<td align="left">
#Html.DisplayFor(x => x.Product.Name)
</td>
<td align="right">
#Html.DisplayFor(x => x.Product.Price)
</td>
<td align="right">
#Html.DisplayFor(x => x.CalculatedTotalPrice)
</td>
<td align="right">
#Html.ActionLink("Remove", "RemoveItem", new { productId = Model.Product.ProductID }, null)
</td>
See, no more ugly loops, weakly typed helpers, dealing with some indexes, etc... Everything works by conventions.
I am new at MVC asp .net.
I have a grid in which I am adding rows.
Now I want to perform mulitple rows insertion in a table at once.
How can I do that. SO multiple rows will be added in MVC.
Any help would be appericiated.
You want to learn how to ModelBind to a Collection. There are many answers here already for this technique.
https://stackoverflow.com/search?q=model+binding+to+a+collection
http://haacked.com/archive/2008/10/23/model-binding-to-a-list.aspx
Do you mean something like this?.
<table class="table" style="vertical-align: middle;">
<thead>
<tr>
<th>
#Html.DisplayNameFor(model => model.title)
</th>
<th style="text-align: center;">
#Html.DisplayNameFor(model => model.imgAr)
</th>
<th>
#Html.DisplayNameFor(model => model.created)
</th>
<th></th>
</tr>
</thead>
<tbody id="tblOfContent">
#foreach (var item in Model)
{
<tr>
<td>
#Html.DisplayFor(modelItem => item.title)
</td>
<td style="text-align: center;">
<img src="~/newsImages/#item.imgAr" class="img-thumbnail" />
</td>
<td>
#item.created.ToShortDateString()
</td>
<td>
#Html.ActionLink("Details", "Edit", new { id = item.id }) |
#Html.ActionLink("Details", "Details", new { id = item.id })
</td>
</tr>
}
</tbody>
</table>
and in the Controller something like this:
public ActionResult Index()
{
return View(newsService.GetAll().OrderByDescending(x => x.created));
}