ASP.Net MVC 3.0 Ajax.ActionLink dynamic object route values using javascript

Question

0 Project

In my view I have a hidden filed which has a UserID. This user id is generated upon an action (so this will not be know prior)

Once this hidden field has a value, I would like to use that value as an actionlink routevalue. Can I do it with a jquery selector.

My hidden field is

<input id="NewUserID" type="hidden" value="80">

My ajax.ActionLink is

@Ajax.ActionLink("Edit", "EditUser", "User", new { UserID = "$('#GetNewPatientID').val()" },
        new AjaxOptions
        {
            OnSuccess = "ShowEditUserForm",
            UpdateTargetId = "EditUserDetails",
            InsertionMode = InsertionMode.Replace,
            HttpMethod = "Get"
        }, new { @class = "button", id = "EditUserButton" }) 

Any idea if this is possible?

Answer 1

When generating the action link on the server you could put some special placeholder for the UserID route value:

@Ajax.ActionLink(
    "Edit", 
    "EditUser", 
    "User",    
    new { 
        UserID = "__userid__" 
    },
    new AjaxOptions {
        OnSuccess = "ShowEditUserForm",
        UpdateTargetId = "EditUserDetails",
        InsertionMode = InsertionMode.Replace,
        HttpMethod = "Get"
    }, 
    new { 
        @class = "button", 
        id = "EditUserButton" 
    }
) 

and then when you assign a value to the hidden field in javascript you could update the action link href as well:

$('#EditUserButton').attr('href', function() {
    return this.href.replace('__userid__', $('#NewUserID').val());
});

Answer 2

Maybe something like this would work. Put you action link in a div and modify it with jquery on the client side.

<div id="ajaxTest">
@Ajax.ActionLink("Edit", "EditUser", "User", new { UserID = "$('#GetNewPatientID').val()" }, 
        new AjaxOptions 
        { 
            OnSuccess = "ShowEditUserForm", 
            UpdateTargetId = "EditUserDetails", 
            InsertionMode = InsertionMode.Replace, 
            HttpMethod = "Get" 
        }, new { @class = "button", id = "EditUserButton" })  
</div>

<script type="text/javascript"> 
     $(document).ready(function(){ 
        $("#ajaxTest a").click(function (event) { 
            $(this).attr('href', "/EditUser/Edit?UserId='+ $('#NewUserId).val() +'"); 
     }); 
     }); 
</script>

Answer 3

The answer provided by Darin is great and helped me, however as the comment suggests if you need to click the link again and pass a different value, how do you do that? This is a requirement if you are updating partial views etc. So here is how I achieved exactly that...

$(document).ready(function () {
    $('#replyMessageButton').click(function () {
        var url = $("#replyMessageButton").attr("href")
        $("#replyMessageButton").attr("href", TrimToSlash(url) + $("#MessageId").val())
    });
});

function TrimToSlash(value) {

    if (value.indexOf("/") != -1) {

        while (value.substr(-1) != '/') {
            value = value.substr(0, value.length - 1);
        }
    }
    return value;
}

        @Ajax.ActionLink("Reply", "ReplyMessage", "MessageBox", new { id = -1 },
                        new AjaxOptions
                            {
                                UpdateTargetId = "replyMessageContainer",
                                InsertionMode = InsertionMode.Replace,
                                OnBegin = "UpdateDisplay('replyMessage')",
                                OnFailure = "UpdateDisplay('default')"
                            },
                            new { @id = "replyMessageButton" }
                            )

Also implemented is a check for messageId > 0 in the controller, hence why the id is initialized to -1. An "Error" view is returned if this condition is not met.