ページリロードせずにtableデータを更新する方法

Question

htmlやjavascriptが初心者で大変申し訳なく、かつ連投で大変恐縮なのですがご教示ください。

ASP.NETを用いてWebアプリケーションを作成しております。
以下のコードを実行してテーブル初期値を表示することはできているのですが、
データ変更や追加を、ページをリロードせずに実現するにはどのような方法がありますでしょうか。

テーブルのみの更新にはAjaxを使用するとStackOverflow等で見つけてはいるのですが、
リストで受け取るJson形式のデータをどうHtmlに反映させるかが分かりません。

public class StudentController{
    public IActionResult Index(){
        return View(studentList)
    }
    
    public JsonResult GetStudentInfo(){
        return Json(studentList)
    }
}

<div class="row">
    <div class="col-md-12">
        <table id="tbl_students" class="table">
            <thead>
                <tr>
                    <th>
                        @Html.DisplayNameFor(model => model.Name)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.Age)
                    </th>
                </tr>
            </thead>
            <tbody>
                @foreach (var item in Model)
                {
                    <tr>
                        <td>
                            @Html.DisplayFor(modelItem => item.Name)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.Age)
                        </td>
                    </tr>
                }
            </tbody>
        </table>
    </div>
</div>

以下のようなコードを足せばよい(???)と思っているのですが、詰まってしまっています。

$.ajax({
            url: '/Student/GetStudentInfo',
            method: get,
            data:,
            success: function (response) {
                $('tbl_students').html(response); body
            }
        });

Comments

[退会済みユーザー]

開発環境(OS, .NET, MVC, Visual Studio のバージョンなど)を書いてください。Ajax ヘルパーと部分ビューを使わないのですか？

[退会済みユーザー]

ASP.NET Core ですか？

Answer 1

JSONで受け取るなら、そのデータをもとにjavascriptでtableの構造を組み立ててあげる必要があると思います。
あと、jQueryでDOM要素をID指定で取り出す場合、IDの前に#をつける必要があります。(CSSセレクタと同じ)
JSONの中身が分からないのですが、配列とすれば以下のような感じでしょうか。

$.ajax({
    url: '/Student/GetStudentInfo',
    method: 'get',
    dataType: 'json',
    success: function (response) {
        let html = response.reduce((s, item) => {
            return s + '<tr><td>' + item.Name + '</td><td>' + item.Age + '</td></tr>';
        }, '');
        $('#tbl_students tbody').html(html);
    }
});