locked
Value from asp-route-id dynamically RRS feed

  • 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