Question

Hi I have a form in which the Username field needs to be checked for availability using AJAX.
Here is my code..

 <% using (Html.BeginForm()) { %>
        <%: Html.ValidationSummary(true, "Account creation was unsuccessful. Please correct the errors and try again.") %>
        <div>
            <fieldset>
                <legend>Account Information</legend>

                <div class="editor-label">
                    <%: Html.LabelFor(m => m.UserName) %>
                </div>
                <% using (Ajax.BeginForm("Checkavailability", new AjaxOptions { UpdateTargetId = "textEntered" }))
                   { %>
 <div class="editor-field">
                    <%: Html.TextBoxFor(m => m.UserName) %>
                    <%: Html.ValidationMessageFor(m => m.UserName) %>
                </div>
  <input type="submit" value="Check Avail" id="Submitt"/><br />
  <span id="textEntered">Nothing Entered</span>
<% } %>


                <div class="editor-label">
                    <%: Html.LabelFor(m => m.Email) %>
                </div>
                <div class="editor-field">
                    <%: Html.TextBoxFor(m => m.Email) %>
                    <%: Html.ValidationMessageFor(m => m.Email) %>
                </div>

                <div class="editor-label">
                    <%: Html.LabelFor(m => m.Password) %>
                </div>
                <div class="editor-field">
                    <%: Html.PasswordFor(m => m.Password) %>
                    <%: Html.ValidationMessageFor(m => m.Password) %>
                </div>

                <div class="editor-label">
                    <%: Html.LabelFor(m => m.ConfirmPassword) %>
                </div>
                <div class="editor-field">
                    <%: Html.PasswordFor(m => m.ConfirmPassword )%>
                    <%: Html.ValidationMessageFor(m => m.ConfirmPassword) %>
                </div>

                <p>
                    <input type="submit" value="Register" />
                </p>
            </fieldset>
        </div>
    <% } %>

The problem is when I click on check avil button the validation appears.. Is there a way to submit just the ajax form and update without submitting the main form?? or any way to implement my check availability logic?

Answer 1

I removed the AJAX.BeginForm an added Ajax.ActionLink which dosent submit the form .. instead it passes a single paramater to the controller which I need to check.. Here is the code..

 <% using (Html.BeginForm()) { %>
        <%: Html.ValidationSummary(true, "Account creation was unsuccessful. Please correct the errors and try again.") %>

            <fieldset>
                   <div class="editor-label">
                    <%: Html.LabelFor(m => m.UserName) %>
                </div>
 <div class="editor-field">
                    <%: Html.TextBoxFor(m => m.UserName) %>
                    <%: Html.ValidationMessageFor(m => m.UserName) %>
                </div>
      <%= Ajax.ActionLink("Checkavailability", "Checkavailability", new { UserName = "" }, new AjaxOptions { UpdateTargetId = "textEntered" }, new { id = "u" })%>



  <span id="textEntered">Nothing Entered</span>



                <p>
                    <input type="submit" value="Register" />
                </p>


            </fieldset>

    <% } %>

Below is the jQuery which is used to set the parameters being passed

  <script type="text/javascript">

       $(document).ready(function () {
           $('#UserName').blur(function () {
               changeActionURL();
           });

       });



       function changeActionURL() {

           if ($("#UserName").val() == "") {
               alert('Please enter your email to check availablity');
           }
           else {


               var url = '<%= new UrlHelper(ViewContext.RequestContext).Action("Checkavailability", "Account") %>' + '?UserName=' + $("#UserName").val();

               $("#u").attr('href', url);
           }
       }




</script>

the controller is..

public string Checkavailability(string UserName)
        {
            if (UserName != "Enter text" && !String.IsNullOrEmpty(UserName))
            {
                string userName = UserName.ToLower();
                NorthwindEntities dbContext = new NorthwindEntities();
                var query = from p in dbContext.Employees
                            where p.FirstName.ToLower() == userName
                            select p;
                IEnumerable<Employee> rec = query.ToList();

                if (rec.Count() == 0)
                {
                    return "You entered: \"" + UserName.ToString() + "\" available ";
                }
                else
                {
                    return "You entered: \"" + UserName.ToString() + "\" already exists " +
                      DateTime.Now.ToLongTimeString();
                }

            }

            return String.Empty;
        }