在 actionlink 中使用 select、option 值

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。当用户从下拉列表中选择时它不会更新（它将具有相同的初始值）。因此，您需要使用 javascript 或 jquery 更新锚点 href 值。

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

1) 给 ActionLink 一个 ID：

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

2) 为下拉列表的 onchange 事件添加事件监听器（应该在文档准备好/加载后调用）：

// 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
}); 

这将在选择列表更改时更新锚点 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>