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

I was able to make it work just by doing new{option="A"} but this will only send "A"

How can I use the selected value?

locomotive
  • 25
  • 5
  • Looks like none of your ` – MichaelM Sep 17 '19 at 14:19
  • A So, after setting my options with values, how can I pass it from the actionlink? option = document.getElementById("fqxXLS").value ? or something like this? – locomotive Sep 17 '19 at 14:51
  • I've also tried @Html.ActionLink("Export To Excel", "ExportToExcel", "EEC", new { option= "getCategory();" }, new { @class = "cancel" }) creating a function to return the value of the ID, then call that function inside the actionlink. Doesn't seem to be working – locomotive Sep 17 '19 at 15:16

1 Answers1

0

The ActionLink is created when the page is first rendered. It is not updated when the user selects from the dropdownlist (it will have the same initial value). Therefore, you will need to update the anchor href value using javascript or jquery.

There are many ways to achieve this, below is an unobtrusive way:

1) Give the ActionLink an ID:

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

2) Add event listener for the onchange event of the dropdown list (this should be called once the document is 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
});

This will update the anchor href attribute when the select list is changed. 

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>
haldo
  • 14,512
  • 5
  • 46
  • 52
  • #1 giving the actionlink an id ``` => @Html.ActionLink("Export To Excel", "ExportToExcel", "EEC", new { @id = "fqcXLS" }, new { @class = "cancel" }) ``` like this? – locomotive Sep 17 '19 at 16:00
  • Does it not work the way I wrote it? @locomotive The `@id` should be set under HtmlAttributes where the `@class` tag is set. – haldo Sep 17 '19 at 17:01
  • You could also just replace the `Html.ActionLink` with a regular anchor tag with id ``. – haldo Sep 17 '19 at 17:06
  • The way you wrote? I don't know what lnkCancel is for – locomotive Sep 17 '19 at 19:36
  • You need to alter the URL of the link when the select list is changed. One way to do this is to give the link (ActionLink) an ID so you can change the value. `lnkCancel` was just the name I gave it, you can name it anything. You need to use javascsript or jquery to do what you want it to, its not possible without. @locomotive – haldo Sep 17 '19 at 22:47
  • So after editing your #1 and #2, how can I get the value from my function? public ActionResult ExportToExcel(String ???) – locomotive Sep 18 '19 at 14:27
  • I'm trying to send a selected value as the parameter attribute to the function. It works when I do new { name = "x"} but this will send only specific value "x". – locomotive Sep 18 '19 at 16:14
  • Yes, I know what you're trying to do. What is the problem? Does my code update the URL when the select list changes? You can check by hovering the mouse over the URL and inspecting the value. Does your project have jquery because a jquery solution would be simpler. @locomotive – haldo Sep 18 '19 at 16:34
  • I really can't understand how the actionlink works. In my method, what do I need to have in the parameter to get the value? Am I putting the #2 in the script function? – locomotive Sep 18 '19 at 18:08
  • I've tried doing public ActionResult ExportToExcel(String lnkCancel) and it give null for lnkCancel – locomotive Sep 18 '19 at 18:12
  • @Html.ActionLink("Export To Excel", "ExportToExcel", "EEC", new { category = "????" }, new { @class = "cancel" }) Instead of ????, I need to pass the selected value so that I can use it in the method public ActionResult ExportToExcel(String category) {...} like this – locomotive Sep 18 '19 at 18:21
  • conclusion: your way will give something like this but I do not know how to use this in the method parameter to get the value. I need something like so that I can use category parameter in my method to use the value. – locomotive Sep 18 '19 at 18:47
  • @locomotive Yes, exactly. That's what the javascript code does... it adds `?option=A` to the link when A is selected in the list. Put it in ` – haldo Sep 18 '19 at 18:52
  • `lnkCancel` has nothing to do with the controller... it's just an html ID for the anchor `` link. – haldo Sep 18 '19 at 18:56
  • ok, I think I understood what you were trying to say. So I did put #2 in a script at the end of the page, and used #1 actionlink. Then i used parameter option in my method, it's saying null. – locomotive Sep 18 '19 at 19:45
  • @locomotive I'm sorry, there was a couple of errors in my javascript. This line: `ddl.addEventListener('change', function () {` and this line `var selectedValue = ddl.options[ddl.selectedIndex].value;` have been corrected. Hope this works for you now. – haldo Sep 19 '19 at 09:17
  • Thank you so much!!! I got it now. Only other problem I'm having now is when I try to use the value from the parameter, it causes an issue. ...**method (string option){do something with option} = problem**... ...**method (string option){option = "value" then do something} = no problem**... Basically, I can see the value coming over as string, but it causes problems making excel file, which works fine when I just give a string value. – locomotive Sep 19 '19 at 14:55
  • @locomotive I'm glad the solution worked for you! I think it would be best to ask another question. I'm not sure what you mean, ... it would be easier to understand if you posted another question with an example of what the problem is :) – haldo Sep 19 '19 at 15:11