sasan-salem / autooption

A simple library to generate option page for websites

AutoOption

A simple library to generate options page for websites

• Why
• Demo
• Installation
• Setup
• Usage

Why

In every website, we need an options page (or setting page) where users can change some configs inside. Such as the number of rows in the lists, allowing comments on posts or not, changing themes and any other things.
To have any of those inputs in your options page, you should create a row in your table, create an input in the front-end, write the logic for that in the back-end and inserting its value in DB when every user clicks on the save button.

With AutoOption you can create any input inside your options page in a couple of seconds

Demo

Installation

Install AutoOption and AutoOption.Pages from NuGet to your project

Setup

(If you have Database and ConnectionString, skip the step 1 and 2)

1. Create a Database

2. Create a ConnectionString
   Create a ConnectionString the way you want or like my ConnectionString in appsettings.json (like here)

3. Options Class
   Create an empty class with Options name wherever you want

4. Options Page
   

   1. Right click on Pages folder, Add, Razor Page and choose Razor Page - Empty. then write Options for name or whatever you want

   2. In Options.cshtml.cs delete OnGet() function and add these two lines in OptionsModel class:

      [BindProperty]
      public IFormCollection Inputs { get; set; }

   3. delete all code inside the Options.cshtml and add this code instead:

       @page
       @addTagHelper *, AutoOption.Pages
       @model OptionsModel
      
       <vc:option inputs="@Model.Inputs"></vc:option>

5. Config
   in Startup.cs set your ConnectionString to OptionHelper.Config

   OptionHelper.Config(typeof(Options),
         new SqlWrapper(Configuration.GetConnectionString("DefaultConnectionString")));

Usage

Now everything is ready. You can add any input to your options page just by writing properties in the options class.
Let's add a field of number and text type. You need to just add these two properties in your options class

public int PageCount { get; set; }
public bool AllowComment { get; set; }

Now build your project and go to https://localhost:44378/Options
Done.

If you want to have pretty titles, use Display attribute at top of the properties

[Display(Name = "Page Count")]
public int PageCount { get; set; }

[Display(Name = "Allow Comment")]
public bool AllowComment { get; set; }

If you want to access the value of fields programmatically, write like this

int count = OptionHelper.Get<Options>().PageCount;

If you want to change the value of fields programmatically, write like this

OptionHelper.Set(() => OptionHelper.Get<Options>().PageCount, 10);

Also, you can add enum property and you will see a Select input equivalently. (like here)

autooption's Issues

Radio button for boolean value

Now the user has to write false and true words for boolean types. It must be selectable with radio button

Enum Support

User can use enum in option class and because that, in option page we must have dropdown.

change Options in the middle of the code

Its needed to users can change Options in the middle of the code

Default value for numbers

The default value for int must be 0

Writing Tests

Writing unit and integration tests

Simplify the option page

Further simplify the option page for users

Checkbox view for enums

View checkbox as an enum. There is needed to create a new attribute for enum to specify checkbox view.
Then we need a new type named EnumChBx and consider it in the whole project

Success message on Option Page

Support all value types

Option property whitout display

Users have to use Display attribute in Option class. it's needed to eliminate this compulsion and when a property hasn't Display attribute, use property's name instead.