在.net MVC中使用AJAX嵌套表单

本文关键字：AJAX 嵌套 表单 net MVC | 更新日期: 2023-09-27 17:53:57

嗨，我有一个表单，其中Username字段需要使用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>
    <% } %>

问题是当我点击检查恶魔按钮验证出现…是否有一种方法来提交只是ajax表单和更新，而不提交主要的形式?或者任何实现检查可用性逻辑的方法?

在.net MVC中使用AJAX嵌套表单

我删除了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;
        }

如果您能够负担得起移动到mvc3，他们已经为您正在解决的任务内置了远程验证属性。所以你可以有不同的字段在表单检查通过ajax调用和所有在一个表单。

在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();
     }
 }
相关文章：