I'm having problems with a product list with filters, sorting and pagination. For SEO reasons, the product list page will be able to be visited, and correctly filtered and bound using server side code. Search engines will therefore be able to crawl it from links on the site. However, I also want the product list to be filterable on the client side for speed and usability. I'm therefore using knockout for this, but I don't want the client side binding to clash with the server side binding.
The flow for the page will be:
1. Page gets hit and ASP.NET binds the product list using query string parameters to set filtering options
2. An AJAX call is made from the client browser to request all products. Knockout will filter against these and bind them to the page.
3. Any change of filtering made in the browser will be managed by knockout, and the bound product list will update
The problem is between step #1 and #2. Technically, this is what happens:
1. The server binds the product list correctly, no issue here
2. Knockout is loaded by the browser with an empty array of products (it's not made the ajax call yet), so knockout takes control of the foreach binding and removes all the server bound products.
3. A very short (but noticeable) time later, the ajax call responds successfully and populates the knockout observable array, and the products are correctly bound once again unnecessarily (should be the same result as the server side binding).
The question is, how can I remove the disappearance of the products that happens in step #2? My thoughts are something along the lines of having a boolean that only allows the knockout foreach binding to be activated when it's true (after a manual interaction with the filtering, sorting or paging, which would mean that on page load, only the server side binding happens, and knockout managed any other client interaction. Is this possible?
I have a very basic JS fiddle of my problem here:
http://jsfiddle.net/ajbrun/hqpz3w6h/2/
Currently using mapping plugin to populate the observable. I've also tried making my own custom binding and using the beforeRemove event, but I haven't yet found a solution.
ko.mapping.fromJS([]);
Related
In cases where new items need to be added to a list via ajax, what is the biggest benefit of using something like Knockout.
So far what I have been doing is, on my view, use an editortemplate (with asscociated viewmodels) to render a list of items. Then to add a new item, I make a request to an action that loads a server-side viewmodel, and returns an EditorTemplte object which just gets appended to the list. Like this:
return Json(new { this.RenderPartialViewToString("MyEditorTemplate", model) });
The knockout way of doing things requires the implementation of another view model to display items, and then another template to display it. But doing it this way requires duplication of code since the view model has to be represented in 2 places: in the cserver side code and then the view for the knockout viewmodel. Isn't that bad practice?
Am I missing something, or understanding the purpose of knockout and MVVM?
The biggest benefit that you will see from Knockout is that you will not need to hit the server in order to add a new item to your list - everything happens client side. This has multiple benefits including:
You reduce load on your server.
You improve the end-user's experience.
You can keep multiple elements on the page up-to-date with your model without any server interactions.
Two great examples of this can be found at these Knockout tutorials:
Working with Lists and Collections
Loading and Saving Data
As far as duplicating code, if you take a look at those two tutorials, you'll notice that you don't need to duplicate code. For example:
Create a view to display your entire list.
To add a new item to the list, create a partial view that you load when you add a new item to the page - that partial view is bound to Knockout
When you submit the entire form, everything in that list will be submitted - including those items you added via Knockout.
Your ViewModel will be specific to your list item (you don't need to create an entire ViewModel for everything, necessarily). And your view is specific to a single list item.
Hope that's clear. Knockout is pretty straightforward and they have some great documentation and tutorials to help you move forward.
IMHO, the following is cleanest option for the architecture of knockout and asp mvc mixed together.
Have your ASP.net acting as a webservice and have knockout control all your view templating and logic.
Otherwise, yes there will be potential replication of viewmodels and having to refactor both front and backend code when you need to change your model.
I have 2 dropdown in a view. First drop down is automatically populated when the view get's loaded with the list of options. when an item is selected I would like to populate the dropdown # 2.
What's the best way of doing this?
A couple ways of doing this. You can either do an AJAX call (responding to the selection of a value in dropdown #1). The downside to this is that it requires a round-trip call to the server, then updating the value of dropdown #2 with the result.
The other way is to pre-load all possible values for dropdown #2 when the page first loads, and just change it in the browser with JavaScript as soon as the value is changed (rather than making a call all the way back to the server to get the values).
Either way, you're modifying the DOM, most likely, so it'll be some kind of JavaScript solution. Whether you choose AJAX, or preload and change it immediately will probably depend on how it affects the original page load speed, how much data you want to load onto the client, etc. If it's a relatively small number of options possible in dropdown #2, then pre-loading might be your best bet.
I was wondering if there is a way to maintain your list of options on a Select List in MVC 3. I am pretty new to MVC but in WebForms you could populate the DropDownList on the first load of the page and then the ViewState would maintain that list for all of the AutoPostBacks. This was nice because often, DropDownLists are populated by query to the database. I know that ViewState does not exist in MVC but is there a better way of repopulating the SelectList without having to hit the database during the request of every post?
You have several options here.
Your selected value will be posted back. With that in mind since you no longer have ViewState you ideally want to
Have your Repository (if you dont have one - create one. You simply ask the repository for the data and it controls the caching or loading) that you ask for the data in the drop down, cache the data and just simply request it again. Rebind your list (use DropDownFor)
Use MVCContrib's Html.Serialize to essentially ViewState it, however the cache is a bit cleaner and doesnt rely on data sent back and forth.
Also remember that after you post your data, if everything is 'good' you want to REDIRECT back to your "GET" action to reload the data and display to the client. This was an issue in web forms that sometime a user saw XYZ after postback but after a refresh saw YXX. Using the PRG pattern in MVC posts-redirects-gets to load up fresh data.
After your post you should generally only redisplay the data if there was a validation error, otherwise redirect to a get method.
Your controller receives the value on postback. You have to place that value back in the model to tell the view what the selected value is.
I'm trying to build a fairly complex form which as a couple of cascading selects - i.e. the user selects a value in one combo and the other combo is populated according to their first selection.
I've followed a tutorial on how to handle the cascading but the problem I have is that I now have nested forms (the code in the tutorial uses forms inside partial views to POST to a controller action to load the 2nd combo). I have my main form on which I want to collect the input values but also the nexted forms for the cascading select boxes. The problem I have is that the cascading selection doesn't post to the correct controller action, but instead posts to my main (outer) form's action.
I understand this is the correct behaviour for a browser (as nested forms apparently aren't supported) but what's the correct way to implement this?
The correct way is to only have one form. Then use AJAX to populate the cascading drop down list. The are 100s of examples online how to do this with JSON
use this to have multiple submit buttons on one form which each have different controller actions to post to:
http://iwayneo.blogspot.co.uk/2013/10/aspnet-mvc-action-selector-with-list.html
as for cascading stuff - i would focus on populating these without Ajax 1st - then you can worry about adding this sort of flare - if it doesn't work without JS anyway you're in a bad place.
I would have the 1st dropdown populated when you initially load the form and have a "next" button to populate the next dropdown in the cascade. this submit can use the method above to post to an action which then populates the second data set based on the selection of the 1st dropdown.
make sense?
Then how you ajax that after the point is up to you but you'll have a very solid foundation to build up stuff like that as you will have it working in the minimal tech scenario.
w://
i am asking myself if it is possible to somehow create a dynamic gui in jsp. So that i could have something like a dropdown menue for the country and based on what i have selected in that window a dropdown menue for cities, without reloading the jsp page. Or, in a dialog with multiple input lines, to be able to add an additional line with a button, again without reloading the whole page. In the first case the cities information would be in a database, in the second the information provided would be stored at the end in a database, so i cant just use java script (and don't really want to).
At a minimum, you would need to utilize JavaScript to implement what you want. Most would implement it the way Tim describes in his first paragraph.
Set up two .JSP's:
The first contains your main form with the country drop-down menu. Some JavaScript on the first .JSP triggers an AJAX request to a second .JSP. The second .JSP accepts a country-ID parameter and uses a servlet to query your DB for a list of cities, then renders that data. Once the request returns, the JavaScript in your first .JSP inserts the list of cities into a new drop-down menu.
This may seem complex, but several JavaScript libraries exist to assist you with this task. Look into jQuery or Dojo.
To update the page without posting back the whole page, the browser would use ajax. Using a database does not eliminate ajax. Ajax calls server code that digs your data out of the database.
Regardless, to do what you want, without writing your own javascript, look at GWT (Google Web Toolkit). You right ajax applications in Java that generates the javascript for you.