Dynamic building page from a database in html.cs

[Peter]

Hello,

we're evaluating Kendo UI and we are planning to convert an existing application which creates every form it uses from a configuration info in a database.

Doing this in a razor file creates a unreadable code. So the plan is to create the form elements in code behind. I figured out an idea, but I'm not sure if this is the best (or correct) way to do it.

The markup:

@page
@model MyModel
@{
    ViewData["Title"] = "BuildSomethingWonderfulInCodeBehind";
}

...

    @(Model.Build(Html))

And the code behind:

...
  public class MyModel: PageModel
    {
        public IHtmlContent Build(IHtmlHelper<MyModel> html)
        {
            StringBuilder result = new();

            GetDataSourceWithFormsInfo().ForEach(r =>
            {
                result.Append(
                    html.Kendo()
                        .TextArea()
                        .Name(r.Name)
                        .MaxLength(r.Length)
                        .ToHtmlString());
            });
            return html.Raw(result.ToString());
        }

        public void OnGet()
        {
        }
      
                   // in real world the configuration commes from the db 
         private static List<TextAreaConfig> GetDataSourceWithFormsInfo()
            => new()
            {
                new TextAreaConfig("name", 20),
                new TextAreaConfig("surname", 30),
                new TextAreaConfig("street", 40),
                new TextAreaConfig("town", 50),
            };

        privateclassTextAreaConfig
        {
            public readonly int Length;
            public readonly string Name;

            public TextAreaConfig(string name, int length)
            {
                Name = name;
                Length = length;
            }
        }
    }
....
  
              

This is a working test fragment just to show the principle. It creates 4 textareas. So it looks that this is a possible path to port the existing app to Kendo UI.

But is the correct way to solve this requirement?

 

[Tsvetomir]

Hi Peter,

Indeed, the approach that you are have shared can be used as-is. The widgets are pretty much boiled down to HTML elements with an initialization script right next to the HTML. When you construct the widget on the server-side and return it to the client, it would be the same as initializing it directly on the client-side.

The browser will detect the scripts in either of the cases and will create the actual widgets.

As an alternative, you could construct the objects with settings and pass them via the page's model. Then, in a loop on the client-side initialize the widgets with the properties from the model.

Whichever option you take, the result will be the same.

 

Regards,
Tsvetomir
Progress Telerik

[Peter]

Thanks for the quick reply.

I extended the solution now and wrapped it into a taghelper construct. So I could remove the mixture of layout work and data access from model. Looks a little bit clearer amd ease the code management. 

Regards,
Peter