如何在不刷新页面的情况下更新html表?

我有以下几点 playlist table 我从数据库中显示。当我点击其中一个按钮时 播放列表表 ,我想更新 Songs 在不更新页面的情况下单击其中一个按钮生成的HTML表。

@foreach (var item in Model.Item4.Playlists)
{
      //Populate list with PlaylistIDs
      result = item.Playlist_ID + "." + result;

      //For each Playlist generate a button
      <td onclick="showSongs('@result', '@item.Playlist_ID');">
          @Html.DisplayFor(modelItem => item.Playlist_Name)
          <span id="@item.Playlist_ID@item.Playlist_Name" style="display: none;" class="resize">@Html.DisplayFor(modelItem => item.Playlist_Name)</span>
      </td>
}

这是HTML Songs table 我想在不刷新页面的情况下更新:

 <div id='PlaylistsFromDB' class="Playlists">
        <!-- this is the container that will hold all the uploaded songs by the user-->
        <div class="container3">
             <table>
                    <tr Style="color: white;">
                        <th>
                             @Html.DisplayNameFor(model => model.Item3.Song_Name)
                        </th>
                    </tr>
                    <tr Style="color: white;" class="items">
                        @foreach (var item in Model.Item3.songsList)
                        {
                            <td onclick="myAudioFunction1('@item.Song_Name', '@item.Song_ID', '@item.Song_Audio')">
                                @Html.DisplayFor(modelItem => item.Song_Name)
                                <span id="@item.Song_ID@item.Song_Name" style="display: none;" class="resize">@Html.DisplayFor(modelItem => item.Song_Name)</span>
                                <span id="@item.Song_ID@item.Song_Audio" style="display: none;" class="resize">@Html.DisplayFor(modelItem => item.Song_Audio)</span>
                           </td>
                        }
                    </tr>
           </table>
         </div>     
     </div>

这是我的JS方法 showSongs 返回单击的播放列表的ID:

function showSongs(playlistNumber, currentPlaylistID) {
  var ArrayOfLists = playlistNumber.split('.');

  for (let i = 0; i < ArrayOfLists.length; i++) {
      if (ArrayOfLists[i] == currentPlaylistID) {
          var Id = "songsinplaylist" + currentPlaylistID;
          alert(Id);
          $.ajax({
              type: "POST",
              url: '/Home/GetID',
              dataType: "html",
              data: {
                  dataID: currentPlaylistID,
              },
              success: function (data) {
              },
              error: function (jqXHR, textStatus) {
                  //alert(textStatus);
              }

          });
          break;
      }
  }


  document.getElementById("songsdefault").style.display = "none";
  document.getElementById("home_first").style.display = "none";
  document.getElementById("PlaylistsFromDB").style.display = "initial";
}

这是JS方法触发的控制器:

[HttpPost]
    public IActionResult GetID(string dataID)
    {
        FetchPlaylistData();
        GetListofPlaylistIDs();
        String id;
        id = HttpContext.Session.GetString("User_ID");
        if (!string.IsNullOrEmpty(dataID))
        {
            ConnectionString();
            con.Open();
            com.Connection = con;
            com.CommandText = "update Consumer set CurrentPlaylistID = '" + dataID + "'  where User_ID ='" + id + "'";
            com.ExecuteNonQuery();
            con.Close();
            HttpContext.Session.SetString("CurrentPlaylistID", dataID);
            //Runs a query that obtains all the songs for the current playlist
            FetchSongData();
            return RedirectToAction("Update", Tuple.Create(consumer, storage, songsModel, playlistModel));
        }
        return RedirectToAction("Update", Tuple.Create(consumer, storage, songsModel, playlistModel));
    }