使用 select，操作链接中的选项值

Question

if (@ViewBag.Title == "Title")
{

@ViewBag.Title
<div class="btnNEW" hidden id="fqXLS">
<select id = "fqcXLS">
<option id ="fqcXLSa">A</option>
<option id ="fqcXLSb">B</option>
<option id ="fqcXLSc">C</option>
<option id ="fqcXLSd">D</option>
</select>

@Html.ActionLink("Export To Excel", "ExportToExcel", "EEC", new { option = ??? }, new { @class = "cancel" })
</div>
}

我可以通过执行 new{option="A"} 使其工作，但这只会发送 "A"

如何使用选择的值？

Answer 1

首次呈现页面时创建 ActionLink。当用户 select 来自下拉列表时，它不会更新（它将具有相同的初始值）。因此，您需要使用 javascript 或 jquery.

更新锚 href 值

有很多方法可以实现，下面是一个不显眼的方法：

1) 给 ActionLink 一个 ID：

@Html.ActionLink("Export To Excel", 
                 "ExportToExcel", 
                 "EEC", 
                  null, 
                  new { @id = "lnkCancel", @class = "cancel" })

2) 为下拉列表的 onchange 事件添加事件侦听器（这应该在文档为 ready/loaded 时调用）：

// get the dropdownlist
var ddl = document.getElementById('fqcXLS');

// add event listener for 'onchange'
ddl.addEventListener('change', function () {
    var url = '@Url.Action("ExportToExcel", "EEC")';           // base url
    var link = document.getElementById('lnkCancel');           // get link to update 
    var selectedValue = ddl.options[ddl.selectedIndex].value;  // get selected value
    link.href = url + '?option=' + selectedValue;              // update link href
});

这将在 select 列表更改时更新锚 href 属性。

var ddl = document.getElementById('mySelect');

ddl.addEventListener('change', function () {

  var url = 'somesite/myaction';           // base url
  var link = document.getElementById('lnkCancel');           // get link to update 
  var selectedValue = ddl.options[ddl.selectedIndex].value;  // get selected value
  link.href = url + '?option=' + selectedValue;              // update link href
  
  link.innerText = link.href;  // dont include this, this just shows the url text
});

<select id="mySelect" >
    <option value="A" selected>A</option>
    <option value="B">B</option>
    <option value="C">C</option>
    <option value="D">D</option>
    <option value="E">E</option>
 </select>
  
  <a href="somesite/myaction" id="lnkCancel" >Select item in dropdown</a>

使用 select，操作链接中的选项值

Using select, option value inside the actionlink

c#

parameters

html.actionlink