Answered by:
Value from asp-route-id dynamically

Question
-
User366508955 posted
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?
Tuesday, May 19, 2020 8:10 PM
Answers
-
User475983607 posted
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> }
- Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
Tuesday, May 19, 2020 8:47 PM -
User-854763662 posted
Hi 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
- Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
Wednesday, May 20, 2020 2:27 AM
All replies
-
User475983607 posted
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> }
- Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
Tuesday, May 19, 2020 8:47 PM -
User-854763662 posted
Hi 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
- Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
Wednesday, May 20, 2020 2:27 AM -
User366508955 posted
Hi!
The two ways worked! Thanks!
Wednesday, May 20, 2020 2:13 PM