Question

我使用 Ajax.BeginForm 创建了一个简单的表单：

<% using (Ajax.BeginForm("Update", "Description", new { id = Model.Id },
     new AjaxOptions
     {
       UpdateTargetId = "DescriptionDiv",
       HttpMethod = "post"
     },new {id ='AjaxForm' })) {%>
Description:
<%= Html.TextBox("Description", Model.Description) %><br />
<input type="submit" value="save" />
<% }%>

控制器已接线并返回更新DescriptionDiv的部分视图。这一切都运作得很好。

现在我希望能够在没有提交按钮的情况下提交此表单（通过链接或图像上的clik或其他任何内容）。不幸的是，这个小jQuery片段不能完成这项工作：

$('form#AjaxForm').submit();

它确实提交了表单，但确实（我认为并不奇怪）是一个常规的回发而不是Ajax。

为了简单起见，上面的jQuery连线如下：

<a href="#" onclick="$('form#AjaxForm').submit(); return false;">submit</a>

表单的onsubmit正在使用Sys.Mvc.AsyncForm.handleSubmit（），但jQuery提交似乎绕过了这个。

PS。我正在寻找这种特殊方法的解决方案。我知道如何使用普通表单实现相同的功能并使用AJAX + jQuery发布它。我对这个特定的解决方案感兴趣。

Answer 1

我将假设选择器周围缺少引号只是一个转录错误，但无论如何你应该检查它。此外，我没有看到你实际上给表单ID的位置。通常使用htmlAttributes参数执行此操作。我没有看到你使用它的签名。但是，如果表单完全提交，则可能是转录错误。

如果选择器和id不是问题，我怀疑它可能是因为当您使用Ajax BeginForm扩展时，通过标记添加了单击处理程序。您可以尝试使用$（'form'）。触发器（'submit'），或者在最坏的情况下，让锚点上的click处理程序在表单中创建一个隐藏的提交按钮并单击它。甚至可以使用纯jQuery创建自己的ajax提交（这可能是我要做的）。

最后，你应该意识到，通过更换提交按钮，你将完全打破这个没有启用javascript的人。解决这个问题的方法是使用一个noscript标签隐藏一个按钮，并处理服务器上的AJAX和非AJAX帖子。

