title: How do I populate a list field in a model from javascript?
body: <p>I have a Kendo.MVC project.  The view has a model with a field of type List&lt;>.  I want to populate the List from a Javascript function.  I've tried several ways, but can't get it working.  Can someone explain what I'm doing wrong?</p>
  
  <p>So here is my model:</p>
  
  <pre><code>public class Dashboard
  {
      public List&lt;Note&gt; ListNotes { get; set; }
  }
  </code></pre>
  
  <p>I use the ListNotes on the view like this:</p>
  
  <pre><code>foreach (Note note in Model.ListNotes)
  {
      @Html.Raw(note.NoteText)
  }
  </code></pre>
  
  <p>This works if I populate Model.ListNotes in the controller when the view starts...</p>
  
  <pre><code>public ActionResult DashBoard(string xsr, string vst)
      {
          var notes = rep.GetNotesByCompanyID(user.ResID, 7, 7);
          List&lt;Koorsen.Models.Note&gt; listNotes = new List&lt;Koorsen.Models.Note&gt;();
  
          Dashboard employee = new Dashboard
          {
              ResID = intUser,
              Type = intType,
              FirstName = user.FirstName,
              LastName = user.LastName,
              ListNotes = listNotes
          };
  
          return View(employee);
      }
  </code></pre>
  
  <p>... but I need to populate ListNotes in a Javascript after a user action.</p>
  
  <p>Here is my javascript to make an ajax call to populate ListNotes:</p>
  
  <pre><code>function getReminders(e)
  {
      var userID = '@ViewBag.CurrUser';
      $.ajax({
          url: "/api/WoApi/GetReminders/" + userID,
          dataType: "json",
          type: "GET",
          success: function (notes)
          {
              // Need to assign notes to Model.ListNotes here
          }
      });
  }
  </code></pre>
  
  <p>Here's the method it calls with the ajax call.  I've confirmed ListNotes does have the values I want; it is not empty.</p>
  
  <pre><code>public List&lt;Koorsen.Models.Note&gt; GetReminders(int id)
      {
          var notes = rep.GetNotesByCompanyID(id, 7, 7);
          List&lt;Koorsen.Models.Note&gt; listNotes = new List&lt;Koorsen.Models.Note&gt;();
  
          foreach (Koorsen.OpenAccess.Note note in notes)
          {
              Koorsen.Models.Note newNote = new Koorsen.Models.Note()
              {
                  NoteID = note.NoteID,
                  CompanyID = note.CompanyID,
                  LocationID = note.LocationID,
                  NoteText = note.NoteText,
                  NoteType = note.NoteType,
                  InternalNote = note.InternalNote,
                  NoteDate = note.NoteDate,
                  Active = note.Active,
                  AddBy = note.AddBy,
                  AddDate = note.AddDate,
                  ModBy = note.ModBy,
                  ModDate = note.ModDate
              };
  
              listNotes.Add(newNote);
          }
  
          return listNotes;
      }
  </code></pre>
  
  <p>If ListNotes was a string, I would have added a hidden field and populated it in Javascript.  But that didn't work for ListNotes.  I didn't get an error, but the text on the screen didn't change.</p>
  
  <pre><code>@Html.HiddenFor(x =&gt; x.ListNotes)
  ...
  ...
  $("#ListNotes").val(notes);
  </code></pre>
  
  <p>I also tried </p>
  
  <pre><code>@Model.ListNotes = notes; // This threw an unterminated template literal error
  
  document.getElementById('ListNotes').value = notes;
  </code></pre>
  
  <p>I've even tried refreshing the page after assigning the value:</p>
  
  <pre><code>window.location.reload();
  </code></pre>
  
  <p>and refreshing the panel bar the code is in</p>
  
  <pre><code>var panelBar = $("#IntroPanelBar").data("kendoPanelBar");
  panelBar.reload();
  </code></pre>
  
  <p>Can someone explain how to get this to work?</p>
  
  <p>I don't know if this will cloud the issue, but the reason I need to populate the model in javascript with an ajax call is because Model.ListNotes is being used in a Kendo Panel Bar control and I don't want Model.ListNotes to have a value until the user expands the panel bar.</p>
  
  <p>Here's the code for the panel bar:</p>
  
  <pre><code>@{
      @(Html.Kendo().PanelBar().Name("IntroPanelBar")
          .Items(items =&gt;
          {
          items
          .Add()
          .Text("View Important Notes and Messages")
          .Expanded(false)
          .Content(
              @&lt;text&gt;
                      @RenderReminders()
              &lt;/text&gt;
                  );
          }
          )
      .Events(e =&gt; e
      .Expand("getReminders")
      )
      )
  }
  </code></pre>
  
  <p>Here's the helper than renders the contents:</p>
  
  <pre><code>@helper RenderReminders()
  {
      if (Model.ListNotes.Count &lt;= 0)
      {
           @Html.Raw("No Current Messages");
      }
      else
      {
           foreach (Note note in Model.ListNotes)
           {
                 @Html.Raw(note.NoteText)
                 &lt;br /&gt;
           }
      }
  }
  </code></pre>
  
  <p>The panel bar and the helpers work fine if I populate Model.ListNotes in the controller and pass Model to the view.  I just can't get it to populate in the javascript after the user expands the panel bar.</p>