How to Customize Hyperlinks on Client Side in ASP.NET MVC

Question

I need to be able to do two things with Javascript or JQuery, without involving third-party open source libraries:

1. Use a jQuery or Javascript function to fill the HREF attribute of a link.

2. Perform an HTTP Get or Post operation OnUpdate of a text box or combo box (using the above javascript function to specify the HTTP target)

The end result will be hyperlinks posted to the controller that look similar to this:

http://mydomain/addresses/1?order=name&state=ca

The controller will return a new page, ordered by name and filtered on the state of California.

Suggestions?

Answer 1

I am not sure I follow...

Why do you need to fill the HREF of the link if your going to use JQuery to do the postback anyway?

Answer 2

1. Some elements of answer here : http://stackoverflow.com/questions/975050/passing-javascript-variable-to-a-href

2. If you want to load the controller response in the window, you can use a form with a crafted action. If not, you can either use an iframe as a target to the form or use an XHR object. Whatever solution you choose, you will link it to the onchange event of the text box or combo box.

Answer 3

If you have 2 textboxes and a hyperlink with url, try something like:

$(document).ready(function() {
    $('a#yourHyperLinkId').click(function(event) {
        event.preventDefault();
        var url = $(this).attr('href');
        var order = $('input#order').val();
        var state = $('input#state').val();
        $.get(url, { order: order, state: state }, function(response) {
            $('div#yourDivForResponse').html(response);
        });
    });
});

Answer 4

Thanks fellas for pointing me in the right direction.

Answer to #1:

document.getElementById("link2").setAttribute("href",strLink);

Answer to #2 (more or less):

$("#mySelect").change(function() {  
  document.location = this.value;
});