来自JavaScript函数的MVC jQuery提交表单（无页面刷新）

我对这一切都很陌生。 我正在使用ASP.NET MVC

我有一个编辑页面，可以加载作者及其所有书籍。 这些书是通过电话装入的

$（文档）.ready（函数（）{
负荷书（）；
});
函数LoadBooks（）{
$（“.Books”）.hide（）；
$（“.Books”）.load（“/Books/Edit/”）；
$（“.Books”）.show（'slow'）；
}

这部分工作正常。页面加载作者信息，然后加载书籍（DIV id=“Books”中的部分视图，仅包含书籍类别和书籍标题）：

书

现在，在主视图页面上，我想要一个链接。 当点击链接时，我想通过JavaScript/jQuery/Ajax/随便什么做一些事情。 我想做的第一件事是从局部视图提交Books表单（id=booksform），然后继续执行下一个函数。因此，我单击一个调用JavaScript函数的链接。此函数应调用/执行/执行图书表单的提交

我觉得我已经尝试了所有的方法，但是如果没有一整页的提交/刷新，我无法让我的图书表单提交和处理。（注意，当完全提交发生时，我希望控制器中的操作会成功处理）。我希望控制器进程/操作只返回某种成功/失败指示。（然后我可以再次调用“LoadBooks（）；”以刷新页面上的DIV

有什么想法吗？

您的“onclick”JavaScript函数是否执行，问题是整页提交/刷新也发生了，？在这种情况下，问题是您没有以

返回false来结束JavaScript函数

或者是根本没有调用“onclick”JavaScript函数的问题？那么不看代码就很难说……如果使用JQuery选择器，那么可能选择器没有选择链接
这就是我使用JQuery的方式：

function DoAjaxPostAndMore(btnClicked)
{
       var $form = $(btnClicked).parents('form');

        $.ajax({
            type: "POST",
            url: $form.attr('action'),
            data: $form.serialize(),
            error: function(xhr, status, error) {
                  //do something about the error
             },
            success: function(response) {
                 //do something with response
                LoadBooks();

            }
        });

  return false;// if it's a link to prevent post

}

我假设btnClicked在表单中：

<input type="button" value="Submit" onclick="DoAjaxPostAndMore(this)"/>

这是你需要使用的
Ajax.BeginForm
，而不是
Html.BeginForm
？
这是一个“如果它能帮助别人”的答案，因为我玩游戏已经很晚了，但你也可以使用：

<a href = "javascript: SaveProperties();">Save properties</a>
SaveProperties() { $('#bevpropform').submit(); }

@using (Ajax.BeginForm("Method", "Controller", new AjaxOptions { HttpMethod = "POST" }))
{
}

发布日期时，页面将不会刷新



请注意

您必须添加
jquery.unobtrusive ajax.js
，才能正常工作。请注意，在ASP.NET MVC5模板项目中，此脚本默认不包含在内，您必须手动添加或通过Nuget数据包管理器添加。

它与默认包含的
jquery.validate.unobtrusive.js
无关。
如果他们正在单击表单外部的链接（而不是按钮），该怎么办？那么如何将表单分配给变量（var$form）？谢谢。刚刚尝试了您的建议，使用var$form=document.getElementById将from分配给变量（'bookform'）；点击链接时不会发生任何事情。我更新了我的答案。getElementById返回javascript对象而不是jquery对象，使用$（“#bookform”）代替。天哪！它工作了！！！我花了三天时间试图纠正这个愚蠢的语法！！！我爱你！！！如果我能再麻烦你，在这行：error:function（xhr，status，error），什么是xhr、状态、错误参数？它们来自哪里？谢谢。很抱歉，这看起来很混乱。有没有办法在注释中添加换行符？函数：function SaveProperties（）{$（'#bevpropform'）。submit（）；}这是可行的，但它当然会提交表单并将我从页面中带走。我无法找到一种方法在没有完整页面帖子的情况下提交表单。谢谢。不，因为你没有使用MS Ajax脚本，只是使用JQuery提交常规Html表单。我的坏运气今天看到了你的答案。
  <a href="/url/something" onclick="return DoAjaxPostAndMore(this)">linktext</a>

var $form = $("#theformid");

<a href = "javascript: SaveProperties();">Save properties</a>
SaveProperties() { $('#bevpropform').submit(); }

SaveProperties() { $('#bevpropform').submit(); return false; }

@using (Ajax.BeginForm("Method", "Controller", new AjaxOptions { HttpMethod = "POST" }))
{
}