2013-04-24 41 views
76

Tôi đang cố bắt đầu với các cuộc gọi ASP.NET MVC Ajax.Thực hiện cuộc gọi Ajax đơn giản tới bộ điều khiển trong asp.net mvc

Bộ điều khiển:

public class AjaxTestController : Controller 
{ 
    // 
    // GET: /AjaxTest/ 
    public ActionResult Index() 
    { 
     return View(); 
    } 

    public ActionResult FirstAjax() 
    { 
     return Json("chamara", JsonRequestBehavior.AllowGet); 
    } 
} 

Xem:

<head runat="server"> 
    <title>FirstAjax</title> 
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      var serviceURL = '/AjaxTest/FirstAjax'; 

      $.ajax({ 
       type: "POST", 
       url: serviceURL, 
       data: param = "", 
       contentType: "application/json; charset=utf-8", 
       dataType: "json", 
       success: successFunc, 
       error: errorFunc 
      }); 

      function successFunc(data, status) {  
       alert(data); 
      } 

      function errorFunc() { 
       alert('error'); 
      } 
     }); 
    </script> 
</head> 

Tôi chỉ cần in một cảnh báo với các phương pháp điều khiển trở về dữ liệu. Trên mã chỉ in "chamara" trên quan điểm của tôi. Cảnh báo không kích hoạt.

CẬP NHẬT

tôi sửa đổi điều khiển của tôi như dưới đây và nó bắt đầu làm việc. Tôi không có ý tưởng rõ ràng tại sao nó hoạt động ngay bây giờ. Một số xin vui lòng giải thích. Tham số "a" không liên quan đến tôi thêm nó, vì tôi không thể thêm hai phương pháp với tên cùng một phương pháp và parameters.I nghĩ rằng đây có thể không phải là giải pháp nhưng làm việc của nó

public class AjaxTestController : Controller 
    { 
     // 
     // GET: /AjaxTest/ 
     [HttpGet] 
     public ActionResult FirstAjax() 
     { 
      return View(); 
     } 

     [HttpPost] 
     public ActionResult FirstAjax(string a) 
     { 
      return Json("chamara", JsonRequestBehavior.AllowGet); 
     } 
    } 
+0

trả về chuỗi có định dạng json '{" name ":" chamara "}'. sau đó thử đọc dưới dạng 'data ['name']' – Rab

+1

Xóa thư viện jQuery thứ hai khỏi khung nhìn. Mã của bạn sẽ hoạt động như cũ. Tôi nghĩ rằng một lỗi tập lệnh có thể xảy ra và ngăn cảnh báo hiển thị. – Terence

Trả lời

17

Sau khi cập nhật bạn đã làm,

  1. của nó đầu tiên kêu gọi hành động FirstAjax với mặc định HttpGet yêu cầu và ám chỉ rằng chế độ xem Html trống. (Trước đó bạn không có nó)
  2. sau này khi tải các phần tử DOM của chế độ xem đó, cuộc gọi Ajax của bạn bị kích hoạt và hiển thị cảnh báo.

Trước đó bạn chỉ trả lại JSON cho trình duyệt mà không hiển thị bất kỳ HTML nào. Bây giờ nó có một khung nhìn HTML được hiển thị, nơi nó có thể lấy dữ liệu JSON của bạn.

Bạn không thể trực tiếp hiển thị JSON dữ liệu thuần túy của nó không phải HTML.

39

Tháo thuộc tính dữ liệu như bạn đang có không POSTING bất kỳ thứ gì vào máy chủ (Bộ điều khiển của bạn không mong đợi bất kỳ tham số nào).

Và trong Phương pháp AJAX của bạn, bạn có thể sử dụng Razor và sử dụng @Url.Action chứ không phải là một chuỗi tĩnh:

$.ajax({ 
    url: '@Url.Action("FirstAjax", "AjaxTest")', 
    contentType: "application/json; charset=utf-8", 
    dataType: "json", 
    success: successFunc, 
    error: errorFunc 
}); 

Từ cập nhật của bạn:

$.ajax({ 
    type: "POST", 
    url: '@Url.Action("FirstAjax", "AjaxTest")', 
    contentType: "application/json; charset=utf-8", 
    data: { a: "testing" }, 
    dataType: "json", 
    success: function() { alert('Success'); }, 
    error: errorFunc 
}); 
+2

@chamara - xin lỗi, xóa HttpPost (Bạn không đăng bất kỳ thứ gì lên máy chủ để nó sẽ là thuộc tính thừa) và bộ điều khiển sẽ không bị tấn công. Cũng loại bỏ "loại: POST" trong chức năng AJAX như tôi đã gieo bạn. –

