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.
Related
I need to implement a drop-down which has a delete 'X' option next to each option item. Somewhat like the image shown below.
The drop-down is populated dynamically and I need a way that does not inlvolve using list as an alternative.
EDIT: The icons next to each dropdown item refers to 'Edit'/'Delete'
You cannot put a checkbox into the usual <select> or multi-select HTML element.
However, here is another question where several good options are discussed.
This looks like the most useful and best suited to your purpose:
https://stackoverflow.com/a/27547021/1447509
And here is an example of how to change the default checkmark to an X:
https://stackoverflow.com/a/40123793/1447509
Sources:
How to use Checkbox inside Select Option
After selecting check box Instead of Tick symbol need X in html
UPDATE:
Given that you need both the HTML markup and the javascript to make it do what you want, you have two (possibly 3) steps to do:
This answer provides a good example of how to create the custom-rolled <select> control.
This answer shows you how to replace the checkbox created in step 1 with an icon/image of your choosing.
The javascript to remove the x'd <option> is very simple:
$(this).closest('option').remove();
IF you also need to save these results, then you also need to learn:
4a. Server-side SESSIONS (so that each user's customizations are saved for them)
4b. A login system, so you know for which user to save the current customizations.
4c. Just the basics of how to use a back-end database, such as MySQL/MariaDB, in which to store the user customizations.
4d. AJAX - so you can schlep info to the back-end for insertion into the database without refreshing (or navigating away from) the current page. AJAX replaces the ancient and no-longer-used <form> construct. Frankly, once you've used AJAX a couple of times, you'll never go back. Totally easy.
If you are in a bind and need someone to create the whole thing for you, I refer you to one of these websites - I have used such services myself and can recommend them.
I am currently using the Views and Display Suite modules to create a page that works as an image gallery. You click on the menu button to take you to a page (the view) that has multiple links to nodes (individual galleries).
When you click these nodes, they take you into the separate page and show all images uploaded using the "event" content type that I made.
The event content type has one field (type: image) that uses a multiupload widget, allowing for multiple file uploads.
However, the images on the node are displayed within divs, so they all have their own rows basically. I would like to know if it was possible to put them all into grids, and if so; how? I tried using display suite, but I only have that one field to work with.
If you want to get a fully customized page and arrange the fields just like you want, use the theme suggestions.
For a node of type "event", as you said, it would be node--event.tpl.php. You can duplicate the code inside the base template node.tpl.php of your parent theme (or if you don't have one, of Bartik for example) to have a good starting material.
Just rearrange the div, the tags, the variables as your convenience, add some custom CSS to make your grid, and you should be done!
I hope it helps.
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
This seems simple enough but I can't quite think of how to actually do it...
In IBM Web Content Management (WCM) version 7 I have a Presentation Template (PT) which calls a Menu Component to display some content items.
I also have some (static) links on the sidebar which I want to basically just change the menu component that is being used, and that's it.
So for example...
In the PT:
[Component name="Main Page"]
When I click on a link, I want the exact same PT to be displayed except I want it to use:
[Component name="Next Page"]
Basically, Main Page and Next Page are showing the same content items, they just have different filters on them (so they appear to be different pages). The "Main Page" shows "everything" and then if you click on a link it's suppose to only show a subset of that.
I can't quite figure out how to connect the link to the PT to change it. I've thought about using JavaScript or JSP to simply rewrite the HTML, but even then I'm not sure how I set it up to say that: "if the link has been clicked, rewrite the HTML" because I'm not sure what to even point the link to, or pass through the link.
I thought about creating different content items with different PTs to link to, but there are about a dozen links (and therefore a dozen different Menu Components that I want to use), so I thought it might be better in the long run to just use 1 dynamic PT (in case the number of links grows).
It is only that one component that needs to be changed in order to display how I need for every link though.
Any ideas how to go about doing this?
So this is how I resolved this:
I created a component reference element in the content items called "menuComp" and then I set that to point to the appropriate Menu Component for each particular page.
In the presentation template, I removed the component reference and changed it to an [Element] tag which used key="menuComp".
I'm working on a large application with lots of editable objects on a page. One page for example contains a list of categories and each category has a list of tasks. Both categories and tasks can be editted via a modal dialog window with a form inside.
The current solution is to embed a hidden form prepopulated with data next to each object in the html. When the edit button is clicked, the form is displayed inside the modal dialog and submitted via ajax. The advantage to this solution is that modal dialogs pop up quick. The disadvantage is the growing number of dom elements and page size as each object requires another hidden form.
I am looking for ways to reduce the page weight and reduce the number of dom elements. I am looking for a balance of performance vs maintainability, as there are lots of pages with lots of different objects to consider.
Use ajax to dynamically load the modal populated form. This reduces the page weight considerably, but causes a delay when the edit button is clicked and is the worst for user experience. It also requires each form to have an ajax handler for this specific function.
Store the form parameters as json data and populate the form values from a cloned template form when an element is edited. This reduces dom elements significantly, and the page weight a little as well. A generic piece of javascript needs to be written to insert the json data into input elements.
Store the entire form HTML as a json object inside a data attribute of a dom element. This does nothing for page weight but will reduce the number of dom elements. On edit, the html can be injected into the modal dialog. Its also the easiest to implement.
Scrape the content of the page for the values of the form, and inject them into a cloned template form. This reduces the duplication of content, and does the most to reduce page weight and dom elements. However it feels brittle and intrusive, there needs to be id coordination for content and special care needs to be taken so that hidden input fields are also injected into the page.
Those are the options I've come up with. The JSON solutions are the most appealing to me currently. I'm curious if anyone has other solutions or insight to any of these?
The most light-weight is probably store the entire form definition as JSON and write some sort of engine that would dynamically build the form HTML on the fly. You'd then use another JSON file to represent the data layer that populates/contains the form data.
The fun you run into is how to manage the layout of the form on top of all this. For a standard two-column layout it's simply. Beyond that it's an awful lot of work.
I started writing one using prototype.js about five years ago. I never finished it but it works. Feel free to view the source and steal the code.
If you look at advanced client libraries like ext.js, this is how they're doing it.
If you're going for speed, and don't have a framework handy, don't think "HTML", think "DOM element." Maintain as much data as possible in a "global" data object, and only go to the server for information you don't have. Initialize a modal <div> either on demand or asynchronously after form load, and populate its options via JavaScript in response to a handled event from each <input> element.
For performance, consider storing categorical information in some localStorage option.
Realistically, however, you want a framework. (If you don't use one someone else wrote, you should write your own.) I'm a fan of the Enyo framework leftover from WebOS personally, but there are others out there to help you do this.