Question How to allow cell on data table for edit and close after edit ?

ahmedaziz

Well-known member
Joined
Feb 22, 2023
Messages
55
Programming Experience
1-3
I work on asp.net razor page model . i face issue i can't edit datatable on same page by edit cell without redirect to another page

I need to edit cell on same page

my code details as below :

display data on page model:
public class UserModel
{
    public string Id { get; set; }
    public string Name { get; set; }
    public string Email { get; set; }
    // add other user properties as needed
}

public class IndexModel : PageModel
{
    private readonly YourDbContext _dbContext; // replace with your DbContext class

    public IndexModel(YourDbContext dbContext)
    {
        _dbContext = dbContext;
    }

    public List<UserModel> Users { get; set; }

    public void OnPost(string userId)
    {
        Users = _dbContext.Users
            .Where(u => u.Id == userId)
            .Select(u => new UserModel
            {
                Id = u.Id,
                Name = u.Name,
                Email = u.Email
                // map other user properties as needed
            })
            .ToList();
    }
}
I need to edit data on table by edit every cell on rows

edit view:
@if (Users != null && Users.Count > 0)
{
    <table class="table">
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Email</th>
                <!-- add other user property headers as needed -->
            </tr>
        </thead>
        <tbody>
            @foreach (var user in Users)
            {
                <tr>
                    <td>@user.Id</td>
                    <td>@user.Name</td>
                    <td>@user.Email</td>
                   <td>
          <button class="btn btn-primary edit-btn" data-id="@user.Id">Edit</button>
        </td>
                </tr>
            }
        </tbody>
    </table>
}
so How to allow edit cell by enabled for edit then close it after edit

this is image for what i need to do

1686338553521.png
 
So don't redirect to another page.
 
yes i need edit on same page by allow cell user name and branch and user type to open to edit it and save
 
And as I said, don't redirect to another page. Stay on the same page.

The easiest approach is to actually put input controls within the table cells instead of your current approach of putting in runs of text.

If you really want to use the runs of text, then the usual approach is to modify the DOM when the Edit button is clicked: replace the runs of text with input controls, replace the Edit button with a a Save button. When the Save button is clicked put the new values into the old runs of text and remove the input controls.
 
We are not a code writing service. How about you go give it a try first. Post back with an update of what you have tried and what problems you are running into.
 
why that
I think forum support csharp

Yes, this forum is for support for learning how to use C#. It is not a forum for getting free C# coding done for you. Just giving you code to use does not help you learn. Learning how to program is not done by rote memorization. Learning how to program is done by going through the discovery and problem solving process. Even in the realm of algorithms and data structures, it's not a matter of memorizing the algorithm or what the data structure looks like. It is a matter of understanding how the algorithm or data structure works so that you can always recreate it for your target language.
 
Back
Top Bottom