How to pass value of textBox in Ajax.ActionLink ?

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

Answer 1

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);
        });   
   });
});

    

Answer 2

User-79977429 posted

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

thanks

Answer 3

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
});

Answer 4

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