locked
How to pass value of textBox in Ajax.ActionLink ? RRS feed

  • Question

  • User-79977429 posted

    Hi

    Suppose, i have a simple input element with actionLink as follow :

    <div id="contactFormActionLink">
    
        <input type="text" id="msgActionLink" name="msgActionLink" class="form-control" />
        @Ajax.ActionLink("Submit using AjaxActionLink!", "ContactActionLink", "Home"
        , new { msgActionLink = "Hi!" }
        , new AjaxOptions { HttpMethod = "get", UpdateTargetId = "contactFormActionLink", InsertionMode = InsertionMode.Replace }
        )
    </div>

    This code works for sample data (Hi), But i want to pass value of input element. how can i do that (without submit form, ...)?

    thanks in advance

    Tuesday, April 14, 2020 3:02 PM

All replies

  • User-474980206 posted

    if you review the source code:

       https://github.com/aspnet/jquery-ajax-unobtrusive/blob/master/src/jquery.unobtrusive-ajax.js

    you will see at line 88 is the url is stored in [data-ajax-url]. if you view page source you will see the value has ?msgActionLink=Hi! appended to the url. this means when the input value changes you need to update this url. 

    a better approach is to not use an action link and write your own ajax call:

    <a href="@Url.Action("ContactActionLink", "Home")" id="btnActionLink">
        Submit using AjaxActionLink!
    </a>
    
    $(function() {
       $('#btnActionLink').click(function(e) {
            e.preventDefault();
            $.ajax({
                url: e.target.href,
                data: {
                    msgActionLink: $('#msgActionLink').val()
                },
                method: "GET"
            }).done(function(r) {
                $("#contactFormActionLink").html(r);
            });   
       });
    });


        

    Tuesday, April 14, 2020 3:27 PM
  • User-79977429 posted

    Can u give me a sample code which how to change url?

    thanks

    Tuesday, April 14, 2020 4:12 PM
  • User-474980206 posted

    you may need a URL pollyfill for older browsers (like IE - just google URL pollyfill):

    $(function() {
       $('#msgActionLink').change(function() {
          var $this = $(this);
          var url = new URL($this.attr('data-ajax-url'));
          
          url.searchParams.set('msgActionLink',this.value);
          $this.attr('data-ajax-url', url.toString());
       }).trigger('change'); // initial to rendered input value
    });

    Tuesday, April 14, 2020 5:35 PM
  • User-17257777 posted

    Hi hamed_1983,

    You can find the Ajax.ActionLink will be render to <a> in html. And the new { msgActionLink = "Hi!" } will be added to href like  this:

    href="/Home/ContactActionLink?msgActionLink=Hi"

    So, we can use js to replace the value of msgActionLink.

    <div id="contactFormActionLink">
        <input type="text" id="msgActionLink" name="msgActionLink" class="form-control" />
        @Ajax.ActionLink("Submit using AjaxActionLink!", "ContactActionLink", "Home"
        , new { msgActionLink = "Hi" }
        , new AjaxOptions { HttpMethod = "get", UpdateTargetId = "contactFormActionLink", InsertionMode = InsertionMode.Replace }
        , new {id = "Test"}
        )
    </div>
    
    @section scripts{
        @Scripts.Render("~/Scripts/jquery.unobtrusive-ajax.min.js")
    <script>
        $(function () {
            $("#msgActionLink").change(function () {
                var data = document.getElementById('msgActionLink').value;
                $("#Test").attr('href', $("#Test").attr('href').replace("Hi", data));
            })
        });
        </script>
    }

    Result:

    Best Regards,

    Jiadong Meng

    Thursday, April 16, 2020 9:24 AM