I am in need of hopefully an example for a drop down list search function. Not sure what the correct terminology would be.
Needed:
Two drop down lists then a submit button. First being of Country, then the second being of Department. So say you picked France and HR, it would display a contact person below.
Is there any examples of something of this sort? Would be nice have code in CS then have my end user be able to add and link the two together in Sitecore. So they could add Countries they would like, departments they would like, then the respected person linked to the two fields.
So if I understand you correctly, you're taking multiple inputs and producing results for that combination of them. I'll make some assumptions and try to give you enough direction to get started. This will take a bit of explaining.
Starting from scratch, we've got a Contact template that has, at least, a Country and Department field. You'll need templates and lists of items for each of those two fields. You could get these values from another source, but let's just keep it simple for now and use lists of items. This sounds hierarchical, so I'd suggest you define your departments as children of your Country items. What other fields are on these items doesn't really matter at the moment.
Next, you'll want to communicate the end-user's selections back to your Sitecore instance. I'll assume that you're using Sitecore MVC, but the same principles apply for web forms.
Set up a controller to parse your parameters, country and department, and a form in your View with <select> elements populated from the lists of countries and departments. When the country selector is changed, you can either reload the page with the value set as a request parameter or use AJAX to ask your controller directly. If you structure the model so that it doesn't rely on the rendering context, you can submit your form results to /api/sitecore/{controllername}/{actionname}?country={values}&department={values} and get the data that way. (If you want an example of the kind of JS you need to do this I can provide one.) You could disable or hide the Department <select> until this is selected so that users don't get confused, then use the same technique to also set the Department parameter/submit that value. Once those two values are in the request, you have enough information to get a list or single Contact and display that information, also using the same technique.
If you have a more specific question about a particular aspect of this process I'd be happy to explain.
Related
So I have a Model named Parties, that contains a List of Instructors.
I want to create TextBoxFor's based on the properties of the Instructor object.
When I do #Html.TextBoxFor(x => x.Model.Instructors...) I cant get the properties of the Instructor object without using a Select with Linq. If I use linq, I need to dynamically get the specific instructor I want. The information I need to get this instructor is based on a textbox somewhere else on the form, but how could I dynamically get the value of another textbox to satisfy the linq expression?
Depends on what you are trying to achieve. It sounds (vaguely) like what you want is more of a MVVM architecture there, in which case you should be looking at angular or similar. Maybe I misunderstood what you want.
TextboxFor can't generate a textbox for a List of objects. What would you expect it to generate? A list of textboxes? If all you want is a text box that has some unique name, then just pick an instance of one, like #Html.TextBoxFor(x=>x.Model.Instructors.FirstOrDefault().something)
If by "dynamically get the specific instructor I want" means that they will pick it on the client side and you can edit a current existing record, then you probably should be sending down the list of instructors into a javascript array and then writing some client side code to pick it for you. Alternatively, you can make an AJAX call if the list of instructors would be too large. Why would you base it on a Textbox value, shouldn't it be based on a dropdown/select value?
I apologize for the crappy title, I wasn't quite sure how to summarize what I'm trying to do.
My scenario:
I am refactoring an existing WinForms application to WPF and MVVM. I'm currently working on a module that provides search functionality for a database comprised of many different tables such as Contact, User, Case, Product, etc. In code-behind there are classes which provide an Object for each. I have written wrapper classes for each of the searchable table Objects that expose only the properties a user would want/need to see in the search results for each type of Object, for binding to a DataGrid.
Once these search results exist, they need to be displayed in a combination of Tab Controls and Data Grids, like so:
Because of some use cases, I need to be able to create an individual display Tab+DataGrid for the results of every single search that is performed. I cannot have a single tab for each type of search that is shown/hidden as needed.
I'm not sure how to proceed from where I currently am to the goal pictured and described above. Thanks for any help anyone can provide.
Not sure I entirely understand your question, but it looks to me that it might be a candidate for datatemplateselector.
Basically, you use an ItemsControl bound to your result collection and then - using a datatemplateselector - you swap in the appropriate template to display the item based upon a code inspection.
That will let you present all the results in a single list.
If you want to display your results in a tabs, I would present a collection of each result type in your viewmodel. So you have a Users collection and a seperate Products collection. Then you can bind individual data grids to each template.
If you want to then hide the tabs when no results are present, add a data trigger using the expression.interactivity namespace to trigger the visibility of each tab page based on its respective collection count.
One more thing, if you want to create tab items dynamically, i.e. One tab for each search - the tab control has an ItemSource property. If you group each search result into an object an expose an observable collection of that object, you can bind that to your tab control and have it create tab items for each search result. Just make that object contain a collection of actual results and you should be able to create a itemscontrol as mentioned here already.
Sorry if this appears a bit of a mind dump, but like I said - not sure if I entirely get the question :)
Rather then chuck a load of code snippets in, there a plenty of samples just a google away if anything sounds helpful.
Let's say I have a very huge model that contains lists and even those lists can have objects that contain other lists. I want to create an edit form for that in MVC4 (or 5) without AJAX.
So I figured that the first part of that is to store the entire object on the client side in hidden fields. List binding works like a charm, see http://haacked.com/archive/2008/10/23/model-binding-to-a-list.aspx/. Now the complete roundtrip is working, I can push out the entire object to the client in bound hidden fields, it gets back to me upon submit and the posted hidden fields are put into the complex object, nested lists and everything included.
Lists or other objects should become editable based on some action. One scenario is where a single object or list items are displayed as non-editable, and when the user clicks it, it becomes editable in-place, so for example the cells in a grid become textboxes. Another scenario is where a single object or list items are not shown at all, and when the user clicks a button, a popup window appears with the text input fields.
Is there a library or a proven way to do this?
Is there a library or a proven way to do this?
Exactly what for? Displaying a massive model in view for editing? Making a grid editable? Or popping up the records of a grid for editing?
Basically, I think you are overcomplicating this matter a bit. If you apply some separation of concerns here you will find out how easy everything becomes and in fact it's super easy to implement and most importantly much easier to maintain and scale.
Starting from the model, let's assume you've got this all-mighty massive model named Company with the following properties:
CompanyID (int)
CompanyName (string)
CompanyLegalID (string)
CompanyRegistrationNumber (string)
ContactInfo (ContactInfo class)
HeadQuaterAddress ('Address` class)
Branches (List of Branch classes)
Employees (List of Employee classes)
And the list of properties could go on and on forever.It would be easier, super easier to break down this model into smaller models. Make a CompanyModel model with the following properties...
CompanyID (int)
CompanyName (string)
CompanyLegalID (string)
CompanyRegistrationNumber (string)
Then make a CompanyContactInfo model and so on. Getting the idea? Again, separation of concerns simplifies matters a lot. Then, create action methods and views to read/edit these models.
Now for lists properties of the massive object you'd like to do the same. For example, for the list of Employee objects it'd be easier to create a CompanyEmployeesModel model with the following properties:
CompanyId (int)
Employees (List of EmployeeModel classes)
Then create a controller action method to show the list of employees...
public ActionResult EmployeeList(int companyId)
{
var employees = BusinessLogic.Get_Me_Employees_For(companyId);
CompanyEmployeesModel model = new CompanyEmployeesModel();
model.CompanyId = companyId;
model.Employees = employees;
return View(model);
}
Hope you are getting the idea so far. In the view simply create a css-formatted table to show the employee list, razor makes it super simple...
<table class="grid">
<tr>
<th></th>
<th>
Name
</th>
<th>
Phone
</th>
</tr>
#{
var alt = false;
foreach (var emp in Model.Employees)
{
<tr class="#(alt ? "alt" : string.Empty)">
<td class="cmd">
#ActionLink("edit", "Edit", "Employees", new { empId = emp.Id}, null)
</td>
<td>#emp.Name</td>
<td>#emp.Phone</td>
</tr>
alt = !alt;
}
}
</table>
Notice that the first column of the table has link "edit" that takes the user to the Edit action method of the Employee controller where obviously you will do exactly the same you've been doing with smaller models. All I'm doing is separating the logic, models, view and making them simpler, easier to maintain and easier to understand.
Hope it all makes sense to you
Jeditable http://www.appelsiini.net/projects/jeditable which does the same thing and is easier to implement
The very huge model is a business requirement, it has to be edited as one entity, preferably on one page, it makes perfect sense but I can't talk about it. I originally thought (or hoped) there was an easy to describe solution, but apparently, this isn't a common thing in MVC. It would be very different with AJAX, it has its pros and cons. For sure it's more widely used, hence more documented. Without AJAX, there is only one round-trip, which is a bit bigger, but it's a smoother user experience. Anyway, here's a rough guide how to do it the way I asked.
The client-server roundtrip is handled by MVC with (mostly) hidden fields as I said in the question. Later it can be optimized by encoding some stuff in JSON instead of hidden fields, it doesn't affect the rest of the system.
Normal fields are stored in normal editors, not hidden fields. It makes no difference from the perspective of the client-server roundtrip. So these can be edited in place.
Grid rendering is also easy. Server-side MVC grids are suboptimal in this case, because they would send redundant data to the client side. Luckily there are a lot more client-side grid solutions, they are by nature server platform independent. Just collect the required data from the hidden fields and use a JavaScript grid library to build a grid from it when the page loads. Naturally, as I said, the lists can contain lots of data and other nested lists, but in this simple grid, a few necessary columns must be selected, no problem with that.
Now comes the interesting part, how to edit a grid row with all that complex data. Let's say I have a list of Persons in my model, and they have a list of Addresses. There is a Person grid, and when you click on a row, you want the end user to be able to edit additional data for a Person and also his Addresses.
First of all, the Person editor template has to be sent to the client side in advance. We need to put that editor template inside our view, and hide it. Whenever the user wants to edit a person, we create a JS dialog with the contents of that editor template.
We need to bind the Person editor template to a Person object stored in the hidden fields. Based on which row the user clicked, we get an index, and we bind Model.Persons[index] to that template. Knockout.js is a good candidate for JS binding. It does all the field copying back and forth.
An MVC editor template can also contain validation logic. It's no problem in this case, because we rendered the editor template to the client side as a whole. The validation will happen inside the popup window without any kind of magic. When the user presses the save button, validation will run, and when it succeeds, we use the binding engine to copy the popup contents back into the hidden fields.
It is not the simplest of things, but it is very straightforward. Actually, several different JS libraries are needed, not as I hoped. So if anyone wants to edit a complex model on a single page without AJAX, it is certainly possible. It's still not completely documented because I can't share more details. But it has its advantages: only one round-trip, hence faster user experience, and there's no need to maintain state on the server, all the data is retrieved and saved as one entity in one roundtrip.
I'm creating an e-commerce site in ASP.NET.
For the actual products available to buy, I've placed a box with two arrows, which allow the user to modify the quantity of a specific item. This feature has been implemented in Javascript, so as to avoid postbacks which would be the result of managing this through ASP.NET/C# code.
Now the problem is, how am I to store the items which are ordered? Since the user can modify the quantities and products selected on the fly, I need to figure out how to pass the selected items onto another aspx page (for checkout).
Due to strict requirements, I cannot use a shopping cart. Just literally allow the user to play around with quantities of items, then once the 'Checkout' button is pressed, the user is directed to a payment page where his items are displayed.
Since the selection of items is carried out in javascript, I need to find a way of passing the selected items to another .aspx page.
I thought of storing the items in a javascript data structure, sort of like a table. A product ID will be stored in one field, and the quantity of te respective product will be stored in another field. Once the checkout button is pressed, this data structure is passed on to the .aspx page and handled from there in C# code.
It seems a bit coplicated, especiially since the javascript structure may be modified multiple times if the user changes the selected products and quantities before pressing 'checkout'.
Any ideas?
You can use JSON data in your javascript code and then pass it to ASP page with GET or POST.
At the server side you can parse JSON to .net object using JavaScriptSerializer or DataContractJsonSerializer.
Updated: In JavaScript JSON data should be looked this way:
var orders = [
{
"ProductID" : 123,
"SomeData": "some additional data if needed",
"OrderedCount": 3
},
{
"ProductID" : 321,
"SomeData": "some new additional data if needed",
"OrderedCount": 1
}
];
It is an array of orders.
Sounds like it should be pretty easy. On the page with the quantity boxes and checkboxes, you just run an iterator over them, finding first products to be ordered (assuming the page is not already displaying only products to be ordered) and then within that set finding out the quantities. You can then serialize these or otherwise create a data object and pass these to your ASP page with GET or POST (whatever you prefer).
In other words, sort of like the idea you already had, but I don't see it as being overly complicated to create or manage. Most of your functions can be reusable and repeatable.
As per Jared Farresh's comment, cookies make good sense, too.
From the comments under your question it appears like your apprehension to a "shopping cart" is related to the overhead that would likely go along with a server-side shopping cart.
But, have you considered using a client-side shopping cart? You can still use the shopping cart metaphor to reduce the complexity of the "javascript data structure, sort of like a table", without having a persistent back-end implementation.
simpleCart js is an open source, light-weight implementation of this concept. It works by storing the data in a cookie. You can retrieve it directly by querying the object or you can specify a class on an HTML element and the start up script will automatically replace the inner HTML of that element with the requested value. For example, a <span class="simpleCart_quantity"></span> will immediately have the quantity of items in the cart as its inner HTML after the page loads.
You might also want to check out this post that I asked when I was working on a project with similar requirements: Open Source client-side Shopping Cart - jQuery/Cookies
I've got two classes in my MVC project Order and Product.
Because Product can be ordered many times and Order can have many products I've got third entity which is OrderedProduct. It joins those two entities in many-to-many relation.
Now what I'm trying to do is to let user to make an order by putting products from the drop down list to the box and then to save my order. Also client have to fill some fileds in the Order entity such as Address data etc. All I want is to have it all on one single page. User can add as many items from dropdown as he like, then he can add whole order.
To make it easier to visualize look at this picture:
Now the problem is how to implement such behaviour in my MVC app. Should I build a ViewModel that combines Order class and list of Product or use partial view for Product classes?
Also which is my main problem, how can I (in elegant way) retrieve the full list of chosen products or at least product id's in the controller after POST request? In this case how can I specify that what I'm sending is a collection of ids? It's simple to add one object, but what about whole collection?
This is the place when I do not fully understand asp.net MVC, so please give me some bright ideas ;) Greetings to you all, thanks in advice for all your answers!
The desired interface seems a bit confusing to me but here's how you can handle these things.. modify to your desire. I'm going to assume OrderedProduct is an object for ordering that contains a Product ID and a quantity and that you want to be able to modify them all at the same time.
Make Order your ViewModel. Given that it has a List<OrderedProduct> property called OrderedProducts:
Create a small editor control with a ViewModel of OrderedProduct. No form, just a textbox/dropdown/whatever bound to the product name property and a textbox bound to the product quantity. Important: put this control in views/shared/EditorTemplates and call it OrderedProduct.ascx.
Give your Order object a property called NewOrderedProduct of type OrderedProduct.
In the form for the Order view do: <%=Html.EditorFor(m=>m.OrderedProducts)%> this will give you an editable list current items in the order.
After that do: <%= Html.EditorFor(m=> m.NewOrderedProduct) %> this is where you can add new items.
Have the [POST] action take a type of Order.
Now when it submits if the NewOrderedProduct property is valid you can add it to the OrderedProducts list and redisplay. You can add as many as you want this way and they will all autobind.
Have a separate submit button in the form for submitting the order. Check for the existence of that button's name in the [POST] and submit all at one time.
This gets you a straight HTML working version. From there you can Ajaxify it if you want.
Edit
Updated to reflect the function of the OrderedProduct object and correct the type the post accepts