2017-10-28 111 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