How can I pass a Textboxes value to my Ajax.ActionLink?

Question

In my ASP.NET MVC application I want a user to add a value into a textbox and then press my Ajax.ActionLink. I want to do something like this:

Ajax.ActionLink("Go", "Action", "Controller", new { value = textbox1.value })

Or how else can I get this textbox value back to my action? Jquery?

Alexander Prokofyev · Accepted Answer · 2009-05-15T09:27:29.307

2

You may run action using AJAX $.get method:

<script type="text/javascript">     

    $(document).ready(function()
    {
        $("#t").change(function()
        {
            RunAction();
        });

        RunAction();
    });

    function RunAction()
    {
        var action = '<%= Url.Action("Action", "Controller") %>';
        var data = $("#t").serialize();
        $.get(action, data);
    }

</script>

<input type="text" id="t" />

edited May 15 '09 at 09:27

answered May 15 '09 at 07:32

Alexander Prokofyev

33,874
33
95
118

That almost gets me there...but this does not create a AJAX call, but rather just a standard POST. – Whozumommy May 15 '09 at 08:33
I have changed code to make AJAX call. In case of need look also jQuery documentation to learn how to process returned ActionResult. – Alexander Prokofyev May 15 '09 at 09:30
Answer to this question (http://stackoverflow.com/questions/458055/jquery-mvc-user-controls) could also be useful. – Alexander Prokofyev May 15 '09 at 09:35
ofcoarse, I think I will rather use the jquery .load method however – John Mar 13 '12 at 11:29

score 2 · Answer 2 · answered May 15 '09 at 15:27

Thanks a lot Alexander! Thank you for putting me on the right path. I did not try you latest code, but I was able to get your previous code working. Here is the working code. I'm sure this is all kludgy, but perhaps someone out there can show me a more elegant solution:

            <script type="text/javascript">
                $(document).ready(function() {
                    $("#myVal").change(function() {
                        changeActionURL();
                    });
                    changeActionURL();
                });
            function changeActionURL() {
                var url = '<%= new UrlHelper(ViewContext.RequestContext).Action("Action", "Controller") %>' + '?dup=' + $("#myVal").val();
                $("#u").attr('href', url);
            }
            </script>

            <a id="u" href="" onclick="Sys.Mvc.AsyncHyperlink.handleClick(this, new Sys.UI.DomEvent(event), { insertionMode: Sys.Mvc.InsertionMode.replace, updateTargetId: 'HellaYeah' });">Report Dupe</a>

        </p>
        <div id="response">not done</div>

My solution as you can see is just to hard code the LINK instead of trying to use the ASP.NET AJAX helper class.

score 1 · Answer 3 · answered May 15 '09 at 06:35

1

this is how you retrieve the value from your textbox in JQuery

var input =  $('input[name=txt_MyTextBox]').val()

answered May 15 '09 at 06:35

Kostas Konstantinidis

13,347
10
48
61

Thank you, but I'm trying to get that data back to my server code...to me that means I need to pass the data back to the server via JSON or some other method. I'm HOPING asp.net has some tricky method to grab the data without having to rely on javascipt. – Whozumommy May 15 '09 at 06:39
Since the textbox and what is in it is on the client side, you will need to rely on client side scripting to make this happen. The exception is if instead of doing the Ajax call, you submit the form, then MVC process it on the server side for you. – Mitch Baker May 15 '09 at 07:10

score 0 · Answer 4 · 2009-12-22T19:13:41.653

replace $.get(action, data); with $("#yourTargetId").load(action, data); you get a ajax as in the following:

<script type="text/javascript">     

    $(document).ready(function()
    {
        $("#t").change(function()
        {
            RunAction();
        });

        RunAction();
    });

    function RunAction()
    {
        var action = '<%= Url.Action("Action", "Controller") %>';
        var data = $("#t").serialize();
        $("#yourTargetId").load(action, data);
    }

</script>

<input type="text" id="t" />

How can I pass a Textboxes value to my Ajax.ActionLink?

4 Answers4

Linked