[CLOSED] Responsive design in mvc.ext.net 5

  1. #1

    [CLOSED] Responsive design in mvc.ext.net 5

    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!
    Last edited by fabricio.murta; Oct 24, 2019 at 4:47 PM.
  2. #2
    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
    - MVC

    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

    Its equivalent in Webforms would be:
    - 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 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!
    Fabrício Murta
    Developer & Support Expert
  3. #3

    Thanks!

    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
  4. #4
    Hi cslocus,

    Can you post what you have working so far? Please post inside of [CODE] tags.
    Geoffrey McGill
    Founder
  5. #5
    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
  6. #6
    Thanks for providing the code sample. What responsive changes to the interface would you like to see occur?

    In Fabricio's response above he linked to a sample demonstrating a ResponsiveConfig, but I don't see any ResponsiveConfig defined in your code sample.
    Geoffrey McGill
    Founder
  7. #7
    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 :)
    Last edited by cslocus; Oct 23, 2019 at 2:38 PM.
  8. #8
    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 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!
    Fabrício Murta
    Developer & Support Expert
  9. #9
    Great!! Thank you so much :)

    I'll let you know if I experience any difficulties - please mark this as resolved :D
  10. #10
    Thanks for the feedback, hope it helps you get that working on your project!
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. Replies: 2
    Last Post: Jul 14, 2017, 4:41 PM
  2. Responsive design in ext.net 2.5
    By Yaganteeswarudu in forum Mobile Help
    Replies: 1
    Last Post: May 25, 2017, 1:38 PM
  3. Responsive Web form with ext net
    By developerpr in forum 2.x Help
    Replies: 3
    Last Post: Dec 10, 2015, 1:12 PM
  4. Replies: 9
    Last Post: Mar 04, 2015, 7:59 PM

Posting Permissions