如何在以編程方式提交MVC Ajax表單時定位div？

Question

我在窗體上使用MVC4 Ajax幫助函數，我想從腳本提交表單。

問題是當我調用提交函數，它不會加載到正確的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); 
     } 
    }) 
}