PDA

View Full Version : [CLOSED] Responsive design in mvc.ext.net 5



cslocus
Oct 22, 2019, 3:20 PM
Is it possible to introduce responsive design into my mvc.ext.net 5 webpage?

There are examples on examples.ext.net but not the MVC alternative.

Please let me know!

fabricio.murta
Oct 22, 2019, 7:38 PM
Hello @cslocus!

There is! The same you can do in Webforms you can in MVC versions. Although the syntax changes from ASPX to Razor, and some aspects also change even in code behind (basically getting reference to page components), the structure remains the same. If you compare two existing examples common in both Examples Explorers, you'll understand what I mean.

A good sample on that is the Simple Grid Panel example:
- WebForms (https://examples5.ext.net/#/GridPanel/ArrayGrid/Simple/)
- MVC (https://mvc5.ext.net/#/GridPanel_ArrayGrid/Simple/)

To get started with responsive design in MVC, you should start with an example using a ViewPort. This MVC example is a good starting point:
- Viewport > Built as Builder (https://mvc5.ext.net/#/Viewport_Basic/Built_as_Builder/)

Its equivalent in Webforms would be:
- Viewport > Basic > Built in Markup (https://examples5.ext.net/#/Viewport/Basic/Built_in_Markup/)

Usually we write the same example in MVC and WebForms when there's substantial change, or to highlight a major feature. So we don't have some examples in MVC.

Let us know if you are still having trouble in "translating" the Responsive Design WebForms Example (https://examples5.ext.net/#/Miscellaneous/Responsive/Basic/) to your MVC project (in Razor or C# controller syntax), and we'll take a look, it may be a specific need you have that needs special handling. There may also be some configs that are not trivial to be set via the responsive rules, so it would be nice to see how exactly you're trying to port it.

Hope this helps!

cslocus
Oct 22, 2019, 11:46 PM
Hi! Thanks for getting back to me, some of your examples are very helpful.

Could you give me an example in Razor?

I'm hoping to have a page that has a navigation bar at the top (Home, contact, search etc) that when the width of the screen is small enough, it will change to a menu instead :)

Please let me know if that is possible!

Thanks

geoffrey.mcgill
Oct 23, 2019, 4:20 AM
Hi cslocus,

Can you post what you have working so far? Please post inside of [CODE] tags.

cslocus
Oct 23, 2019, 9:07 AM
Hi Geoffrey,

Here's what I've got in my view so far (The CSS is also there, but for the purpose of the question, I didn't include it in this example):




Html.X().Viewport()
.Layout(LayoutType.Border)
.Items(

Html.X().Panel()
.Region(Region.North)
.Header(false)
.Shadow(true)
.Border(false)
.Frame(false)
.Layout(LayoutType.HBox)
.Items(

Html.X().Image()
.ID("TopLogo")
.ImageUrl(@"~/Images/TopLogo.png")
.Cls("rounded-corners")
.Width(130)
.Height(90)
.Margin(15),

Html.X().TabPanel()
.Layout(LayoutType.HBox)
.Cls("rounded-corners")
.MarginSpec("35, 10, 35, 10")
.Flex(1)
.Items(

Html.X().Panel()
.Title("Example")
.Flex(1),

Html.X().Panel()
.Title("Example")
.Flex(1),

Html.X().Panel()
.Title("Example")
.Flex(1),

Html.X().Panel()
.Title("Example")
.Flex(1),

Html.X().Panel()
.Title("Example")
.Flex(1)

)
)
)



One other thing - when I create a new TabConfig (I believe it's button), I can't change the CSS of the text. Can you give me an example of how to do this?

Thanks

EDIT: Changing code in the tags

geoffrey.mcgill
Oct 23, 2019, 1:36 PM
Thanks for providing the code sample. What responsive changes to the interface would you like to see occur?

In Fabricio's response (https://forums.ext.net/showthread.php?62737-Responsive-design-in-mvc-ext-net-5&p=285038&viewfull=1#post285038) above he linked to a sample (https://examples5.ext.net/#/Miscellaneous/Responsive/Basic/) demonstrating a ResponsiveConfig, but I don't see any ResponsiveConfig defined in your code sample.

cslocus
Oct 23, 2019, 3:03 PM
No problem :)

I understand that there's no ResponsiveConfig in my code - I can't work out how to translate it and was hoping that you guys could provide some assistance :) I got as far as giving it one, but I can't get the rules to work.

Please let me know the easiest approach to giving my code ResponsiveConfigs (in razor syntax)

EDIT: After re-reading your post I realised I never answered correctly - I want to turn my tabpanel at the top into a sort of drop-down menu :)

fabricio.murta
Oct 24, 2019, 9:24 AM
Hello again, @cslocus!

We "ported" the Responsive example to the MVC Examples Explorer. Please take a look on it and I'm sure you'll figure the overall syntax of the Responsive feature under Razor syntax.

- Miscellaneous > Responsive > Basic (https://mvc5.ext.net/#/Miscellaneous_Responsive/Basic/) in MVC Examples Explorer.
If you still is stuck after reviewing the ported example, please post the code like you did above, introducing the usage of the Responsive settings.

Hope this helps!

cslocus
Oct 24, 2019, 9:36 AM
Great!! Thank you so much :)

I'll let you know if I experience any difficulties - please mark this as resolved :D

fabricio.murta
Oct 24, 2019, 5:47 PM
Thanks for the feedback, hope it helps you get that working on your project!