ASP MVC JsonResult呈現爲頁面，而不是通過調用jQuery函數捕獲

我有一些問題需要從jQuery中處理ASP MVC控制器方法獲取JSON響應 - 這是我以前嘗試過的沒有問題的東西 - 然而，我明顯做錯了這一次，我無法弄清楚什麼...ASP MVC JsonResult呈現爲頁面，而不是通過調用jQuery函數捕獲

我有一個從ASP MVC 3呈現的火花視圖，調用一個控制器方法返回一個JsonResult。我已經把它簡化成只是一個成功或失敗的消息，直到它實際上工作。我可以通過調試中的兩個路徑跟蹤該方法，並且創建的JSON對象看起來正確。

[HttpPost] 
public JsonResult AdjustmentDetail(AdjustmentPaymentModel adjustment) 
{ 
    try 
    { 
     //do some other processing 
     return Json(new {success = true}, "application/json"); 
    } 
    catch(Exception e) 
    { 
     return Json(new { success = false, message = e.Message }); 
    } 
}

控制器方法正在從火花視圖調用，使用jQuery提交表單並捕獲結果到一些反饋返回到用戶，然後從該點向他們提供一些選擇。目前，它只是設置爲彈出警報，以便我可以看到它收到JSON並執行回調函數。同樣，表單上的一些輸入已被刪除，以便於閱讀（一個純文本框和兩個帶有jQuery日期選擇器的文本框似乎功能正常 - 因此日期選擇器函數在javascript中，我留下的情況下它們可能是干擾）。

<script> 
    $(document).ready(function() { 
    $(".datepicker").attr('readOnly', 'true'); 
    }); 

    $(function() { 
    $('.datepicker').datepicker({ 
     maxDate: 0, 
     dateFormat: 'dd/mm/yy' 
    }); 
    }); 

    $('document').ready(function() { 
    $('#submit-adjustment').submit(function() { 
     $('#mini-loader').show(); 

     $.post('${Url.Action("AdjustmentDetail", "payments")}', { adjustment: Model }, function (d) { 
     alert(d); 
     $('#mini-loader').hide(); 
     }, 'json'); 

     return false; 
    }); 
    }); 
</script> 

<form action='' id='submit-adjustment' method='post'> 
    <label for="Notes"> 
    Notes 
    <small> 
     <span class="error">${Html.ValidationMessageFor(m => m.Notes)}</span> 
    </small> 
    </label> 

    ${Html.EditorFor(m => m.Notes)} 

    ${Html.HiddenFor(m => m.BankAccount)} 
    ${Html.HiddenFor(m => m.IsCreditAdjustment)} 

    <div style="padding-top:10px;"> 
    <input class="button big" name="submit-adjustment" type="submit" value="Submit Adjustment" /> 
    <img src="/Content/Images/mini-loader.gif" id="mini-loader" style="display: none;"/> 
    </div> 
</form>

過去，上面的工作 - 表單帖子，然後生成的JSON由jQuery回調函數處理。然而在這種情況（在控制器方法是否成功地完成或者拋出異常）時，JSON在瀏覽器中呈現：

{"success":true}

而繼在Chrome JavaScript執行時，該功能或者不被調用或JSON渲染正在改變頁面，纔有機會這樣做。我已經使用Fiddler檢查了電話，帖子迴應的是200，內容類型爲：application/x-www-form-urlencoded

我一直在使用googling這一段時間，而我要麼無法在谷歌查詢中表達問題，要麼我在這裏錯過了一些非常簡單的事情！任何幫助非常感謝 - 請讓我知道，如果我需要提供更多的細節。

來源

2012-01-03 Ian Cotterill

它看起來像你的jQuery是張貼到行動'ProcessAdjustment'，但你的控制器動作是'AdjustmentDetail' - 你有指向該操作，還是其他地方單獨行動的路線？ – 2012-01-03 11:14:21

是的，我在調試時更改了控制器方法名稱。我改變了它並重新測試，行爲是一樣的，無論如何它都是正確的路由（這有點奇怪......）。我將編輯上面的帖子。 – 2012-01-03 11:17:14

A * response * Content-Type的application/x-www-form-urlencoded沒有任何意義 - 你希望它是一個json內容類型。 A *請求*內容類型肯定，但不是響應。 – 2012-01-03 12:52:51

由於某種原因，表單提交的默認事件看起來沒有被return false阻止。取而代之的是，添加一個event參數的submit處理程序，並調用event.preventDefault()：

$('#submit-adjustment').submit(function (event) { 
    event.preventDefault(); 
    ...

來源

2012-01-03 13:05:44

不得不改變後的參數this.Model或它認爲模型是未定義的，但似乎已經修復它。非常感謝！ – 2012-01-03 13:42:52

多玩一會，this.Model部分還沒有修復它（this.Model總是返回一個新模型，而不是一個從形式） - 如果我使用preventDefault，那麼我不能訪問模型，如果我在preventDefault之前嘗試做任何事情，那麼它將提交表單並忽略jQuery - 由於視圖的命名方式與控制器方法相同，所以它提交併且從不使用jQuery。試圖找到我如何提取模型，如果我有運氣，會更新。留下這個答案，因爲它實際上解決了原來的問題。 – 2012-01-03 16:37:17

修復Html.BeginForm的null模型問題，然後使用 var model = $（'＃submit-adjustment'）。serialize（）; $ .post（'$ {Url.Action（「AdjustmentDetail」，「payments」）}'，model，function（d，s，x）{... 序列化模型並提交表單。 – 2012-01-04 12:25:00

更改爲常規按鈕

<input id="Button1" type="button" value="Test" class="btn btn-primary">

提交按鈕並添加jQuery來提交。

<script language="javascript" type="text/javascript"> 
$(document).ready(function() { 


    $('#Button1').click(function() { 
     alert('here'); 
     $('#addCustomerForm').submit(); 
     return false; 
    }); 

});

來源

2015-04-21 21:53:54 dfortun

ASP MVC JsonResult呈現爲頁面，而不是通過調用jQuery函數捕獲

回答

相關問題