0

It's my first time using "select-option" tags, so please help me with this.

Here is my problem: I have created this for exporting data into different type of files (xls, doc, etc.):

<select class="btn btn-xs">
                    <option selected>Export to....</option>
                    <option>@Html.ActionLink("Export to Word", "ExportToWord", "Stock", FormMethod.Post)</option>
                    <option>@Html.ActionLink("Export to Excel", "Excel", "Stock", FormMethod.Post)</option>
                </select>

it allows me to select the type of export I choose, but it does not export the data. So I researched a little but I did not found something to help me.

Here is an example: Is there anyway to make actionlinks work inside a dropdown or the other from this link: using href links inside <option> tag. But I don't understand if all the code is inside the same controller how to do this?

Community
  • 1
  • 1
Jon A
  • 137
  • 2
  • 11
  • 1
    Because its invalid html (the only permitted content is text) –  Mar 13 '17 at 10:51
  • Can you please explain – Jon A Mar 13 '17 at 10:52
  • `select` and `option` are form tags. `a` tags aren't valid there which are links. – Daniel A. White Mar 13 '17 at 10:53
  • So if I do this: "", how can I use it so that When I choose it to do the export? – Jon A Mar 13 '17 at 10:54
  • Use javascript to handle the `.change()` event of the ` –  Mar 13 '17 at 10:57
  • I understand what you are saying: make that select and a button that does the export based on the selected value(for this I need something like a ID, to select that value?). – Jon A Mar 13 '17 at 11:00
  • 1
    Actually this is a bad idea UX-wise. Represent these actions using individual buttons. Not lease because: - change in the dropdown would result in undesired effects if the user uses keyboard to switch between the elements - then an onchange event would fire every time the user picks a new one. - since generating a word/excel file is costly (compared to just rendering an HTML page) you should use POST requests – Balázs Mar 13 '17 at 11:03

1 Answers1

1

You cannot have an element inside an option tag (action link will create an a tag). If you want to move to a link that is selected from a dropdown you'll want it to happen on the change event. Use an attribute that has the address inside like <option value="http://stackoverflow.com">. Have the change event look at the value attribute and use that.

Example:

$('#dropdownID').on("change", function () {
  var ddURL = $('option:selected', this).attr('value');
  window.location.href = ddURL;
});
Stuart Thomson
  • 509
  • 5
  • 21