Asked by:
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
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