Looking for some implementation advice:
I have a page that has a 3-tab ajaxToolkit:TabContainer. The purpose of the page is to expose a calculator that has two basic inputs: geo-location and date. The three tabs are labeled "City and State", "Postal Code", and "GPS Coordinates". The layout of each tab container is the same for each tab, with the exception of the location section; the location section changes because each type of location has different inputs. For example, to specify city/state, there will be three fields: city, country, and state (country and state will use cascading drop-down lists). But Postal code requires only one field (which will validate via regular expression for allowed countries).
See the example design mockup:
So, what I WOULD LIKE to do (in order to minimize duplicate code), is to have a common control that contains the layout and structure of the calculator without specifying anything about the location section. Then, I'd like to be able to pull in each of the unique location controls based on what tab is selected. The tab structure exists at the page level, not in a control.
Any advice?
I was looking at templated controls (see MSDN article here), but I'm not convinced that it's the right solution. If I HAVE to create three separate controls with similar layouts and common elements, then that's what I have to do. But REALLY, I'd prefer a more elegant, inheritance-based solution.
Any advice would be greatly appreciated. Thanks.
I wound up using jQuery UI for this. It's tab feature is very nice.
Related
Currently, I'm assessing viability of Blazor for our projects and I want to better understand JavaScript's role in a Blazor project.
Microsoft documentation states the following:
Only mutate the Document Object Model (DOM) with JavaScript (JS) when
the object doesn't interact with Blazor.
If I understand this correctly, JS should only be used in Blazor projects as an absolute last resort.
We often use nicely and professionally designed templates that come with a ton of nice features that are all built with JS. Some examples include date picker, carousel, toast notifications, etc. This approach not only saves us a ton of time but also most of these templates come with everything we need, eliminating the need to piece-meal components that may or may not match in design or behavior which is a very important UX factor for us.
If I understand Microsoft's statement correctly, we should no longer use these templates and try to find Blazor equivalents of such features. Is this a correct assumption on my part? If so, this would be a major disadvantage for us to use Blazor.
P.S. Not sure if it matters but our choice would be the Web Assembly option with Blazor.
Is this a correct assumption on my part?
No, it is a wrong assumption on your part...
You may use many of the templates in your possession, but you should know how to do that.
The main thing to understand is that if an element's state has been mutated by JS code, Blazor may ignore it; that is from the vantage point of Blazor nothing has changed. Let me try to give you an example that may clarify what I mean:
Suppose you have a page with a form to gether the name and age of a user... For this, I'll use a form element within which I embed two input type text elements. Both text elements are bound to, say properties defined in a class named User. Ordinaraly, we apply two-way data binding; that is the flow of data is from a variable to the element and from the element to the variable:
Public string Name {get; set;}
Now suppose you run your Blazor form page, you type "Steve Sanderson" in the Name textbox, and then navigate to the Age textbox and enter a value. Now before you click on the submit button to submit the form data, you click on another button that executes JS code that perfom a search for an element with id="name", and when found assignes the value "Blazor" to its value property. Now you can see the Name textbox with the value "Blazor" instead of "Steve Sanderson". You can now click on the "submit" button. Usually you would expect the Name property to contain the value "Blazor" as that was the last value (set by JS). But Blazor ignore your entics, and the Name property actually contains the value "Steve Sanderson". This is because Blazor handle the binding, it creates a virtual Dom, it a has a complicated process of rendering, etc. In short, it ignores the mutation made to the elements' state from JS. Or in other words, the changes made by the JS code do not participate in the binding process made by Blazor.
When I started learning Blazor, I created a carousel, 100% Blazor. I did it in order to learn Blazor. I inspected the code of the Bootstrap carousel, and imitated the way it works and looks. Very often you can take a widget created by JS, and implement it in Blazor. The market, however, is full with implementatios in Blazor.
Except for education purposes, I'll never implement a widget created in JS, when I can use it as is. Why create a carousel with Blazor just for the display of images, a widget that has no interaction with Blazor. In that case, it would be wiser and more appropriate to use it as a JS widget. Blazor doesn't care. But if you need a sophisticated carousel that trigger events, sent data, etc., you may need to implement it with Blazor, but more often to use JS Interop with your JS widget, as related below...
Here's a link to a sample that explain how to embed a Leaflet map on a Blazor SPA, using JSInterop. This is how usually you should work.
As usual, it depends on what you know, and what specifically you're trying to do.
If Javascript is changing objects that are defined in Blazor markup, especially if it ever moves them around the DOM tree, deletes or duplicates them, you have an obvious problem-- Blazor will have an incorrect model of the page, and results could be inconsistent.
However, it may be that all the JS does is just eye-candy: animating scrolls, flashing icons, rotating through a list of images, etc. It's perfectly possible that none of that will conflict with anything you're doing in Blazor.
If you have simple entry points (like a 'toast' that's just a Javascript function with a string variable input), then JS Interop will be trivial.
If you have something more complex, like a large table of data that you want to sort and page, then unless you know EXACTLY how things work, you get unexpected results.
I am trying to develop an interface that binds to a complex backend model. What I need is a way for scripting to enable me to have a page load different page fragments based on what list row a user clicks on. As an example, on the left side of the page there would be a vertical list displaying different sections in a large assessment 'document' (mental health assessment) (each section would be it's own data model [e.g. presenting problems family history, trauma history, etc...). In the main section of the page to the right, you would have room for a page fragment or some type of container that would contain the actual page or page fragments associated with each section listed in the list on the left. When you click on the section name in the list to the left, scripting would be able to have the correct page fragment or page loaded inside the container.
The data model needs to be this complex because there are multiple types of "documents' and the system needs to be able to dynamically load a list of document sections and allow the user to load the form for each section type.
THIS IS FROM Markus Malessa: The dynamic page content is definitely possible, however since it sounds like a lot of your items are going to be based on hard data, the models really are not dynamic, so you really can't build in dynamic data at run time for example. Rather than visible/invisible properties I might suggest navigating to different pages instead and maybe having many-to-many relations to your list item and if your list item has OldFamilyHistory and NewFamilyHistory data relations incorporate a popup to select which page you may want to navigate to.
Does there exist anything akin "Master Slave Widget" for PloneFormGen? Where the user choices first choice A which would generate the list of choices for choice B (below) to select?
This is a far less than ideal answer, but I've done this several times with JavaScript injected into the header with a PFG override. It's only practical for relatively simple decision trees.
The basic procedure is to on-load hide all the subsidiary controls, then reveal them as click events indicate a controlling choice. Grouping subsidiary controls into fieldsets is also handy: then you may show and hide controls as a group.
I'm using Telerik scheduler to display a Timeline view of meetings. The resources derive from the Person class, and they are Advocate, and Legislator.
On the Y axis, I am listing Advocates, and on the X axis, I am listing blocks of time in one hour increments.
When I double click an appointment, the Edit Appointment modal dialog pops up and lists Advocates and Legislators.
Since meetings will have multiple advocates and possibly multiple legislators in attendance, I would like to have a checkbox list inside the resource dropdowns on the edit screen. Is there any way to accomplish this?
I believe this will allow me to solve one problem in that, if Peter Pan and Homer Simpson both are to attend the same meeting, clicking the meeting in the row for either of those two advocates will display 'Peter Pan' in both instances (or sometimes '-', not yet sure where that comes from) rather than 'Homer Simpson' where I open up the meeting from his row.
If it is not possible to introduce checkboxes to the resources list, can you suggest an alternate way around the ultimate issue in the above paragraph? Thanks in advance.
Telerik supports the adding of a listbox to support what you are trying to do. On the Scheduler itself add the code below that mimics your field names that your advocates are pulling from in your DB:
<ResourceTypes>
<telerik:ResourceType DataSourceID="SqlDataSource2" ForeignKeyField="Adv_AdvocateID"
KeyField="Adv_AdvocateID" Name="Advocate" TextField="Adv_FullName" AllowMultipleValues="true" />
</ResourceTypes>
The next step is to populate the resources using a custom provider. See this program here for a great project in which you can see resource population in action. Using the SchedulerDBProvider class you can then adjust their example to more represent your fields and populate the appointments accordingly with your desired ResourceTypes.
In terms of getting that particular drop down to have multiple selections via checkboxes you would most likely have to define your own custom advanced template. This route allows you to take a UserControl and use that as the edit view for your appointments. There's a demo that displays all of this (including source code) right here.
However, having that RadComboBox there might not even be the ideal approach to take. What about just a simple list of checkboxes? This demo shows off how a very simple declaration for the RadScheduler can achieve this functionality. Additionally, there is some code-behind (both in C# and VB.NET) that shows off how you can customize the text on each appointment, which might be helpful in the case that you're referring to.
I have a very simple webforms app that will allow field techs to order parts from the warehouse.
Essentially it work like so:
User selects a category from a filter dropdown, which then binds items of that category to a gridview control
User finds an item in the gridview and inputs a desired quantity (in a text box in a template field in each row)
User repeats 1 & 2 as needed
User sees a summary of the complete requisition
User confirms items and submits the requisition for processing
My no-brainer UI design so far is the generic dropdown-above-a-gridview where there's a category drop-down list that filters a gridview, like in the eye-catching asp.net ado tutorials:
http://static.asp.net/asp.net/images/dataaccess/15fig01vb.png
Each gridview row (in my app, not in the image above) lists an item's details and can accept a quantity input in the template textbox if the user wants to requisition that item.
Given that a user will want items from different categories during a single usage session, I'm trying to figure out a good, user-friendly way to allow users to input a quantity for an item, have a warm fuzzy feeling that their input has been accepted/stored, then change the category filter (thus binding the gridview to a different set of data) and select other items from the gridview as many times as necessary before summing up their order and submitting it.
I've thought about putting another grid below the first and adding items to it dynamically as the user selects each item. But that seems awkward. Ditto with an unordered list or similar simple structure under the grid.
I've also thought about just storing the user's picks in view state or session state and displaying a summary on another page, kind of like a shopping cart sort of functionality. Maybe do that and use some sort of ajaxy goodness on the main page to display something warm and fuzzy when a quantity is input?
WWYD? What Would You Do?
TIA.
I strongly agree with your first choice: users need to see somewhere what they have chosen or they will probably keep choosing it over again thinking it failed. Waiting to display it on a summary page shouldn't even be an option. I don't see much wrong with binding to another grid, although a repeater is also a decent option. Well, there are many options. Anyway, if there is room to do this off to one side or another - especially the left- I definitely would, rather than at the bottom. Also, bonus points for enabling users to change the quantities (or delete all) of an item they already selected, wherever you choose to display this.
I like the idea of a search, but be careful with auto-complete. Google style is good where it displays results below, but I've seen people develop some that are way too aggressive and love to write over what you're typing: this is awful. Good luck.
Probably because both your choices are fine - it comes down to personal preference. The shopping cart idea is well known. But sometimes it gets old if you have to keep going back and forth between the cart and the item selection.
What's wrong with the separate grid? -That way you keep the selection list separate from the ordered items list?
Why tie the user to selecting the correct category and then selecting the quantity and hitting a button?
Why not use some type of autocomplete search so they can type in the produce name they want? Then a user could type "widg", get a drop town of choices, hit tab to go to a quantity field, enter a number, and then hit enter.
Display a quickie preview with the aucocomplete too, like as single row of your data.
Then throw all these into another grid at the top of the page if its a critical part of the application, maybe at the bottom if you think the actual grid results are important.
The reason I don't like category drop downs is people who are familiar with their jobs or company usually know the names and even skus numebers for what they are trying to do. Having them select a category instead of typing just slows them down. Also I hate running into the "which category is this?" moment. For example, is a chicken a pet, food, livestock, or food producer?