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?

Answer 1

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" />

Answer 2

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.

Answer 3

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

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

Answer 4

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" />