ActionLink jQuery parameter

Question

I've created an ASP.NET MVC 2.0 application.

I have a dropdownbox with a list of “reports”. Next to the dropdown, I have two ActionLink. One that says “Add new report” and the other one say “Edit report”.

The “Add new report” link, is pretty straightforward … it calls a ViewResult in my Controller and returns a new View(). Great! this works no problem!

The “Edit report” link is a bit trickier since I wish to pass the selected ID of the item currently selected inside the dropdown to the ActionLink.

I've found an article that shows me how to AJAXify my ActionLink but I’m doing something wrong…

Here is the ActionLink in the View for the “Edit” link:

<%=Html.ActionLink("Edit report", "EditReport", "Report", null, new { id = "edit" })%>

Here is the jQuery click event to handle the “click”

$("#edit").click(function() {
   $.ajax({
     url: '<%=Url.Action("EditReport")%>',
     type: 'POST',
     data: { reportId: $('select[name="ReportId"] option:selected').val() },
     success: function(result) {
          //alert("succes");
     },
     error: function() {
          alert("error");
     }
     });
   return false;
});

Here is the method in the Controller:

public ViewResult EditReport(int reportId)
{
      return View("EditReport");
}

When placing a breakpoint in the Controller’s method, it gets hit and the parameter “reportId” is correctly passed…but the rest of the code (return View() portion) does not seem to work because inside the jQuery click event, I have a “return false”.

When removing the “return false” inside the click event, the breakpoint no longer gets hit. Thus, I can't go to my “EditReport” view…

What am I missing/not understanding here?

Also … is there a better/nicer/cleaner approach to achieve my task without having to use an AJAX call?

have you tried on your action to return json or string instead of view? — Emmanuel N
– Emmanuel N, Commented Oct 20, 2011 at 18:29
Well…the thing is that I wish to show a different (“EditReport”) view which will be strongly typed. That view will have a form allowing the user to edit the report information. Correct me if I’m wrong but, returning json won’t redirect me to another view correct? Perhaps my entire approach is wrong. — Vlince
– Vlince, Commented Oct 20, 2011 at 18:57
You don't have to use ajax to redirect user to other view, I believe the purpose of ajax to update page content without reloading the entire page. — Emmanuel N
– Emmanuel N, Commented Oct 20, 2011 at 19:10
I agree with you, ajax is usually used to update parts of the pages without a full reload. And since I wish to show a different View() ajax seems of no use to me BUT how can I pass the selected ID (of the item in my dropdown) as a parameter to my ActionLink? Hence why I figured the only way was with ajax…unless of course, there’s a different approach. — Vlince
– Vlince, Commented Oct 20, 2011 at 19:15
Ok I found a way! I'll post the reply tomorrow since I can't answer my own post :-( Thanks — Vlince
– Vlince, Commented Oct 20, 2011 at 20:13

Mamun · Accepted Answer · 2018-12-04 05:57:18Z

19

Ok, since I now can post the answer here it is (if anyone is interested):

First, I needed to modify the ActionLink and put in a predefined value for the parameter which will be replaced once the link is clicked.

<%=Html.ActionLink("Edit report", "EditReport", "Report", new { reportId="xxx"}, new { id = "edit" })%>

Second, modify the jQuery click event:

$("#edit").click(function() {
    //Get the id of the selected item in dropdown
    var id = $('select[name="ReportId"] option:selected').val();

    //Replace the predifined QueryString param "xxx" with the "id"
    this.href = this.href.replace("xxx", id);
});

Nothing changes in the Controller’s method…it stays the same:

public ViewResult EditReport(int reportId)
{
  //Fix me...
   return View("EditReport");
}

edited Dec 4, 2018 at 5:57

Mamun

69k9 gold badges51 silver badges62 bronze badges

answered Oct 21, 2011 at 11:58

Vlince

6,0317 gold badges50 silver badges64 bronze badges

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

1 Comment

Janco de Vries Over a year ago

How can I do this when I have multiple parameters? Seems like there is no way to replace multiple values at once with href.replace or in my case url.replace

Emmanuel N · Accepted Answer · 2011-10-20 20:25:41Z

0

You can do something like this, provided you have configured a route path for ControllerName/EditReports/{ReportId}

$("#edit").click(function() {
      window.location.href = '<%=Url.Action("EditReport")%>' +'/'+ $('select[name="ReportId"] option:selected').val();
      return false;
 });

edited Oct 20, 2011 at 20:25

answered Oct 20, 2011 at 20:13

Emmanuel N

7,4592 gold badges30 silver badges37 bronze badges

Collectives™ on Stack Overflow

ActionLink jQuery parameter

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related