MS MVC 表单 AJAXifying 技术

Posted 2023-05-09

【中文标题】MS MVC 表单 AJAXifying 技术

【英文标题】：MS MVC form AJAXifying techniques [closed]

【发布时间】：2010-10-30 03:03:05

【问题描述】：

我正在寻找 最优雅 的方式来 ajaxify 我的表单（使用 jQuery）。 你是怎么做到的？

【问题讨论】：

这个问题似乎是题外话，因为它是一个民意调查。

【参考方案1】：

这是我的解决方案（我认为是Progressive enhancement 解决方案），只使用没有任何插件的jQuery：

var form = $('form#YourFormId');
$(':submit', form).click(function (event) 
    event.preventDefault();
    $.post(form.attr('action'), form.serialize(),
        function(data, status) 
            if(status == 'success') 
                // your code here
            
        
    );
);

更新：

如果您的 POST 响应是“带有表单的 html”，那么试试这个：

function ajaxifyForm(form) 
    $(':submit', form).click(function (event) 
        event.preventDefault();
        $.post(form.attr('action'), form.serialize(),
            function(data, status) 
                if(status == 'success') 
                    var newForm = $(data);
                    ajaxifyForm(newForm);
                    form.after(newForm).remove();
                
            
        );
    );

【讨论】：

这看起来像我正在寻找的东西。得试试...

在“你的代码”部分中，我写了 $("form#YourFormId).html(data);。第一次点击后一切顺利。但是，在第二次点击时，它发布字段不变，绑定我的formModel 错误并得到错误的响应。：/

我已经更新了我的答案，但没有经过测试

第二次点击它调用我的“主页/索引”并将整个页面呈现在前一个页面中。我正在尝试仅“ajaxify”登录小部件。试过“if(status=='success')form.html(data);ajaxifyForm(form);”，但是我已经提到过这种奇怪的行为。

问题出在 form.html(data) 函数中。您将您的回复插入到您现有的中。您应该删除旧表单，然后添加新表单 (form.after(newForm).remove();)

【参考方案2】：

Ajaxify 你的表单...这很模糊。

如果您想异步提交表单，可以使用 $.post() 发布到单独的控制器操作。

例子：

在视图中：

$.post('<%= Url.Action("DoAjaxCall") %>', $('form').serialize(), 
function (data) 
    alert(data.Message);

, "json");

在您的控制器中：

public ActionResult DoAjaxCall(YourModel model)

    return Json(new  Message = "Your ajax call is working!" );

这至少是我在某些表单中使用的。

P.S.：我在 *** 文本编辑器中写了这个，所以它没有经过真正的测试。但作为一个大纲，它应该可以工作。

【参考方案3】：

结帐JQuery plugins storage我相信你会在那里找到你需要的

【讨论】：

我找到了 jQuery Form 插件。它看起来不错，但我不知道如何正确使用它。

好的，您只需将已创建的插件包含到您的 site.master 中，并在 dom 上创建函数，该函数将在表单提交时执行您的逻辑。 plugins.jquery.com/project/form 这里有很好的样本和这里，如何在 malsup.com/jquery/form

我想简化一下。完美的解决方案就像在表单 onload 中添加 1 个简短的 JS 函数调用。你知道 - 以更紧凑和声明的方式。我不希望我的所有观点都被

我的意思是您需要在 site.master 中添加一个像这样的短行 $(':submit', form) 在这种情况下，您的所有提交都将通过 ajax 进行。另一种解决方案是创建自己的编辑模板，创建视图并向该模板添加其他脚本。在这种情况下，当您创建新视图时，您只需决定当前视图是否通过 Ajax 提交。