in according with
http://mootools.net/more/docs/1.5.1/Interface/HtmlTable#HtmlTable
I have used push to add new rows, with some properties and positioning.
Here a snippet:
var table = new HtmlTable($('my_table_id'));
var target = "some code...";
table.push([
td_val1,
td_val2,
td_val3,
td_val4,
{
content: td_val5,
properties: {
'class': 'my_class'
}
},
td_val6,
],
(target !== undefined) ? {} : null,
(target !== undefined) ? target.parentNode : null,
(target !== undefined) ? 'td' : null,
(target !== undefined) ? 'after' : null
);
It work well with a empty table like (table.empty() before push):
<table id="my_table_id">
<thead>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
<th>Col4</th>
<th>Col5</th>
<th>Col6</th>
<th>Col7</th>
<th>Col8</th>
</tr>
</thead>
<tbody>
<tr class="no_result">
<td colspan="8">No results</td>
</tr>
</tbody>
</table>
But no effect on a pre fill table like:
<table id="my_table_id">
<thead>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
<th>Col4</th>
<th>Col5</th>
<th>Col6</th>
<th>Col7</th>
<th>Col8</th>
</tr>
</thead>
<tbody>
<tr>
<td>val1</td>
<td>val2</td>
<td>val3</td>
<td>val4</td>
<td>val5</td>
<td>val6</td>
<td>val7</td>
<td>val8</td>
</tr>
</tbody>
</table>
The push code is in a try/catch, but no excepetion raised.
I no focused the problem what is... Thanks so much for help.
Related
I am trying to pass a list of int Ids from one View to another on button click. I am able to hit the controller but its passing null.
Html:
#foreach (var business in Model.Businesses)
{
<tr>
<td>#business.Name</td>
<td>
<p>
#foreach (var bt in #business.BusinessTypes)
{
#bt.Name;
}
</p>
</td>
<td><button type="button" id="btnCalcVS"> Calculate Validator Score</button></td>
</tr>
}
JQUery:
<script type="text/javascript">
$(document).ready(function () {
var businessTypeIds = [];
$(document).on("click", "#btnCalcVS", function () {
$.ajax({
type: 'POST',
url: '/BusinessType/Index',
contentType: "application/json",
data: JSON.stringify( #foreach (var business in Model.Businesses)
{
#foreach (var bt in #business.BusinessTypes)
{
#bt.Id;
}
}),
success: function (data) {
alert("success");
},
error: function (e) {
alert(e);
}
});
});
});
</script>
Controller:
[HttpPost]
[Route("/BusinessType/Index")]
public IActionResult Index([FromBody] List<int> businessTypeIds)
{
//logic
}
As mentioned, I am hitting the controller but it's having null values. As can be seen from the HTML code, i have a list inside a list. (Business Types inside Businesses, so 2 many to many relationships)
Can someone tell me where i am going wrong?
You could try get the id from html and then pass it to controller.
<form method="post">
<table class="table">
<thead>
<tr>
<th>
#Html.DisplayNameFor(model => model.DenniPlan2[0].Id)
</th>
<th>
#Html.DisplayNameFor(model => model.DenniPlan2[0].CisloZakazky)
</th>
<th>
#Html.DisplayNameFor(model => model.DenniPlan2[0].CisloProduktu)
</th>
<th>
#Html.DisplayNameFor(model => model.DenniPlan2[0].Poradi)
</th>
<th></th>
</tr>
</thead>
<tbody>
#foreach (var item in Model.DenniPlan2)
{
<tr>
<td>
#Html.EditorFor(model => item.Id)
</td>
<td>
#Html.EditorFor(model => item.CisloZakazky)
</td>
<td>
#Html.EditorFor(model => item.CisloProduktu)
</td>
<td>
#Html.EditorFor(model => item.Poradi)
</td>
</tr>
}
</tbody>
</table>
<input type="button" id="btnCalcVS" value="submit" />
</form>
#section Scripts{
<script type="text/javascript">
$(document).ready(function () {
var businessTypeIds = [];
$("[id=item_Id]").each(function () {
businessTypeIds.push($(this).val());
});
console.log(businessTypeIds);
$(document).on("click", "#btnCalcVS", function () {
$.ajax({
type: 'POST',
url: '/BusinessType/Index',
contentType: "application/json",
data: JSON.stringify(businessTypeIds),
success: function (data) {
alert("success");
},
error: function (e) {
alert(e);
}
});
});
});
</script>
}
For this line $("[id=item_Id]").each(function () {, you could get the id value item_Id by check the generated html in the web browser.
I'm working on an application to track orders that are coming through a web application. The application won't sell products, and it's designed to track orders as they come in via phone.
I'm still new to ASP.NET MVC, so I'm still learning the ropes. I'm trying to use model binding to get this to work.
Here's my view model:
public class OrderDetailViewModel
{
public Order Order { get; set; }
public List<OrderLine> OrderLinesList { get; set; }
public OrderDetailViewModel()
{
this.Order = new Order();
List<OrderLine> OrderLines = new List<OrderLine>();
OrderLines = new List<OrderLine>();
OrderLines.Add(new OrderLine());
this.OrderLinesList = OrderLines;
}
public OrderDetailViewModel(Order order)
{
this.Order = order;
}
public string SalesRepName
{
get
{
ApplicationDbContext db = new ApplicationDbContext();
ApplicationUser Rep = db.Users.First(u => u.UserName == Order.SalesRep);
return Rep.FirstName + " " + Rep.LastName;
}
}
public IEnumerable<SelectListItem> CustomerList
{
get
{
var Db = new OrderContext();
var Customers = Db.Customers;
var AllCustomers = Customers.Select(c => new SelectListItem
{
Value = c.Id.ToString(),
Text = c.FirstName + " " + c.LastName
});
return AllCustomers;
}
}
public IEnumerable<SelectListItem> ProductList
{
get
{
var Db = new OrderContext();
var Products = Db.Products;
var AllProducts = Products.Select(p => new SelectListItem
{
Value = p.Id.ToString(),
Text = p.Name + ", " + p.Airshow + " - " + p.AirshowDate
});
return AllProducts;
}
}
}
Here's the data model for OrderLine:
public class OrderLine
{
[Key]
public int Id { get; set; }
[Required, Display(Name="Order Number")]
public int OrderId { get; set; }
[Required]
public int ProductId { get; set; }
[Required]
public int Quantity { get; set; }
[Required]
[DisplayFormat(ApplyFormatInEditMode=true, DataFormatString="{0:C}")]
public float Price { get; set; }
[Required, Display(Name="Tax Rate"), DisplayFormat(DataFormatString="{0:P}")]
public float TaxRate { get; set; }
public Nullable<float> Discount { get; set; }
public virtual Product Product { get; set; }
public virtual Order Order { get; set; }
}
And here's the View:
#model AirshowCouponsMvc.Models.OrderDetailViewModel
#{
ViewBag.Title = "Create";
}
<h2>Create</h2>
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
<h4>OrderDetailViewModel</h4>
<hr />
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<table class="table table-striped table-responsive table-hover">
<tr>
<th colspan="2">Order Date: #Html.Label(String.Format("{0:MMMM d, yyyy}", DateTime.Now))</th>
<th colspan="2">Customer: #Html.DropDownListFor(model => model.Order.CustomerId, Model.CustomerList)</th>
</tr>
<tr>
<th>
#Html.LabelFor(model => model.Order.OrderLines.FirstOrDefault().Product)
</th>
<th>
#Html.LabelFor(model => model.Order.OrderLines.FirstOrDefault().Quantity)
</th>
<th>
#Html.LabelFor(model => model.Order.OrderLines.FirstOrDefault().TaxRate)
</th>
<th>
#Html.HiddenFor(model => model.OrderLinesList)
</th>
</tr>
#foreach (AirshowCouponsMvc.Models.OrderLine item in Model.OrderLinesList)
{
<tr>
<td>
#Html.DropDownListFor(model => item.ProductId, Model.ProductList)
</td>
<td>
#Html.EditorFor(model => item.Quantity)
</td>
<td>
#Html.EditorFor(model => item.TaxRate)
</td>
<td>
#Html.HiddenFor(model => item.Price)
#Html.HiddenFor(model => item.OrderId)
#Html.HiddenFor(model => item.Id)
#Html.HiddenFor(model => item.Discount)
#Html.HiddenFor(model => item.Order)
#Html.HiddenFor(model => item.Product)
</td>
</tr>
}
<tr>
<td></td>
<td>#Html.ActionLink("Add line", "AddLine")</td>
<td>#if (Model.OrderLinesList.Count > 1) { #Html.ActionLink("Remove line", "RemoveLine") }</td>
</tr>
</table>
<div class="form-group">
<div class="col-md-offset-2 col-md-10 pull-right">
<input type="submit" value="Create" class="btn btn-default" />
</div>
</div>
</div>
}
<div>
#Html.ActionLink("Back to List", "Index")
</div>
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
}
Finally, here's the code for the controller:
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Create(OrderDetailViewModel model)
{
if (ModelState.IsValid)
{
OrderContext db = new OrderContext();
model.Order.OrderDate = DateTime.Now;
model.Order.SalesRep = User.Identity.Name;
db.Orders.Add(model.Order);
foreach (var line in model.Order.OrderLines)
{
line.Price = line.Product.Price;
line.Discount = OrderDetailViewModel.DiscountRate(line.Quantity);
line.OrderId = model.Order.Id;
db.OrderLines.Add(line);
}
return RedirectToAction("Index");
}
return View(model);
}
Yes, I know that the controller doesn't process the list. I had used the property from the data model, then I read that you need to define a List as a property in the view model. I was in the middle of changing it to this, but when I hit a break at the beginning of the Create action, I noticed that the OrderLinesList is null.
Also, I read that in older version of ASP.NET MVC (at least I haven't seen it in reference to more recent versions of ASP.NET MVC) that you have to use a for loop instead of a foreach loop. I tried going that route, but I still had the problem of a null List.
Here's the code that I tried as a for loop in the Create view. This was inserted in place of the foreach loop currently shown:
#for (int i = 0; i < Model.OrderLines.Count(); i++)
{
<tr>
<td>
#Html.DropDownListFor(model => model.OrderLines[i].ProductId, Model.ProductList)
</td>
<td>
#Html.EditorFor(model => model.OrderLines[i].Quantity)
</td>
<td>
#Html.EditorFor(model => model.OrderLines[i].TaxRate)
</td>
<td>
#Html.HiddenFor(model => model.OrderLines[i].Id)
#Html.HiddenFor(model => model.OrderLines[i].Price)
#Html.HiddenFor(model => model.OrderLines[i].Discount)
#Html.HiddenFor(model => model.OrderLines[i].OrderId)
#Html.HiddenFor(model => model.OrderLines[i].Order)
#Html.HiddenFor(model => model.OrderLines[i].Product)
</td>
</tr>
}
My end goal is to be able to track multiple line items for each order, preferably with model binding.
I've read through quite a few references to try to get this to work, including:
http://seesharpdeveloper.blogspot.com/2012/05/mvc-model-binding-to-list-of-complex.html
Model binding generic list is null in asp.net mvc
MVC3 Non-Sequential Indices and DefaultModelBinder
ASP.NET MVC 4 - for loop posts model collection properties but foreach does not
I've followed the advice in these, and it's not working for me.
I would appreciate any help on getting this fixed.
I'm new to ember.js which seems to be very interesting but hard/difficult to learn cause there are so many ways to solve a programming problem.
I try to code a very simple app but don't know how...
The app show at the top in a table all customers with an id received from a json file (testin local) and on click on the id there will be a json-request to receive detailed infos to the customer.
The problem is, that I receive detailed data but can't display it in a template under the overview template...
Can some one help me...!?
Greets
Christian [from germany]
Here's some code-snippets I got till now...
APP.JS
App.Search = Ember.Object.extend();
App.Search.reopenClass({
all: function() {
// console.log('Search.reopenClass all');
return $.getJSON("json/kunden_suchen.json").then(function(response) {
var items = [];
response.Konto.forEach(function(child) {
// console.log(child);
var item = new App.item();
item.set('content', child);
item.set('nr', child.nr);
item.set('name1', child.name1);
item.set('name2', child.name2);
item.set('plz', child.anschrift.plz);
item.set('anschrift', child.anschrift);
items.push(item);
});
return items;
});
}
});
App.SearchRoute = Ember.Route.extend({
model: function() {
// console.log('SearchRoute model');
return App.Search.all();
},
events: {
details: function() {
console.log('SearchRoute detail');
return App.Details.all();
}
}
});
App.Details= Ember.Object.extend();
App.Details.reopenClass({
all: function() {
// console.log('Search.reopenClass all');
// return $.getJSON("json/kunden_suchen.json").then(function(response) {
return $.getJSON("json/customer.json").then(function(response) {
var items = [];
response.Konto.forEach(function(child) {
console.log(child);
var item = new App.item();
item.set('content', child);
item.set('nr', child.nr);
items.push(item);
});
return items;
});
}
});
index.html
<script type="text/x-handlebars" data-template-name="items">
<div style="width: 80%; margin: auto;">
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>Name1</th>
<th>nr</th>
</tr>
</thead>
<tbody>
{{#each item in model}}
<tr class="info">
<td> {{ item.content.name1 }} </td>
<td> {{ item.content.id}} </td>
{{/each}}
</tbody>
</table>
</div>
</script>
Arrays in ember are augmented, e.g. it's prototype, so for your arrays to be binding aware and thus live updating your templates when the data asynchronously arrives you can't just use vanilla push(...) but pushObject(...) instead.
So try to change every occurrence of push to pushObject
...
items.pushObject(item);
...
Hope it helps.
Greets Alex [From Spain] :)
I have seen so many example of this problem but not as a list. Here's my code:
<div>
<form>
<p>You have asked for <span data-bind='text: gifts().length'> </span> gift(s)</p>
<input id='giftname' type='text'/><button data-bind='click: createGift'>Add Gift</button>
<table>
<thead>
<tr>
<th>Gift name</th>
<th>Pack</th>
<th>Price</th>
<th />
</tr>
</thead>
<tbody data-bind='foreach: gifts'>
<tr>
<td><input data-bind='value: name' readonly='readonly'/></td>
<td><select data-bind="options: packs,
optionsText: 'pack',
value: price" /></td>
<td><input data-bind="value: price ? price.packprice : 'unknown'" readonly="readonly"/></td>
<td><a href='#' data-bind='click: $root.removeGift'>Delete</a></td>
</tr>
</tbody>
</table>
<button data-bind='enable: gifts().length > 0' type='submit'>Submit</button>
</form>
</div>
<script type="text/javascript">
var GiftModel = function(gifts) {
var self = this;
self.gifts = ko.observableArray(gifts);
self.addGift = function(gift) {
var newGift = {
name: gift.name,
packs: gift.packs,
price: gift.price
};
self.gifts.push(newGift);
};
self.removeGift = function(gift) {
self.gifts.remove(gift);
};
self.createGift = function() {
var gname = $('#giftname').val();
//should be getting gift options from webservice
var newGift = {name: gname,
packs: [{pack:'Each', packprice: '2'}, {pack:'Dozen', packprice: '12'}], price: {pack:'', packprice: ''}};
self.addGift(newGift);
$('#giftname').val('');
};
};
var viewModel = new GiftModel([]);
ko.applyBindings(viewModel);
</script>
When I add gifts, it creates options of packs. Each pack has a certain price. My problem is just simple. How will I show the price on the next column for the selected pack of the gift line? Sorry im just new to knockoutjs. Thanks!
System will automatically update price after selecting package if you make it observable. I made a little refactoring to you code, now it works:
<div>
<form>
<p>You have asked for <span data-bind='text: gifts().length'> </span> gift(s)</p>
<input
id='giftname' type='text' data-bind='value: giftName' />
<button data-bind='click: createGift'>Add Gift</button>
<table>
<thead>
<tr>
<th>Gift name</th>
<th>Pack</th>
<th>Price</th>
<th />
</tr>
</thead>
<tbody data-bind='foreach: gifts'>
<tr>
<td>
<input data-bind='value: name' readonly='readonly' />
</td>
<td>
<select data-bind="options: packs,
optionsText: 'pack',
optionsValue: 'packprice',
value: price" />
</td>
<td>
<input data-bind="value: price() || 'unknown'" readonly="readonly"
/>
</td>
<td><a href='#' data-bind='click: $root.removeGift'>Delete</a>
</td>
</tr>
</tbody>
</table>
<button data-bind='enable: gifts().length > 0' type='submit'>Submit</button>
</form>
</div>
function GiftModel(name) {
var self = this;
self.name = ko.observable(name);
self.price = ko.observable();
self.packs = ko.observable([{
pack: 'Each',
packprice: '2'
}, {
pack: 'Dozen',
packprice: '12'
}]);
}
var ViewModel = function (gifts) {
var self = this;
self.gifts = ko.observableArray(gifts);
self.giftName = ko.observable();
self.removeGift = function (gift) {
self.gifts.remove(gift);
};
self.createGift = function () {
self.gifts.push(new GiftModel(self.giftName()));
};
};
var viewModel = new ViewModel([]);
ko.applyBindings(viewModel);
Here is working fiddle: http://jsfiddle.net/vyshniakov/pzJaH/
P.S. Don't use jQuery to get field value if you using knockout. It is much easier to do this with knockout.
Is there any jQuery NextUntil function for phpQuery?
In case I have this HTML structure:
<table id="m" width="100%">
<tbody>
<tr class="x" align="center"></tr>
<tr></tr>
<tr class="n"></tr>
<tr></tr>
<tr class="n"></tr>
<tr></tr>
<tr class="x" align="center"></tr>
<tr class="n"></tr>
<tr></tr>
<tr class="n"></tr>
<tr></tr>
<tr class="n"></tr>
<tr></tr>
</tbody>
</table>
All I want to do is getting the elements between "tr.x" using phpQuery. In jQuery we can do that with NextUntil() function.
I think this will work for your purposes:
$i = 0;
foreach($children as $child){
if($i == 2){ break; }
$i = (pq($child)->attr('class') == 'x') ? ($i + 1) : $i;
if($i == 0){ continue; }
echo pq($child)->text();
}
note: this will also exclude all tr elements before the first tr.x
for example if the html was..
<tbody>
<tr class="n">h</tr>
<tr class="x" align="center">a</tr>
<tr>b</tr>
<tr class="n">c</tr>
<tr>d</tr>
<tr class="n">e</tr>
<tr>f</tr>
<tr class="x" align="center">g</tr>
<tr class="n">h</tr>
<tr></tr>
<tr class="n"></tr>
<tr></tr>
<tr class="n"></tr>
<tr></tr>
</tbody>
the output would be
a
b
c
d
e
f
g
hope that helps