顺便说一句，它考虑了标准做法，微软不承受，通过javascript而不是通过标记添加处理程序。这样可以将您的javascript整理到一个位置，这样您就可以更轻松地查看表单上发生的情况。以下是我将如何使用触发机制的示例。

  $(function() {
      $('form#ajaxForm').find('a.submit-link').click( function() {
           $('form#ajaxForm').trigger('submit');
      }).show();
  }

<% using (Ajax.BeginForm("Update", "Description", new { id = Model.Id },
     new AjaxOptions
     {
       UpdateTargetId = "DescriptionDiv",
       HttpMethod = "post"
     }, new { id = "ajaxForm" } )) {%>
   Description:
   <%= Html.TextBox("Description", Model.Description) %><br />
   <a href="#" class="submit-link" style="display: none;">Save</a>
   <noscript>
       <input type="submit" value="Save" />
   </noscript>
<% } %>

Answer 2

一个简单的示例，其中下拉列表中的更改触发ajax form-submit以重新加载数据网格：

<div id="pnlSearch">

    <% using (Ajax.BeginForm("UserSearch", "Home", new AjaxOptions { UpdateTargetId = "pnlSearchResults" }, new { id="UserSearchForm" }))
    { %>

        UserType: <%: Html.DropDownList("FilterUserType", Model.UserTypes, "--", new { onchange = "$('#UserSearchForm').trigger('submit');" })%>

    <% } %>

</div>

触发器（'onsubmit'）是关键：它调用MVC已经嫁接到表单上的onsubmit函数。

NB。 UserSearchResults控制器返回使用提供的模型

呈现表的PartialView

<div id="pnlSearchResults">
    <% Html.RenderPartial("UserSearchResults", Model); %>
</div>

Answer 3

不幸的是，触发onsubmit或提交事件并不适用于所有浏览器。

适用于IE和Chrome：＃（'form＃ajaxForm'）触发器（'onsubmit'）;
适用于Firefox和Safari：＃（'form＃ajaxForm'）触发器（'submit'）;

此外，如果您在Chrome或IE中触发（'submit'），则会导致整个页面被发布而不是执行AJAX行为。

适用于所有浏览器的是removing the onsubmit event behavior and just calling submit() on the form itself。

<script type="text/javascript">
$(function() {

    $('form#ajaxForm').submit(function(event) { 
        eval($(this).attr('onsubmit')); return false; 
        });

    $('form#ajaxForm').find('a.submit-link').click( function() { 
        $'form#ajaxForm').submit();
        });

  }
</script>
  <% using (Ajax.BeginForm("Update", "Description", new { id = Model.Id },
     new AjaxOptions
     {
       UpdateTargetId = "DescriptionDiv",
       HttpMethod = "post"
     }, new { id = "ajaxForm" } )) {%>
   Description:
   <%= Html.TextBox("Description", Model.Description) %><br />
   <a href="#" class="submit-link">Save</a> 
<% } %>

此外，链接不必包含在表单中，以使其起作用。

Answer 4

我已经尝试了几次让ajax表单提交工作得很好，但总是遇到完全失败或太多妥协。这是一个页面示例，当用户在输入框中键入时，该页面使用MVC页面内的jQuery Form plug-in来更新项目列表（使用部分呈现的控件）：

<div class="searchBar">
    <form action="<%= Url.Action ("SearchByName") %>" method="get" class="searchSubmitForm">
        <label for="projectName">Search:</label>
        <%= Html.TextBox ("projectName") %>
        <input class="submit" type="submit" value="Search" />
    </form>
</div>
<div id="projectList">
    <% Html.RenderPartial ("ProjectList", Model); %>
</div>

<script type="text/javascript">
    jQuery(document).ready(function() {
        jQuery("#projectName").keyup(function() {
            jQuery(".searchSubmitForm").submit();
        });

        jQuery(".searchSubmitForm").submit(function() {
            var options = {
                target : '#projectList'
            }

            jQuery(this).ajaxSubmit(options);

            return false;
        });

        // We remove the submit button here - good Javascript depreciation technique
        jQuery(".submit").remove();
    });
</script>

在控制器方面：

public ActionResult SearchByName (string projectName)
{
    var service = Factory.GetService<IProjectService> ();
    var result = service.GetProjects (projectName);

    if (Request.IsAjaxRequest ())
        return PartialView ("ProjectList", result);
    else
    {
        TempData["Result"] = result;
        TempData["SearchCriteria"] = projectName;

        return RedirectToAction ("Index");
    }
}

public ActionResult Index ()
{
    IQueryable<Project> projects;
    if (TempData["Result"] != null)
        projects = (IQueryable<Project>)TempData["Result"];
    else
    {
        var service = Factory.GetService<IProjectService> ();
        projects = service.GetProjects ();
    }

    ViewData["projectName"] = TempData["SearchCriteria"];

    return View (projects);
}

Answer 5

Ajax.BeginForm看起来是一个失败。

使用常规的Html.Begin，这很好地解决了这个问题：

$('#detailsform').submit(function(e) {
    e.preventDefault();
    $.post($(this).attr("action"), $(this).serialize(), function(r) {
        $("#edit").html(r);
    });
});

Answer 6

尝试以下方式：

<input type="submit" value="Search" class="search-btn" />
<a href="javascript:;" onclick="$('.search-btn').click();">Go</a>

Answer 7

而不是使用JavaScript或许尝试像

这样的东西

<a href="#">

  <input type="submit" value="save" style="background: transparent none; border: 0px none; text-decoration: inherit; color: inherit; cursor: inherit" />

</a>

Answer 8

只需将正常按钮放在Ajax.BeginForm旁边，然后点击查找父表单和正常提交。剃刀中的Ajax形式：

@using (Ajax.BeginForm("AjaxPost", "Home", ajaxOptions))
    {        
        <div class="form-group">
            <div class="col-md-12">

                <button class="btn btn-primary" role="button" type="button" onclick="submitParentForm($(this))">Submit parent from Jquery</button>
            </div>
        </div>
    }

和Javascript：

function submitParentForm(sender) {
    var $formToSubmit = $(sender).closest('form');

    $formToSubmit.submit();
}

如何使用JavaScript而不是提交按钮发布ASP.NET MVC Ajax表单

8 个答案: