MVC 3 Razor - Ajax.BeginForm OnSuccess

Question

MVC 3 Razor - Ajax.BeginForm OnSuccess

3

我刚接触MVC，试图在提交表单后更新页面，但是没有成功。我只是想隐藏表单，并在OnSuccess中显示一个div的内容。

我的代码如下：

<script type="text/javascript">
    $(document).ready(function () {
        $('#confirmation').hide();
    });

    function MessageConfirmation() {
        $('#confirmation').show('slow');
        $('#contactForm').hide('slow');
    }

</script>

@using (Ajax.BeginForm("Index", new AjaxOptions { OnSuccess = "MessageConfirmation" }))
{
<fieldset id="contactForm">
    <legend>Message</legend>
    <p>
        @Html.Label("Email", "Email"): @Html.TextBox("Email")
    </p>
    <p>
        @Html.Label("Subject", "Subject"): @Html.TextBox("Subject")
    </p>
    <p>
        @Html.Label("Message", "Message"): @Html.TextArea("Message")
    </p>
    <p>
        <input type="submit" value="Send" />
    </p>
</fieldset>

<p id="confirmation" onclick="MessageConfirmation()">
    Thanks!!!
</p>
}

任何其他解决方案/想法都非常欢迎。提前致谢！

- Judder1981

4个回答

3

你确定在项目中引用了所有正确的js文件吗？在MVC3中，他们已经不再使用MS Ajax文件了。如果我没记错的话，非侵入式JavaScript应该默认启用，所以你应该引用以下文件：jquery.js、jquery.validate.js、jquery.valudate.unobtrusive.js、jquery.unobtrusive-ajax.js。

只要引用了这些文件，你就应该没问题了。

顺便说一下，Brad Wilson有一篇非常好的博客文章，详细解释了MVC3中的非侵入式ajax以及它的工作原理。在这里查看：http://bradwilson.typepad.com/blog/2010/10/mvc3-unobtrusive-ajax.html

- Artiom Chilaru

谢谢Artion，我现在已经包含了js文件，表单正在进行验证，但是客户端如何知道方法是否成功？ - Judder1981

你是什么意思？这个问题太模糊了 =/ - Artiom Chilaru

如果您有一个可验证的Ajax表单，通常会返回表单的部分，以便在结果中显示验证消息，或者如果表单提交成功，则返回一个成功的部分。至少这是我做的方式。 - Artiom Chilaru

0

确保您可以访问您的操作方法。此外，添加一个失败处理程序并查看它是否也返回了失败。

还必须启用不显眼的功能，并为MVC 3和razor添加MVC不显眼的AJAX脚本。

希望对您有所帮助。

- Brian Mains

0

你可以使用 JQuery 触发器

$("#confirmation").trigger('click');

因为您在 div 上有一个 onclick 方法。

- Stian

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Darin Dimitrov · Accepted Answer

无法工作是一个更适合不了解或不关心计算机工作原理和软件开发人员的问题描述。软件开发人员通常会精确地描述他们遇到的问题。他们发布他们遇到的确切错误消息/异常堆栈跟踪。

话虽如此，您正在寻求替代方案，这是我的建议：不要使用任何MS Ajax.* helpers，直接使用jquery并且不显眼，像这样：

<script type="text/javascript">
    $(function () {
        $('#confirmation').hide();
        $('form').submit(function() {
            $('#confirmation').show('slow');
            $(this).hide('slow');
            return false;
        });
    });
</script>

@using (Html.BeginForm())
{
    <fieldset id="contactForm">
        <legend>Message</legend>
        <p>
            @Html.Label("Email", "Email"): 
            @Html.TextBox("Email")
        </p>
        <p>
            @Html.Label("Subject", "Subject"): 
            @Html.TextBox("Subject")
        </p>
        <p>
            @Html.Label("Message", "Message"): 
            @Html.TextArea("Message")
        </p>
        <p>
            <input type="submit" value="Send" />
        </p>
    </fieldset>
}

<p id="confirmation">
    Thanks!!!
</p>

注意看确认段落已从表单中外部化的方式。