Question

我在表单上使用MVC4 Ajax帮助函数，我想从脚本提交表单。

问题是当我调用submit函数时，它不会加载到正确的div中。有什么想法吗？

@using (Ajax.BeginForm("NewGame", "Home", new AjaxOptions { HttpMethod = "Post", UpdateTargetId = "targetDiv" }, new { id = "newGameForm" }))
{
    <input type="hidden" name="client_seed" id="client_seed" />
    <input type="submit" value="New Game" id="NewGameButton" />
    <a class=button onclick="$('#newGameForm').submit();">New Game</a> 
}

单击标准提交按钮将调用结果加载到targetDiv中。单击锚点将替换当前div。

Answer 1

关键是阻止默认浏览器行为通过.preventDefault()或事件处理程序结束时的return false。

我就是这样做的：

<div id="targetDiv"></div>
@using(Html.BeginForm("NewGame", "Home", FormMethod.Post,
    new { id = "newGameForm" }))
{
    <input type="hidden" name="client_seed" id="client_seed" />
    <input type="submit" value="New Game" id="NewGameButton" />
}

<script type="text/javascript">
$(document).ready(function () {
    $("#newGameForm").on("submit", function(e) {
        e.preventDefault();
        $.ajax({
            url: $(this).attr("action"),
            data: $(this).serialize(),
            type: $(this).attr("method")  // "POST"
        })
        .done(function(result) {
            $("#targetDiv").html(result);
        })
        .fail(function((jqXHR, textStatus, errorThrown) {
            // handle error
        });
    });
});
</script>

如果你坚持使用锚<a> ......

<a href="#" class="button" id="submit-link">New Game</a>

<script type="text/javascript">
$(document).ready(function() {
    $("#submit-link").on("click", function(e) {
        e.preventDefault();
        $("#newGameForm").submit();
    });

    $("#newGameForm").on("submit", function(e) {
        e.preventDefault();
        $.ajax({
        ...
    });
});
</script>

修改还有AjaxHelper.ActionLink方法。如果您已在代码的其他部分使用AjaxHelper，则可能需要坚持使用。

Answer 2

伪代码。

<a class=button onclick="PostAjax();">New Game</a>

function PostAjax(){
    $.ajax({
        url:"Home/NewGame",
        data:$('#newGameForm').serialize(),
        DataType:"HTML", // assuming your post method returns HTML
        success:function(data){
            $("#targetDiv").html(data);
        },
        error:function(err){
            alert(err);
        }
    })
}

在以编程方式提交和MVC Ajax表单时如何定位div？

2 个答案: