How do I implement this type of dynamic UI in a Razor view? - asp.net-mvc-4

I will start by saying that I am an absolute newbie to web development and to MVC as well.
I want to implement a view for a Subscriber page (part of an MVC4 application dealing with Email marketing). What I want to implement is:
1) When the user clicks the "+ Add a List" button, a new Category should appear on the left and the cursor should blink, meaning it should be ready to receive the name for the category from the user. I also want that whenever the user hovers over any category name on the left, a small bar containing two buttons (edit and delete) should appear which should let the user edit the category name or delete that category. The thing I want is that all of these must happen without reloading the page.
2) When the user clicks the "+ Add Contact" button, a pop up dialog box containing two tabs should appear which lets the user either manually enter the details or upload a CSV to capture the details. Whenever the user clicks the "Add Contact" button or "Upload and Add Contacts" in the pop up dialog box, I want the new contacts to display in the contact list region shown in the picture (once again, without reloading the page). I also want the same hover bar for the contacts too (same as categories).
I am confused as to how to implement this in a Razor view? What do I use - JavaScript/jQuery/AJAX?
I am pretty much lost. Can someone please guide me a little bit so that I can continue and finish my first MVC4 project?

You need some javascript libraries like jQuery UI or maybe Kendo UI, I'd recommend to use jQuery UI at this time. they have many widgets but look at these. and keep in mind that a cshtml view can be look upon like a html page, you can have all tags, css and javascript you want there:
http://jqueryui.com/dialog/
http://jqueryui.com/tabs/
http://jqueryui.com/

Related

Using puppeteer to automate button clicks for every button at every URL in a web app

I am currently trying to use JS and puppeteer to take a screenshot of every url in my web app, as well as take a screenshot of every button that can be clicked. Is there a way to click each button without specifying the id? Not all of my buttons have an id and even if they did, I wouldn't want to have x number of page.click(id, options) for each button I have (which is quite a lot).
Thanks
I have tried going based off each className (this app is built using react) but this does not work. It will take a screenshot of the same buttons over and over. I believe because if page.click has multiple of the same options, it only chooses the first one and many buttons have the same styling classNames.
You could get an array of each element on a page, go through the elements with a for loop determine if it is a button, then click it. Then for each page you'd have to input each url in an array and then use a for loop to go through it.

Dynamically add Editor Template on click of a button

In my MVC4 project I have used an Editor Template for user input. I have define a constant(say 4) and called it in a for loop, so there is always a constant number of 4 templates displayed on the view.
I want to change this and make it dynamic, ie when the user clicks on a button, a new Editor Template should be displayed dynamically. When he again clicks on the button, a third one will be displayed and so on.
Do I need to use angularJS for this or is it possible to do it in .net itself? How do I achieve this? Thanks.

Add global button in CRM

Is there a way to add a new button to ALL PAGES in CRM?
I have tried different ways but in some views, the new button is shown at the end. Im trying to found a way to create a button and place it as first button, to any view, entity and page in CRM. Is this accomplisable?
I'm afraid that out-of-the-box buttons will often take precedence over custom buttons, and the only way to change that would be to hide the out-of-the-box buttons.
I'm assuming you are adding the button via the Application Ribbon, correct? (not every single form and grid)
You can add items to the "Jewel", (the dropdown from "File" in the top left). It's not exactly the same as putting it in the ribbon because you have to make an extra click, but it should show up globally.

How to create a nice add button to list view like in the Weather app?

Following these steps:
Open the Weather app.
Right click
Click on places
See that little item with the + symbol? I want to do something exactly like that, the looks and behaviour.
Assuming you are just trying to get some basic ideas about metro-ui controls and you are on Release Preview.
When you do right click, the control that's being triggered is called App Bar. The "place" button is a App Bar Command. Clicking on the button will take you to another page (HTML or XAML). This page contains a ListView control with GridLayout. You can dynamically change the ListView Template and assign different actions to the itemInvoke event.
Here is a quick tutorial for App Bar and commands:
http://msdn.microsoft.com/en-us/library/windows/apps/hh465309.aspx
Here is a quick tutorial for List View control:
http://msdn.microsoft.com/en-us/library/windows/apps/hh465496.aspx

How to get Multiple Inputs

I was thinking of implementing picture uploading to my web application.
Now there are few Uncertainties.It would be great if some one makes them clear.
How do you allow user to upload multiple data for
Example. I have a model for car and I want user to add as many pictures with comments. Usually on websites there is button that says "Add another picture". If user clicks that button or link a text field and a Browse button appears and user can add as many pictures as he wants.
You need to go through this wiki -
http://www.yiiframework.com/wiki/176/uploading-multiple-images-with-cmultifileupload/