Quantcast
Channel: Active questions tagged blazor - Stack Overflow
Viewing all articles
Browse latest Browse all 4839

Blazor Implementation of a parametrized component

$
0
0

I am starting to use Blazor to develop a web app.

I am kinda struggling on a problem that seems to be related to my lack of knowledge in the blazor way of doing things.

I have two files:

@page "/"<PageTitle>Home</PageTitle><h1>Hello, word</h1>@foreach(var component in WidgetsEditor){    switch(component)    {        case MarkdownEditor me:<h1> Premier</h1><MarkdownEditor />            break;        case PythonInterpreter pi:<PythonInterpreter/>            break;    }}<button @onclick="addMarkdownEditor">Add a Markdown Editor</button><button @onclick="addPythonEditor">Add a Python Editor</button>@code{    List<Widgets> WidgetsEditor = new()        {            new MarkdownEditor()        };    public void addMarkdownEditor()    {        WidgetsEditor.Add(new MarkdownEditor());    }    public void addPythonEditor()    {        WidgetsEditor.Add(new PythonInterpreter());    }}
and the PythonInterpreter component@inherits Widgets<script src="https://cdn.jsdelivr.net/pyodide/v0.25.1/full/pyodide.js"></script><input id="code" value="sum([1, 2, 3, 4, 5])" /><button onclick="evaluatePython()">Run</button><br /><br /><div>Output:</div><textarea id="output" style="width: 100%;" rows="6" disabled></textarea><script>  const output = document.getElementById("output");  const code = document.getElementById("code");  function addToOutput(s) {    output.value += ">>>" + code.value +"\n" + s +"\n";  }  output.value = "Initializing...\n";  // init Pyodide  async function main() {    let pyodide = await loadPyodide();    output.value += "Ready!\n";    return pyodide;  }  let pyodideReadyPromise = main();  async function evaluatePython() {    let pyodide = await pyodideReadyPromise;    try {      let output = pyodide.runPython(code.value);      addToOutput(output);    } catch (err) {      addToOutput(err);    }  }</script>@code{    public int ident = 0;       [Parameter]    public int Id{set;get;} = default!;}

What I would like is to parametrize the html inside the Component, and to be able to give an ID to this.My app is supposed to allow user to add blocks by clicking a button so I need an increasing ID.

If someone could help me out on this one, I think understanding this would enlighten my whole view on Blazor.

Thank you very much all

I tried to use Blazor TemplatedComponent, I tried to use RenderFragment but I failed to really understand how to use those.


Viewing all articles
Browse latest Browse all 4839

Trending Articles