save map bookmark for each user login using .net and javascript

Question

I want to create Bookmark widget, and I want each user can save his own bookmarks. and when login to the application can see only his bookmarks.

for this I have created an api to retrieve user bookmarks by userid BookmarkPage.aspx.cs

using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data.SqlClient;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace BookmarksApp
{
   public partial class BookmarkPage : System.Web.UI.Page
   {
       SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["mycon"].ToString());
       private static string userid;

       protected void Page_Load(object sender, EventArgs e)
       {
            string userid = Request.QueryString["Parameter"];
           //using (SqlCommand cmd = new SqlCommand("select * from Bookmarks where BookmarkID='" + '6' + "'"))
       }
       [WebMethod]
       public static List<Bookmark> Btn_Login_Click()
       {
           string constr = ConfigurationManager.ConnectionStrings["mycon"].ConnectionString;
           using (SqlConnection con = new SqlConnection(constr)) 
           {
                using (SqlCommand cmd = new SqlCommand("select * from Bookmarks where UserID = '" + userid + "'"))
              // using (SqlCommand cmd = new SqlCommand("select * from Bookmarks"))

               {
                   cmd.Connection = con;
                   List<Bookmark> bookmark = new List<Bookmark>();
                   con.Open();
                   using (SqlDataReader sdr = cmd.ExecuteReader())
                   {
                       while (sdr.Read())
                       {
                           bookmark.Add(new Bookmark
                           {
                               BookmarkID = (int)sdr["BookmarkID"],
                               name = sdr["name"].ToString(),
                               xmin = sdr["xmin"].ToString(),
                               ymin = sdr["ymin"].ToString(),
                               xmax = sdr["xmax"].ToString(),
                               ymax = sdr["ymax"].ToString(),
                               UserID = (int)sdr["UserID"],
                           });
                       }
                   }
                   con.Close();
                   return bookmark;
               }
           }

       }
   }
}

this working fine with me but I received data like this

[
{
  "__type": "BookmarksApp.Bookmark",
  "BookmarkID": 1,
  "name": "San Diego, CA",
  "xmin": "-13048800",
  "ymin": "3844800",
  "xmax": "-13037800",
  "ymax": "3870400",
  "UserID": 6
},
{
  "__type": "BookmarksApp.Bookmark",
  "BookmarkID": 2,
  "name": "Redlands, California",
  "xmin": "-13052100",
  "ymin": "4024900",
  "xmax": "-13041100",
  "ymax": "4050500",
  "UserID": 6
}
]

I want to recive data like this

// Bookmark data objects
         var bookmarkJSON = {
           first: {
             "extent": {
               "xmin": -12975100,
               "ymin": 3993900,
               "xmax": -12964100,
               "ymax": 4019500,
               "spatialReference": {
                 "wkid": 102100,
                 "latestWkid": 3857
               }
             },
             "name": "Palm Springs, CA"
           },
           second: {
             "extent": {
               "xmin": -13052100,
               "ymin": 4024900,
               "xmax": -13041100,
               "ymax": 4050500,
               "spatialReference": {
                 "wkid": 102100,
                 "latestWkid": 3857
               }
             },
             "name": "Redlands, California"
           },
           third: {
             "extent": {
               "xmin": -13048800,
               "ymin": 3844800,
               "xmax": -13037800,
               "ymax": 3870400,
               "spatialReference": {
                 "wkid": 102100,
                 "latestWkid": 3857
               }
             },
             "name": "San Diego, CA"
           },
         };

this my js code

require([
         "esri/map",
         "esri/dijit/Bookmarks",
         "dojo/domReady!"
       ],
       function (Map, Bookmarks){
         var map = new Map("map", {
           basemap: "topo-vector",
           center: [-100, 40],
           zoom: 4
         });

         // Create the bookmark widget
         // specify "editable" as true to enable editing
         var bookmarks = new Bookmarks({
           map: map,
           bookmarks: [],
           editable: true
         }, "bookmarks");
// Add bookmarks to the widget
         Object.keys(bookmarkJSON).forEach(function (bookmark){
           bookmarks.addBookmark(bookmarkJSON[bookmark]);
         });
         });
      
       $(function () {
         
           $.ajax({
               type: "POST",
               url: "BookmarkPage.aspx/Btn_Login_Click",
               data: bookmarkJSON ,
               contentType: "application/json; charset=utf-8",
               dataType: "json",
               success: OnSuccess,
               failure: function (response) {
                   alert(response.d);
               },
               error: function (response) {
                   alert(response.d);
               }
           });
       });

       function OnSuccess(response) {
           var bookmark = response.d;
           console.log("bookmark", bookmark)
          
       }

also how I can save bookmarks for each user ?!