Question

Hi all I have used the following code to check whether data exists or not

This is my input design

<label>
 @Html.LabelFor(u => u.Username)</label>
<input type="text" id="username" />
 &nbsp;
<label id="UserNameAvailabilityLabel" class="input_text">
</label>
 <span class="input_error">
 @Html.ValidationMessageFor(u => u.Username)
</span>
</label>


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
var emptyUserNameMessage = 'Please enter the username';
var progressUserNameMessage = 'Checking...';
var availableUserNameMessage = 'Username is available';
var usedUserNameMessage = 'Username has been taken';


$(function () {
    var userNameAvailabilityLabel = $("#UserNameAvailabilityLabel");

    $("#username").blur(function () {
        var userNameTextBox = $("#username");
        var userName = userNameTextBox.val();
        if ($.trim(userName) == '') {
            userNameAvailabilityLabel
                        .removeClass()
                        .addClass('required1')
                        .html(emptyUserNameMessage);
        }
        else {
            userNameAvailabilityLabel.html('');
            $("#ProgressDiv").show();

            $.ajax({
                type: 'POST',
                url: 'Checkavailability.asmx/CheckUserNameAvailability',
                data: '{userName: \'' + userNameTextBox.val() + '\'}',
                contentType: 'application/json; charset=utf-8',
                dataType: 'json',
                success: OnCheckUserNameAvailabilitySuccess,
                error: OnCheckUserNameAvailabilityError
            });
        }
        return false; //Prevent postback
    });

    function OnCheckUserNameAvailabilitySuccess(response) {
        $("#ProgressDiv").hide();
        if (response != null && response.d != null) {
            var data = response.d;
            switch (data) {
                case 0:
                    userNameAvailabilityLabel
                        .removeClass()
                        .addClass('available')
                        .html(availableUserNameMessage);
                    $("#btnSubmit").removeAttr('disabled');
                    break;
                case 1:
                    userNameAvailabilityLabel
                        .removeClass()
                        .addClass('used')
                        .html(usedUserNameMessage);
                    $("#btnSubmit").attr('disabled', 'disabled');
                    break;
            }
        }
    }
    function OnCheckUserNameAvailabilityError(xhr, ajaxOptions, thrownError) {
        alert(xhr.statusText);
    }
});

This works when I used this in a normal aspx page but when coming to MVC the first script is getting executed means if I move from text box with out entering data it is displaying the error as per required, if enter some text and leave the text box it is giving an popup as Internal server error what might be the problem

Answer 1

just changed url: 'Checkavailability.asmx/CheckUserNameAvailability', to url: "../Checkavailability.asmx/CheckUserNameAvailability",