how to allow for a flexible UI in ASP.NET MVC - asp.net-mvc

We are starting a new ASP.NET MVC project and we would like to establish a pattern of development that will allow flexibility in the UI. The general idea is that we would like to develop a set of related controls as a unit (i.e. a set of inputs and a submit button) and maintain the flexibility to decide later 1 of 3 UI options
Have that set of controls with its submit button be alone on a web page, OR
Have the set of controls be together with other sets of controls on the same page, and each set has its own submit button, OR
Have the set of controls be together with other sets of controls on the same page, but there is only one submit button for the whole page
Is there any pattern or strategy of development that would allow us to develop with this flexibility?

I would create a Partial view for this scenario. Just lay out the form in your Partial view and drop it into whichever view you see fit.
Since the entire body is not wrapped in a form tag like WebForms, there is no limit to the number of forms you can use on a page as long as they're not nested.
This one is a bit tougher. Unlike WebForms where you could put controls all over the page and have a button click collect those you can't do that with MVC. Your options would be to make sure the inputs are within a form or use JavaScript to collect all the values and submit those.

Related

Recommended way to do the search and populating the grid in ASP.NET Core MVC 6

I am creating a project where I need to create a view with search textboxes and a dropdown which would be populated from the server. Same view also have a grid which would be populated based on the search criteria enter/selected by user.
I want to know what would be the design of the page in terms of showing both on same page. Should I create a partial view for the grid or Search panel or add both in the single view?
Note that dropdown list would need to be populated from the ViewModel. So what is the common practice in the situation. I am new to this I have done few pages but with lot of code, session and ViewBags and I think I am not following recommended practice.
Actually, the design for your web application is according to your requirement.
For example, if you want grid to work with other datasource or view, you could build it as a component, then if you want to use it, you could directly use this component to avoid write the same codes for multiple time.
If you want to use same grid to show in some other page, you could build it a partial view, then you could directly call this view to show something.

MVC with Bootstrap - Edit vs View

I have self taught myself MVC and create little personal projects to learn, as my IT consultancy always puts me into roles where I don't get to use MVC.
One thing I am battling with is - When I display a view, I always display it in edit mode. So you can make changes and clicks Save, and the view is saved. However, I would prefer to enter the view in Read Only mode. So, instead of edit boxes, I want labels (read-only). When the user clicks an Edit button, without a post back (so, using the same screen), editable fields 'change' into edit boxes.
I'd prefer to have one view though. Not en edit view and a view view. To minimize coding effort.
This must be a pretty standard function. Can it be done using Bootstrap/MVC?

embedding a FMX forms

There is some code regarding embedding a FMX form into a panel...
http://docwiki.embarcadero.com/CodeExamples/XE5/en/FMXEmbeddedForm_(Delphi)
....I want to embed multiple forms into the same panel, closing the prior
one of course. I'm having an issue with the proper to close./free those
forms when using the method to embed them from that docwiki.
from testing I have found that the form is not actually embedded but that the objects on the form are moved onto a new parent simulating the effects of an embedded form.
In the vcl this was pretty easy to do but in dmx it's a different ball game.
Any thoughts?
The easiest method to do this is to put a transparent layout on each form as top level component.
When you need to embed a form in your panel, just create an instance of your form and change the parent of it's layout to your panel.
When you don't need the embedded form, you can reparent the layout to its form and free it.
When you embed a form you are, as you state, reparenting some of the components from the embedded form onto the containing form.
If you want to remove those components you can either:
reparent them to something other than the containing form (e.g. back to their original form). Do this if you have multiple forms which you want to be able to swap in and out without having to destroy and recreate all the time.
Free the embedded form (use DisposeOf under ARC). This will both destroy the form and it's controls and remove them from the containing form. (Note that while the containing form becomes the Parent, the original, embedded form stays as the Owner. This the controls are destroyed when the embedded form is destroyed.
You can then create and reparent another form in it's place.
Also note that you can safely embed multiple forms onto one container form but you will need to use a different object as a container for each one. You can also put multiple components or sets of components onto an embeddable form and embed them into separate locations on a container form or even onto multiple forms.
However you can only embed each control(s) into one form at a time.

ASP.NET MVC search box: use modal popup or inline div or redirect to another page?

I have a view with a textbox and a search button, eg CustomerTextBox and CustomerSearchButton.
The list of customers is too long to display in a dropdown, and there has to be advanced search functions anyway.
What is the best practice in MVC to handle this case? When the user clicks on the search button, should it:
A. Load another view into a modal popup (eg /customers/search)?
B. Have the search form in a hidden div that expands when the search button is clicked?
C. Redirect the user to a search page by means of RedirectTo("/customers/search")?
I've only been doing MVC for 3 days so thanks to those who answer my questions that might have quite obvious answers that I cant see yet. :)
I think it's really up to you, what would fit your site better? If you need some advanced searching capabilities, create a /customers/search and redirect to it. If its somewhat simple and quick, use a modal popup, or expand a hidden div with a search field or two when clicking the button.
Check this out:
How to implement search features in ASP.NET MVC applications

binding fields in a dialog popup in my view

i have an html table in my asp.net mvc view an i am running into some real estate issues with screen space.
I think in one area of my view i am going to have a button in a column of an html table that says "Details" which, when clicked, loads up some dialog ui. what i am trying to get my head around is that i want the fields in the dialog to also be part of data binding object in the overall form which i am passing to the controller when i submit the form.
is there anything that i should be worried about or anything that you need to do special if you have a form where inside your form you have a button that create a popup with some more details elements. I am just trying to see from a data binding view if there are any issues.
also any examples of doing anything similar would be great.
EDIT
So i tried doing this an ran into a binding issue. i have a follow up question with the specifics about this binding issue with jquery ui dialog here:
why does jquery ui dialog break asp.net mvc's default model binding .
There shouldn't be any issues if you are binding elements from your popup dialog to corresponding hidden elements in your main view. These hidden elements will bind correctly like any other control in your main form.
Of course, you might be POSTing the form elements from your popup form to its own controller method directly, and that is also a perfectly good approach.

Resources