title: Dynamically change input value depending on select list item in ASP.NET Core 3 Razor Pages
body: <p>I'm working on an ASP.NET Core 3.1 web app with Razor Pages. I have the following classes (simplified):</p>
  
  <pre><code>public class Activity
  {
      public int ActivityId { get; set; }
      public string ActivityName { get; set; }
      public decimal PointsPerUnit { get; set; }
  }
  
  public class ActivityLog
  {
      public int ActivityLogId { get; set; }
      public int ActivityId { get; set; }
      public int Units { get; set; }
      public decimal TotalPoints { get; set; }
  
      public Activity Activity { get; set; }
  }
  </code></pre>
  
  <p>There is a foreign key between the two SQL tables, on the field ActivityId.</p>
  
  <p>And here is my Razor page (simplified):</p>
  
  <pre><code>&lt;form method="post"&gt;
      &lt;div asp-validation-summary="ModelOnly" class="text-danger"&gt;&lt;/div&gt;
  
      &lt;div class="form-group"&gt;
          &lt;label asp-for="ActivityLog.ActivityId" class="control-label"&gt;&lt;/label&gt;
          &lt;select id="activityId" asp-for="ActivityLog.ActivityId" class="form-control" asp-items="ViewBag.ActivityId"&gt;
              &lt;option value=""&gt;&lt;/option&gt;
          &lt;/select&gt;
      &lt;/div&gt;
  
      &lt;div class="form-group"&gt;
          &lt;label asp-for="ActivityLog.Units" class="control-label"&gt;&lt;/label&gt;
          &lt;input asp-for="ActivityLog.Units" class="form-control" id="units" /&gt;
          &lt;span asp-validation-for="ActivityLog.Units" class="text-danger"&gt;&lt;/span&gt;
      &lt;/div&gt;
  
      &lt;div class="form-group"&gt;
          &lt;label asp-for="ActivityLog.TotalPoints" class="control-label"&gt;&lt;/label&gt;
          &lt;input asp-for="ActivityLog.TotalPoints" class="form-control" readonly="@true" value="" id="totalPoints" /&gt;
          &lt;span asp-validation-for="ActivityLog.TotalPoints" class="text-danger"&gt;&lt;/span&gt;
      &lt;/div&gt;
  
      &lt;div class="form-group"&gt;
          &lt;input type="submit" value="Create" class="btn btn-primary" /&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  
  @foreach (var item in Model.Activities)
  {
      &lt;input id="activity-@item.ActivityId" type="hidden" value="@item.PointsPerUnit" /&gt;
  }
  </code></pre>
  
  <p>I also have a Razor page to create new "ActivityLog". On that page I have a select list (dropdown) populated with a List in which the Value is the ActivityId and the Text is the ActivityName.</p>
  
  <p>What I need to do is to dynamically calculate the field TotalPoints when the user selects an Activity from the select list and inputs a value in the Units field (TotalPoints = PointsPerUnit * Units).</p>
  
  <p>The problem is I can't find a way to access the PointsPerUnit for the selected Activity inside the Razor page and dynamically set the value of the TotalPoints field.</p>
  
  <p>I managed to do it using JavaScript, but I guess there is a better and cleaner approach. Here is the code that worked for me:</p>
  
  <p>(external JS file):</p>
  
  <pre><code>$(document).ready(function () {
      $(document).on("change", "#activityId", calculateTotalPoints);
      $(document).on("change", "#units", calculateTotalPoints);
  
      function calculateTotalPoints() {
          var units = $("#units").val();
          var pointsPerUnit = $("#activity-" + $("#activityId").val()).val();
  
          if (units != "" &amp;&amp; pointsPerUnit != "") {
              var totalPoints = units * pointsPerUnit;
              console.log("totalPoints: " + totalPoints);
              $("#totalPoints").val(totalPoints);
          }
          else {
              $("#totalPoints").val("");
          }
      }
  });
  </code></pre>
  
  <p>I still have only 2 rows in the Activity table, but if it grows it would mean creating many hidden inputs on the page. Is there a way to do it without client-side code?</p>
  
  <p>Thanks.</p>