2

In my Razor page I have an input box like this. I want to provide its contents as a parameter to the action link.

<input id="FullName" placeholder="Full name" />
@Html.ActionLink("beep", "Beep", new { Info = $("#FullName").val() })

I can access the value in the input box if I execute $("#FullName").val() from the console. However, it's not accepting the syntax in the action link (expects other characters, and such).

How can I retrieve the data and send it in?

Konrad Viltersten
  • 36,151
  • 76
  • 250
  • 438
  • Is this something you want done on keyup? – Drew Kennedy Mar 31 '16 at 22:38
  • @DrewKennedy Nope, not really. I want to provide a value that's in the text box and I don't want to submit the form. I was trying *@Html.TextBox("FullName")* but it didn't got recognized in the action link. – Konrad Viltersten Mar 31 '16 at 22:39
  • Right, I'm just confused by what you want. It *sounds* like you want the value of the `Info` attribute to be bound to the value of the input. Is that right? You can do that on a jQuery keyup event and doesn't require a form submission. – Drew Kennedy Mar 31 '16 at 22:43
  • @DrewKennedy Yupp, it's correct. That's what I want. However, I'd like the binding of the *Info* attribute to the contents of the *FullName* text box to be done in the Razor page code. Is it possible? Or is the jQuery approach the only way? – Konrad Viltersten Mar 31 '16 at 22:46
  • jQuery is probably your best bet. The inline JavaScript would be too insane. I'll provide you an HTML example that can be translated to your Razor code. – Drew Kennedy Mar 31 '16 at 22:49

1 Answers1

1

The simplest way I can think of is to bind your input to your action link using jQuery:

var fullName = $("#FullName");
//change this selector to grab your ActionLink's ID
var anchorInfo = $("a");

fullName.on("keyup", function() {
    var value = $(this).val();
    anchorInfo.attr("info", value);
    //logging the keystrokes getting to the Info attribute
    console.log(anchorInfo.attr("info"));
});

Here's a Fiddle of the straight up HTML interpretation.

EDIT

Fixed some bugs in the code. Should be good to go now.

Drew Kennedy
  • 4,118
  • 4
  • 24
  • 34
  • This is a nice solution. I wonder if it'd be possible to put it in a script tag inside the page... I tried but it didn't work out. Do I really have to add a JS file? For this specific case, I'd like to keep it all in the same file. It's a PoC. – Konrad Viltersten Mar 31 '16 at 22:58
  • It would totally be doable in a script tag in your Razor page. Just make sure jQuery is already available to it. :) – Drew Kennedy Mar 31 '16 at 23:00
  • Ah, that's it. It's not available there. In the console I have $ but in the script tag I do not... – Konrad Viltersten Mar 31 '16 at 23:04
  • Browsers (at least Chrome does) by default gives you jQuery in the console, that's why you had it there. Glad this helped! – Drew Kennedy Mar 31 '16 at 23:07