在Ajax.ActionLink的中间运行javascript函数

Question

here is the problem: I have an Ajax.ActionLink() in which I need to provide a value from textbox for routeValues:

@Ajax.ActionLink("Purchase Tracking", "StatusOfFactor", "Shopping", new { guid = HERE I WANT A JAVASCRIPT FUNCTION TO RETRIEVE VALUE FROM TEXTBOX } , ajaxOptions: new AjaxOptions { UpdateTargetId = "StatusOfFactor", HttpMethod = "GET", InsertionMode = InsertionMode.Replace }, htmlAttributes: new { @class = "btnpeyment btn btn-xs bg-color-btn" })

how should I implement it?

Answer 1

$('#textBoxID').on('change', function(event){
   var value = $('#textBoxID').val();
   $('#ajaxLinkID').attr('guid', value);
})

Replace the IDs with the ones you are using.

Note: If the textbox was placed on the page via an AJAX call, you will need to use event delegation to make this work, delegate it to the parent container that was originally loaded on the page.

Answer 2

You can replace the Ajax.ActionLink and write some javascript code yourself to achieve what you are after.

To start, we will replace the Ajax action link with a normal anchor tag

<a id="purchasTrackingLink" class="btnpeyment"
                    href="@Url.Action("StatusOfFactor","Shopping")">Purchase Tracking</a>
<input id="YourTextBoxId" />

Now wireup the click event on this link, prevent the default behavior, read the value of your textbox and use that to generate the new target url and use that for the ajax call.p

$(function(){

   $("#purchasTrackingLink").click(function(e){

       e.preventDefault();

       var textBoxVal=$("#YourTextBoxId").val();
       var url=$(this).attr("href");
       url=url+"?guid="+textBoxVal;
       //Now make the ajax call
       $.get(url,function(response){
          $("#StatusOfFactor").html(response);
       });

   });

});