This is through the Blazor Server App.

I have a text file that looks like this:

TEXT00
Some title
TEXT10
8
DATA
110,4,2
110,0,6
110,0,32
110,4,16
110,0,16
110,4,3
110,0,2
...
...

There are two things I want to accomplish:

First I want such a file be loaded on to an editable table, where the numbers under the DATA line should go in each their own editable cell.

Illustration:

Secondly I want the content in the cells being able to be saved, such that it replaces the original text file in the directory.

With the press of a button, the file gets loaded in the a cell which is editable with the use of contenteditable="true". I have tried but failed at loading the numbers into their own cells. The save file button doesn't work when it comes to data cells.

Here is the open button, table and save button:

<button @onclick="OpenFile">Open file</button> 
<div >
    <table >
        <thead >
            <tr>
                <th>Title: </th>
            </tr>
            <tr>
                <th>Tempo</th>
                <th>Length</th>
                <th>Secs</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><div contenteditable="true">@_contents</div> </td>
                <td><div contenteditable="true"></div></td>
                <td><div contenteditable="true"></div></td>
            </tr>
            <tr>
                <td><div contenteditable="true"></div> </td>
                <td><div contenteditable="true"></div></td>
                <td><div contenteditable="true"></div></td>
            </tr>
        </tbody>
    </table>
</div>
<button @onclick="SaveFile">Save file</button>

Here are the functions which loads the file and the one which should save the new one.

@code {
    string _contents { get; set; } = string.Empty;

        void OpenFile()
        {
        
        _contents = File.ReadAllText(@"path");
        }

        void SaveFile()
        {
            File.WriteAllText(@"path", _contents);
        }
}

Does anyone have some knowledge on how to insert the numbers in cells such that when saved, the txt file gets replaced by the edits?

CodePudding user response：

To achive this you'll need to use binding elements. For example:

<input @bind="YourProperty" type="text" />

This needs to be done for each column and every row. The best solution would look something like this:

List<WhateverItem> items = new(); // This list should hold all your objects from your text file

public class WhateverItem
{
    public string Tempo { get; set; }
    public string Length { get; set; }
    public string Secs { get; set; }
}

Then in .razor

@foreach (var item in items) 
{
    <tr>
        <td>
            <input @bind="item.Tempo" type="text" />
        </td>
        <td>
            <input @bind="item.Length" type="text" />
        </td>
        <td>
            <input @bind="item.Secs" type="text" />
        </td>
    </tr>
}

When you save, you'll need to recreate the content out of the objects with a StringBuilder.

If you want to validate the fields, think of using an EditForm. Keep in mind that you can also bind to other types besides of string. You'll need to change the input type then.

Example of parsing the file into objects:

List<WhateverItem> items = new();
foreach (string line in System.IO.File.ReadLines(@"c:\test.txt"))
{
    string[] values = line.Split(',');

    if(values.Length == 3)
    {
        // Keep in mind you can also convert to values right here if you want
        items.Add(new WhateverItem
        {
            Tempo = values[0],
            Length = values[1],
            Secs = values[2]
        });
    }
}