CODEWITHSUNDEEP
jqueryasp.net-mvc-3razor
Yasser Shaikh
Yasser Shaikh

Reputation: 47774

Call an action using javascript and cause a post back

I need to call an action using a javascript method. That is I have a page with a link say like the one below,

      <a href="javascript:Sort();" >Click Me to Go</a>

and I need when a click is made to this I want to call an action which will return a view and I WANT A POST BACK to happen.

Below is what I have found to be working, but I am not sure if this is the right method, is there a way I could do this using $post, $ajax or $json ?

This is because I need to pass value to the action too.

 function Sort() {
        location.href='@Url.Action("ActioName")';
    }

Upvotes: 2

Views: 2727

Answers (4)

Skonen
Skonen

Reputation: 631

I'm assuming that since you did not provide route values in Url.Action(...), the data you'd like to post to the action is being set by the user on the client?

If so, one very simple way to do it is have a form with hidden fields (or perhaps visible if you want direct user interaction) and then set those fields on Sort, and then submit the form.

For example:

<form id='sortform' action='@Url.Action("ActionName")' method='POST'>
   <input type='hidden' name='MyFirstSortValue'>
   <input type='hidden' name='MySecondSortValue'>
</form>

And:

function Sort() {
     var formElem = document.getElementById('sortform');
     formElem.MyFirstSortValue.value = "blah";
     formElem.MySecondSortValue.value = "blah";
     formElem.submit();
}

If you are just having the user select sort information, then I suggest having the form inputs visible and use them directly, rather than setting them indirectly when Sort is called.

Once the above is done, you can access the information via the controller using FormCollection . For example:

[HttpPost]
public ActionResult ActionName(FormCollection form)
{
    string myFirstSortValue = form["MyFirstSortValue"];
    string mySecondSortValue = form["MySecondSortValue"];

    // Do something to sort the data in the model...

    return View(yourModel);

}

This will cause the post back to occur with the data being transferred, and the desired view to be displayed.

Upvotes: 2

HashCoder
HashCoder

Reputation: 946

If you want a call an action from javascript, then below will work. 

var somedata = null;
    $.ajax(
   {
       type: "POST",
       url: '@Url.Action("ActioName")',
       data: somedata,
       cache: false,       
       success: function (result) {
           //// if you want to go to a different page, then you can use 
           //// location.href='@Url.Action("ActioName")';
       },
       error: function (xhr, ajaxOptions, thrownError) {
                      alert(xhr.status);
                      alert(thrownError);
       }
   });

Upvotes: 0

karan k
karan k

Reputation: 967

@Html.ActionLink("LinkText","Action","Controller")

Try this

Upvotes: 0

Yorgo
Yorgo

Reputation: 2678

function Sort() {
$.ajax({
   url:"@Url.Action("ActioName")",
   success:function(data){
       //do some thing
   }
})
}

Upvotes: 0

Related Questions