0

thay vì url: serviceURL, sử dụng

url: '<%= serviceURL%>', 

và là bạn chuyển 2 tham số tới successFunc?

function successFunc(data) 
{ 
    alert(data); 
} 
+0

giải pháp không hoạt động – chamara

0

Add "JsonValueProviderFactory" trong global.asax:

protected void Application_Start() 
{ 
    AreaRegistration.RegisterAllAreas(); 
    ValueProviderFactories.Factories.Add(new JsonValueProviderFactory()); 
} 
4

Đó là câu hỏi UPDATE của bạn.

Vì bạn không thể có hai phương pháp có cùng tên và chữ ký bạn phải sử dụng thuộc tính ActionName:

UPDATE:

[HttpGet] 
public ActionResult FirstAjax() 
{ 
    Some Code--Some Code---Some Code 
    return View(); 
} 

[HttpPost] 
[ActionName("FirstAjax")] 
public ActionResult FirstAjaxPost() 
{ 
    Some Code--Some Code---Some Code 
    return View(); 
} 

Và vui lòng tham khảo this liên kết để tham khảo thêm về cách một phương pháp trở thành một hành động. Rất tốt tham khảo mặc dù.

2

Điều đầu tiên không cần phải có hai phiên bản khác nhau của các thư viện jquery trong một trang, hoặc là "1.9.1" hoặc "2.0.0" là đủ để thực hiện cuộc gọi ajax làm việc ..

Đây là của bạn mã điều khiển:

public ActionResult Index() 
    { 
     return View(); 
    } 

    public ActionResult FirstAjax(string a) 
    { 
     return Json("chamara", JsonRequestBehavior.AllowGet); 
    } 

Đây là cách nhìn của bạn sẽ giống như thế:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 

<script type="text/javascript"> 
$(document).ready(function() { 
    var a = "Test"; 
    $.ajax({ 
     url: "../../Home/FirstAjax", 
     type: "GET", 
     data: { a : a }, 
     success: function (response) { 
      alert(response); 
     }, 
     error: function (response) { 
      alert(response); 
     } 
    }); 
}); 
</script> 
7

Sử dụng Razor để tự động thay đổi URL của bạn bằng cách gọi hành động của bạn như thế này:

$.ajax({ 
    type: "POST", 
    url: '@Url.Action("ActionName", "ControllerName")', 
    contentType: "application/json; charset=utf-8", 
    data: { data: "yourdata" }, 
    dataType: "json", 
    success: function(recData) { alert('Success'); }, 
    error: function() { alert('A error'); } 
}); 
+0

Các tham số cho Url.Action là ngược trong câu trả lời này, đó là Url.Action (actionName, controllerName) –

+0

Cảm ơn :) Tôi đã thay đổi nó. – gdmanandamohon

+0

Không phải là một fan hâm mộ của điều này, nó khuyến khích khớp nối của xem và javascript, nhưng uh, tên người dùng kiểm tra? – Halter

0

Chế độ xem;

$.ajax({ 
     type: 'GET', 
     cache: false, 
     url: '/Login/Method', 
     dataType: 'json', 
     data: { }, 
     error: function() { 
     }, 
     success: function (result) { 
      alert("success") 
     } 
    }); 

Phương pháp điều khiển;

public JsonResult Method() 
{ 
    return Json(new JsonResult() 
     { 
     Data = "Result" 
     }, JsonRequestBehavior.AllowGet); 
} 
1

Nếu bạn chỉ cần nhấn C# Phương thức trong Ajax Gọi bạn chỉ cần chuyển hai loại vật chất và url nếu yêu cầu của bạn nhận được thì bạn chỉ cần chỉ định url. hãy làm theo các mã dưới đây nó làm việc tốt.

C# Code 
    [HttpGet] 
    public ActionResult FirstAjax() 
    { 
     return Json("chamara", JsonRequestBehavior.AllowGet); 
    } 


Java Script Code if Get Request 
    $.ajax({ 
     url: 'home/FirstAjax', 
     success: function(responce){ alert(responce.data)}, 
     error: function(responce){ alert(responce.data)} 
    }); 



Java Script Code if Post Request and also [HttpGet] to [HttpPost] 
     $.ajax({ 
      url: 'home/FirstAjax', 
      type:'POST', 
      success: function(responce){ alert(responce)}, 
      error: function(responce){ alert(responce)} 
     }); 

Lưu ý: Nếu bạn FirstAjax trong cùng bộ điều khiển trong đó Trình điều khiển chế độ xem của bạn không cần tên bộ điều khiển trong url. như url: 'FirstAjax',

Các vấn đề liên quan