Value from asp-route-id dynamically[Answered] RSS

• • Reply
  viIsrael

  Member

  2 Points

  2 Posts

  Value from asp-route-id dynamically

  May 19, 2020 08:10 PM|viIsrael|LINK

  Hey guys,

  How can I select an item on <select> object and send it's value to an asp-route-id?

  I have this code:

  <div class="col-8 p-0" style="margin-left:-16px;">
       <select id="slctProcedure" class="form-control selectpicker" data-live-search="true" asp-items="@ViewBag.Procedures" onchange="onSelectedIndexChanged(this)">
               <option value="-1" selected>---------</option>
       </select>
  </div>
  
  <div class="col-2">
       <a id="btnAddProcedure" class="btn btn-outline-primary" asp-controller="CustomerService" asp-action="AddProcedureToAppointment" asp-route-id="@ProcedureID" style="border-radius:30px;">
                 <i class="fas fa-plus"></i>
       </a>
  </div>
   
  <script>
      function onSelectedIndexChanged(value) {
          var textValue = value.options[value.selectedIndex].value;
          document.getElementById("ProcedureID").value = textValue;
   
          $("btnAddProcedure").attr("asp-route-id", document.getElementById("ProcedureID").value);
          
      }
  </script>
  

  My controller:

  public async Task<IActionResult> AddProcedureToAppointment(string id){
  ...
  }

  But when I click in <a> I only get zero (initial value of @ProcedureID) not the value on <select>. What I'm doing wrong? How can I do this?

  How can I do this?

• • Reply
  mgebhard

  All-Star

  53751 Points

  24068 Posts

  Re: Value from asp-route-id dynamically

  May 19, 2020 08:47 PM|mgebhard|LINK

  Write click handler and read the select value.

  @{
      ViewData["Title"] = "Index";
  }
  
  <h1>Index</h1>
  @Html.ActionLink("test", "Test")
  
  <div class="col-8 p-0" style="margin-left:-16px;">
      <select id="slctProcedure" name="slctProcedure">
          <option value="-1" selected>---------</option>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
      </select>
  </div>
  <div class="col-2">
      <a id="btnAddProcedure" class="btn btn-outline-primary" asp-controller="JQuery" asp-action="AddProcedureToAppointment" style="border-radius:30px;">
          <i class="fas fa-plus"></i>
      </a>
  </div>
  <div id="message"></div>
  
  
  
  @section scripts {
  <script>
      $('#btnAddProcedure').click(function (e) {
          e.preventDefault();
          var id = $('#slctProcedure').val();
          if (id > 0) {
              window.location.href = $(this).attr('href') + '/' + id;
          }
          else {
              $('#message').text('select an option first!')
          }
      });
  </script>
  } 

• • Reply
  Sherry Chen

  Contributor

  2070 Points

  606 Posts

  Re: Value from asp-route-id dynamically

  May 20, 2020 02:27 AM|Sherry Chen|LINK

  Hi viIsrael ,

  viIsrael

  <a id="btnAddProcedure" class="btn btn-outline-primary" asp-controller="CustomerService" asp-action="AddProcedureToAppointment" asp-route-id="@ProcedureID" style="border-radius:30px;">

  asp-controller ,asp-action,asp-route-id represents the controller name,action name and the route value in the generated href attribute of <a> like <a href="/CustomerService/AddProcedureToAppointment/1"  id="btnAddProcedure" class="btn btn-outline-primary"></a>

  As mgebhard suggested , you should set the href attribute of <a> like below:

  function onSelectedIndexChanged(value) {
          var textValue = value.options[value.selectedIndex].value;
          var newhref=$("#btnAddProcedure").attr('href') + '/' + textValue ;
   
          $("#btnAddProcedure").attr("href", newhref);
          
      }

  Reference: Anchor Tag Helper attributes

  Best Regards,

  Sherry

  MSDN Community Support
  Please remember to click "Mark as Answer" the responses that resolved your issue.
  If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
  
• • Reply
  viIsrael

  Member

  2 Points

  2 Posts

  Re: Value from asp-route-id dynamically

  May 20, 2020 02:13 PM|viIsrael|LINK

  Hi!

  The two ways worked! Thanks!