MVC 5 Cascading Data - razor

I am working on an MVC 5 razor page (using Entity Framework 6) that will display Vendor information. Each vendor can have multiple classes, and each class can have multiple subclasses. What I want to do is display the vendor information at the top, show the list of classes below that info, and then have a third section with a list of subclasses for the selected class. My question is what is the best way to do this?
Currently I am trying to do it with the main page getting passed a model of type vendor, and then within that page, displaying two partial views via #Html.Action("ActionName", "ControllerName", value). I can pass the class list partial view the ID of the vendor when the page loads without issue, the real problem is figuring out how to pass the selected ID of a class to the partial view for subclass. I've tried using hidden fields, but I'm not sure how to pass the html.Action the value of the hidden field.
This is my first MVC application, so any help is much appreciated.

First off, you are saying that you are using partial views with #Html.Action() helper - this is not for a partial view, but rather to produce a link to navigate to another page...That being said, I think I know what you want to do.
Second off, you need to post more code to show you made an attempt - stack overflow is not a source of free development consulting work. I think I know what you are trying to do, but even posting some sort of UI mockup might make a general discussion easier. That being said, I won't give you any code in the answer, just a general idea of how I would approach the problem.
To start, you should have a dedicated controller for Vendor, VendorClasses, and whatever the third subclass is (I'm going to assume its called VendorSubClass for the sake of example) since you chose the MVC pattern.
Next comes the part about displaying all of the information on a single page. The only place I could potentially see it making sense to show all of that info is on the views for VendorSubClass (however only VendorSubClass properties should be editable here) and even then, it might just make sense to have really informative breadcrumbs instead.
You would need to pass an object to the view that contained the VendorSubClass, its parent VendorClass, and its grandparent Vendor information. If you're using entity framework, this is a snap (but you didn't say you were so I'm making my explanation more generic). Then, you can reference partial views by using the helpers:
#Html.Partial('VendorPartial', Model.Vendor)
#Html.Partial('VendorClassPartial', Model.VendorClass)
as you can see above, I am not passing IDs - but rather the actual properties(objects) themselves which the partial views will use to render the details. This overview should get you started and give you some stuff to google.

Related

How do I automate tab selection on a website

Here is the website I am trying to access. I dont want the default tab (Day) though, I want to select the Season tab
https://www.eex.com/en/market-data/power/futures/uk-financial-futures#!/2017/05/23
The link appears to be exactly the same whichever tab is chose making differentiation impossible as far as I can tell.
Any help on this would be much appreciated, using whichever programming method and language is appropriate.
Kind Regards
Barry Walsh
The URL does not change since this is an ajax request, which you can see from MarketDataTableAController's getPageData function. You can read about them here https://developer.mozilla.org/en-US/docs/AJAX/Getting_Started
Ive inspected your html and you seem to be using angular. On further inpection you can see that the tabs have ng-click="setActiveTab(tab)" attribute on them. So whenever user clicks, this function gets executed. It is a matter of using this function with the appropriate tab object to get the content to change. You for example could put setActiveTab(tab) into your controller init method since setActiveTab() calls the forementioned getPageData() function to update the page.
Also the tab you are looking for is page.tabs[5] ($parent.page.tabs[5] if referring from TabController) since this is the tab with the label of season. Pass that to setActiveTab() and it should show you the season instead.
However this might not be a good solution since the tab array ordering might change. Then you would need to loop over all objects in page.tabs and see if tab.label === "Season" and pass that in the function instead or better yet use the $filter service provided by angular which would look more cleaner.
Your code source also seems to be minimized and its not very easy to read.

Reusable HTML Blocks in Sitecore

I'm looking for a way to create a reusable HTML widget for a website run on Sitecore 8. My original idea was to create a data template that basically consisted of a single Rich Textbox. The idea is that you could drop any number of instances of these widgets on a placeholder and it would render out the HTML from each instance of the widget on the page and in the correct placeholder.
Example:
A content item called /products/my-product is based off of "Product" data template
It consists of some fields on the Product template (maybe product name, price)
I'd like the ability for the content editor to quickly drop one or more instances of the HTML widget on the page (say, in the right rail or in a different placeholder on the sublayout. I know I could just throw a "notes" field on the product template, but I'd like to make it more dynamic so that they can add several instances of this HTML widget and place them anywhere they desire.
I quickly realized that because we need the ability for multiple instances of this widget, a data template was not enough because each instance of the widget would needs its own data to populate on the front. Thus, my idea was to allow the content editor to add HTML widgets as a child of the current item (so each item would have its own instance data). I don't think this will work because I don't know of a way to have these children tell the parent page which placeholder to put them in, so laying them out is a problem.
I also thought about somehow setting the placeholder name as a parameter or field on the data template for the HTML widget, but I couldn't figure out how to get Sitecore to dynamically add them to a placeholder when it glues everything together.
Is there a way to achieve what I'm trying to do? Seems like a reusable HTML (or other kind of widget, for that matter) would be a fairly common need. I feel like there's an easy Sitecore way to handle this that I'm missing and overcomplicating the solution.
From what I understand, you're looking for Datasource field of a component.
Basically you:
Create a data template which contains fields necessary for your component
Create a set of items using that templates
Allow authors to select one of them as the Datasource for your component.
It's built in Sitecore functionality.
Check blog post http://firebreaksice.com/using-the-datasource-field-with-sitecore-sublayouts/ or google for Sitecore datasource.
Other links:
http://www.nonlinearcreations.com/Digital/how-we-think/articles/2014/03/4-patterns-Sitecore-component-development.aspx
http://www.nonlinearcreations.com/Digital/how-we-think/articles/2015/04/Sitecore-templates.aspx
EDIT:
Read about Datasource Location field (defining the repository of datasources location) here: http://www.sitecore.net/learn/blogs/technical-blogs/getting-to-know-sitecore/posts/2011/01/handling-presentation-component-settings.aspx
Read about Datasources and MVC here: http://jockstothecore.com/sitecore-mvc-item-maze/

Hold data for list to add later?

So no SQL tables or anything here. Basically, I have 3 pages that have 6 items each. Each item consists of an image and then some text and also a smaller image than changes from a check to an "x" depending on if user selects or not. So if the image is checked, the user is adding that to a list which would display on a fourth page. This data needs to persist through just a session and if the session times out, then it resets. If the list is complete and on that fourth page the user choices to email or share list via social sharing, then the data would be gone after that action. What I am trying to figure out is the best way to approach and implement this with minimal time and effort as it has to go out quickly. Can any of you explain and maybe point to some links with info on the best way to achieve?
This is being done in asp.net web forms with html, css, and javascript.
Much appreciated!
You can use ViewBag() (for view in razor) or ViewData[] (for page in .net) to hold data for one web page.when you want it to other page. You can pass it to other page.
check this out
ViewBag, ViewData and TempData

ListView add more items in Metro apps?

I have a metro application in which I have a Listview and service data contains above 100 items. Initially when am loading listview in my page it has to display only 8 items plus 1 more-related item and later if i click on a more-item it needs add another 9 items to my page and totally it has to show 17 items in my page and need to display more item also like that flow continues.What should I get to get my scenario.Can anyone help me.Below I tried to give u my scenario.
Thank you.
Take a look to this article: http://www.silverlightplayground.org/post/2012/06/10/Metro-Incrementally-load-GridView-and-ListView-with-ISupportIncrementalLoading.aspx.
There are a couple of solutions -- all depending on the work that you want to undertake. Also, I would suggest that you don't have a "More" button if you can help it -- it's not the best user interaction. Option 2 is going to give you the best experience.
Option 1
Use WinJS.Binding.List as your data source -- using this you can manipulate it like a JavaScript Array (e.g. push, pop etc). As you add & remove items from the list, the list view will react to those changes.
Full details are here.
Option 2
Create a VirtualDataSource derivation that is intimately aware of the ways in which you can request your data, and can offer up a consistent interface to the ListView. This enables your UI to be completely flexible to it's layout, and request enough data to satisfy the available space, while virtualizing the UI elements (better memory/performance), and the data (ensuring only the data needed by the user is requested.
Full worked example here.

Using a single shared element across multiple partial views

I have a basic ASP.Net MVC 3 application which has a number of controllers and a number of actions (and subsequently views)
A common feature of the application is to show a pop-up dialog window for basic user input. One of the key features of this dialog process is a faded mask that gets shown behind the dialog box.
Each of these dialog window controls is in a separate Partial View page.
Now, some view pages may use multiple dialog boxes, and therefore include multiple partial views in them - which as is would mean multiple instances of the "mask" element.
What I am trying to find a solution for is to only need to create one instance of a "mask" element regardless of the number of dialog partial views I include, and then the script in each partial dialog will have access to this element (so basically it just needs to be on the page somewhere)
The only real idea I have come up with so far is to add the "mask" element to the master page (or in the original view page) and this will mean it only gets added once. The problem here is that it will be added even when it is not needed (albeit one small single element)
I can live with this, but I would like to know if there is a better way to handle these kinds of scenarios?
A quick idea that came to mind is some kind of master page inheritance hierarchy, So I may have a DialogMasterPage that inherits from the standard current master page. How does that sound for an approach?
Thanks
To do something like this, where each module can register their need for a certain thing in the master page, you can use HttpContext to store a flag of whether you need to write the mask div, and just set that property in each partial. At the end of the master page, if the flag is set, you can then write the mask div if its set to true.
Obviously to make this cleaner you could wrap it all in an HtmlHelper extension or something.
My initial thought is for you to use something like jQuery UI where it handles the masking for you or if you are using something custom you can load the content for the dialog via ajax then show it in the single dialog on the master page.