C# Dataset to Html List on pageload

I created a c# mvc app over a year ago where I had a dataset of names and pictures and my app creating a new li for every person on the list when the page loaded.

<ul id="People-List">
    @foreach (var people in Model)
    {
        <li class="resize">
             <span>@Person.Name</span>
              <br />    
              <br />
              <img  alt="Image"src="/@Person.PicturePath" /></a> 
              <br />
       </li>

    }
</ul>

I want to make something similar in C# webforms using what I imagine would be C# and javascript.
I have been struggling to add new list items with Javascript and I could do with some advise on the best way to do this, the program would load a local database of people, put them into a dataset then pass the data to the front end where they get added to a javascript version of the code above, creating the html list depending on the data inside it.

I originally wrote this code, but I want to know if im doing it the right way since i will want to add buttons and a number of variables inside each of the list items

<ul id="nav" >  
              <script type="text/javascript">
               
                      a = new Array("pub 1", "pub 2", "pub 3");
                      for (var i = 0; i < a.length; i++)
                      {
                          document.write("<li>" + a[i]  + "</li> ");                      
                      }
                    
                </script>
          </ul>

Advice?

Tags: C#, Javascript, HTML, WebForms, ASP.NET