Simple list on razor

Question

User-1556678718 posted

Hi

I have a model 

 public class KeySpec
    {
        public string Section { get; set; }
        public string Title { get; set; }
        public string Value { get; set; }
    }

and I have view where I can display all KeySpecs and add new. 

<div class="specs">
                    <div class="form-row mb-3">
                        <div class="col-3">
                            <input type="text" name="section" id="section" class="form-control" placeholder="Section">
                        </div>
                        <div class="col-4">
                            <input type="text" name="title" id="title" class="form-control" placeholder="Title">
                        </div>
                        <div class="col-3">
                            <input type="number" name="spec_value" id="spec_value" class="form-control" placeholder="Value">
                        </div>
                        <div class="col-2">
                            <button class="btn btn-primary">Add</button>
                        </div>
                    </div>


                    <table class="table">
                        
                        <tbody>
                            @foreach (var spec in specList)
                            {
                                <tr>
                                    <td>@spec.Section</td>
                                    <td>@spec.Title</td>
                                    <td>@spec.Value</td>
                                    <td></td>
                                </tr>
                            }
                        </tbody>
                    </table>

On pressing on the Add button  new row should be added in the spec table.  Should be added only in memory so controller should not be called. These are not the only models and buttons in this view. How do I make on pressing Add button new row to be added in the table without calling the controller?

Thanks

Answer 1

User-474980206 posted

You code it in JavaScript. If add a row is the only requirement then jquery should be up to the task. If it gets more complicated you might want to look at other frameworks. You will need to learn the html dom.

one issue you will face if you don’t post back on the add, is keeping track of the changes, then updating the server at some point. How is this done?

tribal code to add:

// note button and table should have id's

$(function() {
   $('button').click(function() {
       $('<tr></tr>')
         .append($('<td></td>').text($('#section').val()))
         .append($('<td></td>').text($('#title').val()))
         .append($('<td></td>').text($('#spec_value').val()))
         .appendTo('table');
   });
});

Answer 2

User-1556678718 posted

There is another button that is "Save" button. It should save everything all the table rows and all the other data