Pass user input with Ajax.ActionLink and setting url parameter

Question

Well, all I want is to pass user input without using explicit jquery ajax methods. My idea is following: trying to use Ajax.ActionLink and set necessary parameters for ajax before ajax-itself:

@Ajax.ActionLink("Call date", "CallingHistory", "Member", new {sortOrder = ViewBag.DateSortParam, pageNumber = ViewBag.PageNumber}, new AjaxOptions {UpdateTargetId = "historytable", HttpMethod = "get", OnBegin = "SetUrlParameters"}, new {id = "calldatetimelink"})

and js-code for setting Url-parameters for Action:

<script>
function setUrlParameters() {
    var k = 0;
    this.href = this.href + "?includedialling=" + $("#chBox1").val();
    this.href = this.href + "?includeincomingmissedcalls=" + $("#chBox2").val();
    this.href = this.href + "?includeoutcomingmissedcalls=" + $("#chBox3").val();
}
</script>

Action method signature looks like this:

 public Task<ActionResult> CallingHistory(string sortOrder, int pageNumber, bool? includedialling,
        bool? includeincomingmissedcalls, bool? includeoutcomingmissedcalls){...}

Notice that js-method is executed before ajax-request. Is it possible to do that? I've been some confused cause of want to set breakpoint to js-method but can't see it in chrome web-tools. Thanks in advance.

UPDATE: Yep, think this should work, but i changed script cause of parameters are added in infinite way:

function setUrlParameters(data) {
    var oldref = data.href;
    var par1 = '&includedialling=' + $("#chBox1").is(":checked");
    var par2 = '&includeincomingmissedcalls=' + $("#chBox2").is(":checked");
    var par3 = '&includeoutcomingmissedcalls=' + $("#chBox3").is(":checked");

    var arr = data.href.split('&');
    var resultUrl = arr[0] + arr[1] + par1 + par2 + par3;
    $("#calldatetimelink").href = resultUrl;
}

And got en error in chrome web-tools:

GET localhost:50307/Views/Shared/Partial/Member/CallingHistory.cshtml?X-Requested-With=XMLHttpRequest&_=1409287722659 404 (Not Found)

Debugger in script shows such value of resultUrl variable:

//localhost:50307/Member/CallingHistory?sortOrder=datepageNumber=1&includedialling=false&includeincomingmissedcalls=true&includeoutcomingmissedcalls=false. - All is good. But eventually i haven't got result yet. Where is this string 'X-Requested-With=XMLHttpRequest&_=1409287722659' appears from? Obviously, this is browser's behaviour.

Kartikeya Khosla · Accepted Answer · 2014-08-29 03:14:04Z

1

Yes..In your question you are calling setUrlParameters in a right way but you are using this inside setUrlParameters function and you are not supplying it do this way instead :

@Ajax.ActionLink("Call date", "CallingHistory", "Member", new {sortOrder = 
ViewBag.DateSortParam, pageNumber = ViewBag.PageNumber}, new AjaxOptions 
{UpdateTargetId = "historytable", HttpMethod = "get", OnBegin = 
"SetUrlParameters(this)"}, new {id = "calldatetimelink"})

<script>
function  setUrlParameters(data) {
  var link;
  link = data.href + "&includedialling=" + $("#chBox1").is(':checked') + "&includeincomingmissedcalls=" + $("#chBox2").is(':checked') + "&includeoutcomingmissedcalls=" + $("#chBox3").is(':checked');
  $("#calldatetimelink").attr('href',link)
}
</script>

and don't forget to include 'jquery.unobtrusive-ajax.min.js' file in your page or on layout page.

edited Aug 29, 2014 at 3:14

answered Aug 28, 2014 at 9:27

Kartikeya Khosla

18.9k8 gold badges46 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

Ryan Over a year ago

Thanks, Exception. I'm just a novice in jquery.

Ryan Over a year ago

OnBegin js function is fired, i see that url parameters are set, but in server side method gets null-values.

Ryan Over a year ago

Parameters are not passed - This way doesn't work. )

Ryan Over a year ago

Well, more common question: i am doing table for sorting data and pagination, table headers are ajax.action links, server side method (aforemetioned above) has 5 parameters and first 2 parameters are passed correctly always. But those, which are set in OnBegin are NULL. As i understand the only way to pass user input is to rewrite without Ajax.action link? Link to ajax.unobtrusive.js library is included.

Kartikeya Khosla Over a year ago

@Rayan...I think above answer should work...just check carefully the spellings and instead of '?' it should be '&' shown above..just check and put a alert box after making complete url in javascript function..it should work...

|

Collectives™ on Stack Overflow

Pass user input with Ajax.ActionLink and setting url parameter

1 Answer 1

11 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

11 Comments

Your Answer

Sign up or log in

Post as a guest

Related