Question

I would like to make POST request using following code

<div class="editor-field" id="updateDiv" >
    @Html.EditorFor(model => model.UserName)
    @Html.ValidationMessageFor(model => model.UserName)
</div>
<div>
    @Ajax.ActionLink("Check Availability", "ValidateUsername", "Wizard", 
        new { username = "username"},
        new AjaxOptions() {
            UpdateTargetId = "msg",
            HttpMethod = "POST",
            LoadingElementId = "progress",
        }
    )
</div>

But instead of passing a static value I want to pass value of @Html.EditorFor(model => model.UserName) (user inputed value), how can I do this?

Answer 1

First, it seems you’re trying to create some kind of remote validation. This mechanism is already in place in MVC so you can use it with DataAnnotations

http://msdn.microsoft.com/en-us/library/gg508808(v=vs.98).aspx

If I’m wrong with my assumption, you can try to modify your code according to the below.

I would go with adding htmlAttributes to set id for the link like this :

   @Ajax.ActionLink("Check Availability", "ValidateUsername", "Wizard",
   new {username = "username"},
    new AjaxOptions()
    {
        UpdateTargetId = "msg",
        HttpMethod = "POST",
        LoadingElementId = "progress",
    }, new { id = "CheckAvailabilityLink" }
)

having that in place we have a direct reference to this element so we can track changes on the textbox and update URL dynamically

    <script type="text/javascript">
        $(document).ready(function () {
            $("#UserName").keyup(function (e) {  // textbox id here 

                var href = $("#CheckAvailabilityLink").attr("href").split("?", 1);
                $("#CheckAvailabilityLink").attr("href", href + "?username=" + $(this).val());
                alert($("#CheckAvailabilityLink").attr("href"));
            });
        });
    </script>

</script>