post <Asp:DropDownList> value with action link (asp.net MVC JQuery)

Question

I have an on my MVC View page. I use JQuery to filter a grid when the selected index changes.

At the bottom of the page I have an action link that. I would like to post this value to the controller that the action link is pointing to.

The problem is, obviously the value of the box can change.

How could I post dynamically changing data with an action link?

Answer 1

I think what I would do is use a form instead of an action link. Your jQuery would then update some hidden fields inside the form that correspond to the query parameters. Your "link" then (could be a button) would have an onclick handler that submits the form. If you care about the url -- and I can see where you might -- just have your controller action redirect to itself with the correct route parameters.

Alternatively, you could construct and replace the href on the ActionLink when the select changes. This would involve maintaining code in the view that understands how your routes are constructed.

Note: the following example would probably work better with the form wrapped around the dropdown itself and simply submitting on selection changed, but the pattern is what I'm interested in depicting.

 <script type="text/javascript">
     $(document).ready( function() {
         $('#formLink').click( function() {
            $(this).parent('form').submit();
            return false;
         });
         $('#PageSizeMenu').change( function() {
             $('#PageSize').val( $(this).val() );
         })
     });
 </script>

 <%= Html.DropDownList("PageSizeMenu", ... ) %>
 <% using (Html.BeginForm( "List" )) { %>
    <a id="formLink" href="some-reasonable-link-for-non-javascript">Go</a>
    <%= Html.Hidden("PageSize") %>
 <% } %>