ASP.Net MVC ActionLink

Question

I'm trying to create an ActionLink in one of my views that sends the selected value of a dropdown list to a new action. So far I have this, I just need to find a way to populate the ID on the end of my ActionLink.

   <%= Html.DropDownList("StatusDropDown") %>
   <%= Html.ActionLink("Apply","Index",new {Controller="Tasks", Action="Index", id="DROPDOWN LIST SECLECTED VALUE"}) %>

Obviously this link would need to be updated whenever the selected index of the drop down is changed. Is this something I need to do in javascript or is there a better way of managing this from within ASP.Net MVC?

Thanks

Answer 1

A link goes to another page, it is in effect a redirect. The only way to update where that link goes to with reference to the drop down list is with javascript.

It sounds like you want a kind of submit action. In that case you should use a form and a submit button, creating the appropriate handlers in your controller. Remember you can just do a redirect in your controller based upon the submitted value of the form. So something like this:

<form method="post" action="/MyForm">
    <input type="select" name="mySelect">
        <option value="1">First Option</option>
        <option value="2">Second Option</option>
    </input>
</form>

And in your controller:

public ActionResult MyForm(int mySelect)
{
    return Redirect(String.Format("myurl?id={0}", mySelect));
    // Note the above is only preferable if you're going to an external link
    // Otherwise you should use the below:
    return RedirectToAction("myAction", new { id = mySelect });
}

Obviously in this simplified example, the MyForm proxy to your desired action is redundant, but it illustrates the idea so you can apply it to your specific situation.

Answer 2

If you don't want to use form submission (i.e., want the parameter passed as part of the url instead of a form parameter), you'll need to build the url client-side with javascript.

<%= Html.DropDownList("StatusDropDown") %>
<a id="applyLink" href="#">Apply</a>

<script type="text/javascript">

    function setHref( elem, val )
    {
        if (val) {
           $(elem).attr( "href", "/Tasks/" + val );
           $("#applyLink").unbind("click");
        }
        else {
           $(elem).attr( "href", "#" );
           $("#applyLink").click( function() { alert( "No value chosen" ); } );
        }
    }

    $(function() {
       var dropdown = $("#StatusDropDown");
       dropdown.change( function() {
           setHref( this, $(this).val() );
       });
       setHref( dropdown, null );
    });
</script>