We Keep Coding

MVC5 Easiest way to search items and add to list using AJAX?

I'm trying to build a shopping cart type function where an order header is shown and the user can search and add items to a list.
I would prefer this be done using ajax to reduce postback time.
There are 3 table elements, Items, Order, Order_Items
So essentially a searchable list with add button/links on the left of the screen and a list area on the right which is then to be saved when alterations are finished?
is this best achieved with partial views passing to and fro? or using a view model all on one page that updates each others elements? or by another way that's easier?
Hoping someone can point me in the right direction and optimistically hoping for some example code to show its implementation.
Thanks in advance.

Found a great Ajax, MVC Partial view example here, covered everything I was looking for, hope it can help someone else.
Using Ajax and Jquery in MVC and Partial Views

AngularJS ng-table with pagination: no rows displayed

I'm trying to use ng-table (http://bazalt-cms.com/ng-table/) in a web app based onto Typescript and AngularJS. I just have to display in a paged table some 50-500 items at most, all loaded at once from the server; so I'll what I need is client-side paging of my controller's data. Yet, no row is displayed when my data are loaded, unless I totally disable paging.
I made a plunkr which reproduces the issue:
http://plnkr.co/edit/0hCSMm03L8iHwePccm7x?p=preview
As I'm using Typescript (but there is no definition for this lib right now), I've shaped my example code like a typical outcome of the TS compiler, but apart from that, I followed the paging example in the ng-table website. Just click the button to fill the controller's data.
Update: by examining the ng-table source I managed to force the refresh by calling tableParams.total(...) and then tableParams.reload() after I have filled my data array; yet, there is no trace of this code in the samples so I'm feeling a bit wrong about this.

I used that too (i.e. update the total and reload the table). I reasoned that I had created an instance of a table and then I needed to update the instance with the new information. hth

Using an underscore template with a Backbone collection

I am building a large HTML form using Backbone. Each form field is an instance of a Backbone model called Field. I have a Backbone collection called Fields that fetches a JSON file and instantiates all the form fields.
Here's my issue: When I render the collection of form fields, I don't simply want a uniform list of form fields. For example, most backbone tutorials online show you how to render collections by wrapping each model's view in an li with the collection element being a ul.
Rather, I have an HTML template that is broken up into sections like so:
I'd like the "month" and "year" fields to be in one div while the other fields go into their respective divs. The fields will be styled differently from one another using CSS. Is it possible to pass a large underscore template to a collection and have it print its model instances into the appropriate places?
Is this a use case for something like Marionette.Region?
Any thoughts are appreciated!

I see 2 main approaches for your problem:
The simpler way: Make your form be one big itemView and pass it a form model with a fields property (which would be your collection). Then, within the view, you need to iterate and generate the html.
The cleaner way: Use a layout for your form, and render additional layouts into the "time", "location", etc. regions (as suggested by Lilith). For example, the "time" layout would contain the "month" and "year" views. The "month" view, in turn, would be a collection view rendering each option in the collection into an option for the select tag.
Although the first solutions tends to be simpler to implement (because it's closer to traditional stateless web development), the second one will be easier to manage. You'll be able to register event handlers on each view (e.g. select tag) without naming collisions, and since the form's complexity will be broken down into individual pieces, it will be easier to manage down the road.

I'm not sure I totally understand you question, but I think you may need more info in your field model. For example you could include a group property in the field model and then render all fields form the same group in its own div.
Is this what you're trying to do?

I would choose another approach:
Break up the one template into at least different templates (Time, Location, VehicleInfo), because, these are three different topics, which I would handle in separate views.
After that breaking up the Time-View into a Month and a Year view and so on.
Accordingly each subview has its own model with values to render its HTML. I see no sense in using a Collection here - since you have heterogenous 'fields' / Models.
After that I would use something like a form backing Model, which represents the current state of the form. So the implementation of a formView as a super view and the other views as nested views would be a good choice.
var FormView = new Backbone.View.extend({
initialize: function(){
//initialize all subviews
},
events:{
"change":"formChanged"
}
formChanged:function(element){
//update formBackingObject aka this.model
}
});
Then you have a clear separation for all of your views and one model to represent the state of the current selections.

I think you can make use of Marionette CollectionView. With collection view, you can specify different view for each item in the collection. See the documentation;
https://github.com/marionettejs/backbone.marionette/blob/master/docs/marionette.collectionview.md#collectionviews-itemview
If you want control over where items will be rendered, you can override appendHtml to indicate how itemView's will be appended to collectionView

In Backbone.js should I make static lists collections or just hardcode them into the UI?

I have a web app that I want to use Backbone.js for. I have a list of common "items" which will not be edited by the user directly. This will appear essentially as a menu to choose from on the left side of the screen. When a user selects an item an "item instance" will be generated which they will customize.
I'm just wondering if this static list of items/templates should be handled by Backbone.js or if it should just be hardcoded. The value in using a Backbone Collection/Models for the list is that each item will have another Backbone.Model property that will be instantiated when that item is selected from the list. e.g. the HTMLImageChoice item, when selected, will result in an HTMLImage being instantiated.
I'm having trouble finding easy to follow examples of Backbone.js which are not very contrived.

Collections in backbone are collections of models. It seems like you are just talking about a hardcoded array of strings, which are totally not a model. Maybe you would want to hang that array off of a model as a property, but that is as close to backbone as it will get.

backbone.js - views within views and managing events

What's a good way to organize views? Let's say I have a div that will contain a view from an admin panel perspective of users - there will be a list of users along with options to choose how many to display at a time, sorting options, what page to be on, filters, etc...
Would I want an outside view that contained everything except the table and data? And then an inside view that contains the table (along with the data)? And would the pagination have it's own view? And how would the pagination view use the click event to update the user view? I'm just confused on how to organize the views while still being able to have different events trigger other views to render() / collections to fetch().
So a basic hierarchy would look like:
- User View
- Table
- List of Users
- Pagination
- List of available numbers to click
- Filters
- Possible filters to apply to the data
Yet clicking a filter or number in the pagination should be able to get the collection to fetch() new data and refresh the view;

I second dogenpunk. I would have one User Collection / View. Because the whole hierarchy you describe above is about that one User Collection. All functions of it manipulate that collection and then you rerender the User View.
You could have a second User View, one single User, tied to a Model if you want to apply changes to the server for that user only.

I try to reflect my server-side MVC structure as much as I can.
Everything that can be put into a plugin, I do so, and then I keep those plugins in a separate location to the controllers which call the plugins. So in your case, the table view for the list of users would be held either in a table plugin, or possibly in the 'users' module if it was code I was really only going to use once.
If I need to override the output of the plugin, then I store the view inside the module folder.
What I try to avoid doing is storing views purely by the type of HTML inside them, so I wouldn't store a module's view as 'table' because that will get confusing if later it changes to a list. Obviously, if I have a 'table' plugin then the view for that is going to be a table, but then changing the JavaScript view means just changing the plugin call from 'table' to 'list' anyway.

My 2 cents to your original question. If you really want to make it a MV*, a pagination would be a view, your table would be a view. And have your collection to send out ( trigger ) events to change your view. And another questions I would ask myself also is what will be affected when my collection changes? For example, in your case, I don't think the collection changes will affect your userView directly, it only affects the Table and Pagination.