2017-10-28 102 views
0

我正在開發一個web應用程序,ASP.Net MVC 4.0與entityframework 6.0,試圖根據用戶選擇更新數據庫。使用jQuery AJAX將數據發送到控制器的操作。下面給出的是C#代碼來更新實體,然後更新數據庫。jQuery AJAX總是執行錯誤:{}

public void modidyProduct(Productdetail prodData) 
{ 
    try 
    { 
     using (SampleTrialEntities entity = new SampleTrialEntities()) 
     { 
      var data = entity.Productdetails.Where(p=>p.ProductID == prodData.ProductID).FirstOrDefault<Productdetail>(); 
      data.ProductName = prodData.ProductName; 
      data.ProductNumber = prodData.ProductNumber; 
      data.CategoryName = prodData.CategoryName; 
      data.ModelName = prodData.ModelName; 
      entity.Entry(data).State = System.Data.Entity.EntityState.Modified; 
      entity.SaveChanges(); 
     } 
    } 
    catch (Exception) 
    {} 
} 

而這裏的jQuery AJAX調用該控制器的操作方法。

function updateProduct() { 
     var productData = { 
      ProductName: $('#prodName').val().trim(), 
      ProductNumber: $('#prodNum').val().trim(), 
      CategoryName: $('#ctgryName :selected').text(), 
      ModelName: $('#mdlName :selected').text(), 
      ProductID: atob($('#editProductId').val()) 
     }; 
     debugger; 
     $('#divLoader').show(); 
     $.ajax({ 
      url: '@Url.Action("modidyProduct", "Home")', 
      data: JSON.stringify(productData), 
      type: 'POST', 
      dataType: 'json', 
      contentType: 'application/json;charset=utf-8', 
      success: function (jqXHR) { 
       //Below line will destroy DataTable - tblProducts. So that we could bind table again. next line - loadData(); 
       $('#tblProducts').DataTable().destroy(); 
       $('#divLoader').hide(); 
       loadData(); 
       $('#addModal').modal('hide'); 
       $('#editProductId').val(''); 
      }, 
      error: function (msg) { 
       debugger; 
       $('#editProductId').val(''); 
       $('#divLoader').hide(); 
       alert(msg); 
       alert("What's going wrong ?"); 
       //alert(jqXHR.responseText); 
      } 
     }); 
    } 

執行的jQuery AJAX方法&控制器動作後,成功更新數據庫中的記錄。響應狀態代碼 - 200 &狀態 - 返回OK。但只有錯誤:{},代碼塊每次都在AJAX方法中執行。 Debugging screen capture with status-OK; statuscode - 200

回答

1

$.ajax方法調用

dataType: 'json', 

的這一部分它告訴jQuery的是,Ajax調用代碼期待一個有效的JSON響應返回,但目前您的服務器方法的返回類型爲void。這意味着它不會返回任何東西和$.ajax方法試圖解析響應(假設它是一個有效的JSON),並因此獲得典型「parsererror」

當一個數據類型爲json和從服務器收到響應,以嚴格的方式解析數據;任何格式不正確的JSON都會被拒絕並引發解析錯誤。從jQuery 1.9開始,一個空的響應也被拒絕。

解決方案是簡單地刪除調用中的dataType屬性。

$.ajax({ 
     url: '@Url.Action("modidyProduct", "Home")', 
     data: JSON.stringify(productData), 
     type: 'POST', 
     contentType: 'application/json;charset=utf-8' 
    }).done(function() { 
     console.log('Success'); 
    }) 
    .fail(function(e, s, t) { 
     console.log('Failed'); 
    }); 

或者您可以更新您的服務器的操作方法返回一個JSON響應。

[HttpPost] 
public ActionResult ModidyProduct(Productdetail prodData) 
{ 
    try 
    { 
     //to do : Save 
    } 
    catch (Exception ex) 
    { 
     //to do : Log the exception 
     return Json(new { status = "error", message=ex.Message }); 
    } 
    return Json(new { status="success"}); 
} 

現在,在您的客戶端代碼,您可以檢查JSON響應,看是否交易成功

$.ajax({ 
     url: '@Url.Action("ModidyProduct", "Home")', 
     data: JSON.stringify(productData), 
     type: 'POST', 
     contentType: 'application/json;charset=utf-8', 
     dataType: 'json', 
}).done(function (res) { 
    if (res.status === 'success') { 
     alert('success'); 
    } else { 
     alert(res.message); 
    } 
     console.log('Success'); 
}).fail(function(e, s, t) { 
     console.log('Failed'); 
}); 

你不必一定指定dataType屬性值。如果沒有指定jQuery將嘗試根據返回的響應的MIME類型推斷它,在這種情況下,響應內容類型將爲application/json; charset=utf-8。所以你應該很好。

+0

謝謝@Shyju,感謝您的回覆。這個詳細的解釋對於像我這樣的新手來說確實很有幫助。從你的評論,我推斷 - contentType:'application/json; charset = utf-8'用於通知服務器它將以'json'的形式接收參數作爲請求。 dataType:'json'將準備瀏覽器來解析'json'數據作爲響應。 @Shyju - 評論,如果我總結這是正確的。 –

+0

是的。服務器使用內容Type標頭,jquery使用dataType來處理響應 – Shyju