Вложенные формы с AJAX в .Net MVC

Question

Привет! У меня есть форма, в которой необходимо проверить доступность поля «Имя пользователя» с помощью AJAX.Вот мой код ..

 <% 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>
    <% } %>

Проблема заключается в том, что, когда я нажимаю на кнопку проверки avil, появляется проверка. Есть ли способ отправить только ajax-форму и обновить ее без отправки основной формы ??или каким-либо образом реализовать мою логику проверки доступности?

Answer 1

Я удалил AJAX.BeginForm добавленный Ajax.ActionLink, который не отправляет форму .. вместо этого он передает единственный параметр в контроллер, который мне нужно проверить .. Вот код ..

 <% 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>

    <% } %>

Ниже приведен jQuery, который используется для установки передаваемых параметров

  <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>

контроллер: ..

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;
        }

Answer 2

Если вы можете позволить себе перейти на mvc3, они встроили атрибут удаленной проверки только для решаемой вами задачи.Таким образом, вы можете иметь различные поля в форме, проверенные с помощью вызова ajax и все в одной форме.

Answer 3

Не определено поведение для вложенных форм в спецификации HTML , и обычно рекомендуется не делать этого.

То, что вы можете использовать, это Javascript и динамически изменяемый атрибут action формы. Или вы можете иметь несколько именованных кнопок отправки и в действии проверить используемую кнопку и выполнить свои вычисления на основе этого.

Вместо того, чтобы писать то, что уже написано, я дам вам ссылку здесь . Другой и очень похожий способ - присвоить каждой кнопке отправки свой атрибут name, и только действие будет использовано для действия. Это будет выглядеть так:

 [AcceptVerbs(HttpVerbs.Post)]
 public ActionResult Create(FormCollection collection)
 {
     try
     {
         string create = Request.Form["create"];
         string cancel = Request.Form["cancel"];

         return RedirectToAction("Index");
     }
     catch
     {
         return View();
     }
 }