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?

Answer 1

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>
} 

Answer 2

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

Answer 3

User366508955 posted

Hi!

The two ways worked! Thanks!