Bootstrap MVC4 Fixed Left Naigation Menu - c#

I am trying to create UI structure for Bootstrap admin template which contains left menu and right content section(Typically partial view) using MVC4.The application needs to accommodate more than 50 menus and it will increase dynamically in feature. So i have decided to go with below structure and i don't want to re-render left panel menus.I have top bar fixed header which will display lots of notification details with respect to user.My problems are i don't want to make API calls to get the notification details for every time when i click left menu which will fetch the details from lots of table in DB. So the only solution is not to refresh the left menu and top bar header(which are defined in Layout file). How can i achieve this.Any solution would be very helpful.

AJAX seems the solution as Stan suggested in the comment.
So first load jquery, then in the razor page render your content from an action (Html.Action) that returns a partial view.
Then when user clicks that menu item make a call from client with jquery to that action so you return PartialContentView, and replace the content section with server response.

Related

How to use Html.TextAreaFor using many Ajax.BeginForms in same view

I'm not sure about how to ask my question, so I'll show my screen.
I have a control for subscriptions in a page. The context of the page inst to post data, so the model is some kind of "read-only". My model has the inscriptions (left site), the inviteds (second tab of left side) and the approveds (right side). The green buttons, turn the current item as approved (send it to right side by ajax, removing the html from the left panel and inserting in the right panel). The red buttons (remover) do the opposite, unapproving the user.
Ok, until now I was just trying to explaining the picture. Now, my real problem.
Every m is a button. It opens a messagebox like the 2nd item on the right panel shows. The m turn into ^ to close the accordion.*
My problem is: I'm using a Ajax.BeginForm in those textarea + submit button but without model binder. I'm using
#Html.TextArea("message")
instead
#Html.TextAreaFor(m=>m.Message)
because my view model, like a said before, has another context. Now, I really dont know the right approach to do that. I want the jquery validation unobstrusive to work with this textarea. I was thinking about use a #Html.RenderAction for each partial with messagebox, but I'm worried about performance. There is any kind of help me with that?
Doesnt matter if takes longer, I'm looking for the right stuff.
Thanks
*the + sign, m and ^ will be changed by nice icons later.
If the model for this page has another context make up another page with the right context and let it pop up in an iframe...
From your screenshot I would assume that this is about programming of the last 10%. The concept of approval has a 'lesser-reject-nature': People that give away something for approval typically try to follow the rules to allow a fluent approval. As soon as you articulate the approval rules clearly any need to respond with messages becomes a minor issue.
"because my view model, like a said before, has another context..."
You're in control of the view model? Why not arrange it so it properly fits the view, and map your data to it. Then you would be able to use the strong typed html helper.
Otherwise, consider rendering a partial view. You can then redefine the #model type for the partial, it could be a property of you main view's model, and use the Html helper on that.

How do I make a custom pop up for when I click on an asp table element?

I have a table I've dynamically created, and I want to make it so that I see a pop up with a custom image, along with some text taken straight from the table element.
With the limited context you provide, I can't give you a complete solution, but I can at least outline a way to get it running:
Use jQuery and jQueryUI.
Bind a jQuery click event handler to the element.
Use a jQueryUI Dialog to display the popup.

Implementing a Windows 8 app with nested navigation

I'm currently developing an app for Windows 8 which should provide nested navigation. The main view is split into 3 parts, a menu area on the left side, a Content area and a Header. Both the menu and the Header should be visible all the time.
The Content area is filled with the Content selected from the main menu, however if the user selects for example a list, the Content area is again split into two sections where i want to Show the list on the left side and the selected Detail Information on the right side (similar to the built-in mail app). The Detail view again has subviews, which should be displayed in the same area. I added a back button to navigate through the Detail views.
Each of the views is currently contained in a Frame element, which means i have a MenuFrame and ContentFrame inside the main view, and a ListFrame and a DetailFrame inside the "list"-view. I maintain backstacks for every Frame to enable navigating back.
My question is: if the user wants to snap the application (Display it side by side with other Win8-Apps or the Desktop), the space for the app is very small. Therefore i want to Display only one view at a time in snapped mode, which means the user first sees the main menu, then the list, then the Detail view, and he should be able to navigate back to the parent view in all cases (which means that i would have to maintain a single backstack for all views?).
Is there a simple way to achieve this behavior?
Another question: Currently i don't use the Frame.Navigate-methods, but i implemented my own backstack by just creating UserControls and assigning them to the Frame.Content property. If the app wants to navigate back, the previous control is popped from the stack and set as the Frame Content. The benefit of this is that i can execute code in the control constructor which might raise exceptions. Are there any downside of this method or other reasons why you would recommend switching to the standard Frame.Navigate() pattern?

dynamic window focus MVC2

I am working on an MVC2 project, on a view we display a large data set which refreshes every minute with latest data..some specific records are updated every minute in this data set. I want the browser to focus on these specific records..Not sure how to use javascript focus() here dynamically...
any clue?
thanks,
You need to provide more detail as to exactly what you are attempting to do.
If you are attempting to focus just ensure each record has a unique identifier then you can focus on individual records.
Alternatively you could simply keep the focus at the top or bottom of wherever you are displaying them.
EDIT:
In that case I would suggest something like the following
var currEle = document.getElementById("Record123");
currEle.focus();
Suppose you know how to issue an Ajax call and return either partial view or JSON data and how to use that data on the client afterwards...
You can only focus to a point in the document when
there's only one change or
all changes are summarised together in the same document area
We're also not talking about focusing as in document perspective, but rather about focusing of users attention to document specific content (or part of it).
First option
You can always use something like jQuery.scrollintoview() plugin (link to blog post that describes the plugin here) that will scroll document to the record that changed and highlight it using jQuery UI effect highlight. Linked blog post also describes the purpose of visual animated scrolling instead of simple jumping within the document.
Second option
Put changes at the top and keep your document scrolled at the top when content gets updated. You can blink a few times some icon informing the user of the changed content in the changes area.

What would be the correct way to add multiple views in my app?

I'm working on an app which encodes text to QR codes.
Currently I have a form which does this for a single string.
(source: fotopocket.nl)
At the top I've added a View menu item with two subitems:
Single (which is what we're looking at now)
Bulk (which would allow a user to select an import file)
When the user selects Bulk I want to have a different toolstrip and input fields (but the same menu).
Should I create another form for this with the same dimensions (and menu) and switch the forms when another view is selected.
Or should I code both views in the same form somehow?
Basically I don't want to let the user notice a complete new screen is loaded.
So if I would have to go the 2 forms route I need to make sure the forms will be placed at the same position.
What would be the correct way to get this functionality?
I would suggest creating a UserControl for the content (toolstrip and input fields) for Single and another UserControl for the content (toolstrip and input fields) for Bulk. You could add both to your single form and then show the correct one based on which menu option is selected.
This would give you some of the benefit of having two forms - your event handlers and such would be separated into each UserControl, but you would be loading the content into one user-visible form.

Categories