Thực hiện một lệnh gọi Ajax đơn giản tới bộ điều khiển trong asp.net mvc

109

Tôi đang cố gắng bắt đầu với lệnh gọi ASP.NET MVC Ajax.

Bộ điều khiển:

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

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

Lượt 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 cảnh báo với phương thức bộ điều khiển trả về dữ liệu. Mã trên chỉ cần in "chamara" trên chế độ xem của tôi. Một cảnh báo không kích hoạt.

CẬP NHẬT

Tôi đã sửa đổi bộ điều khiển của mình như bên dưới và nó bắt đầu hoạt động. Tôi không biết rõ tại sao nó hoạt động ngay bây giờ. Ai đó 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 thức có cùng tên phương thức và tham số. Tôi nghĩ đây có thể không phải là giải pháp nhưng nó hoạt động

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

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

— chamara
nguồn

trả về chuỗi có định dạng json {"name":"chamara"}. sau đó cố gắng đọc làdata['name']

— Raab,

1

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

— Terence

23

Sau khi cập nhật xong,

lần đầu tiên nó gọi hành động FirstAjax với yêu cầu HttpGet mặc định và hiển thị dạng xem Html trống. (Trước đó bạn không có nó)
sau đó khi tải các phần tử DOM của dạng xem đó, lệnh gọi Ajax của bạn sẽ được 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 chế độ xem 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ể hiển thị trực tiếp JSON dữ liệu thuần túy của nó không phải HTML.

— asb
nguồn

52

Xóa thuộc tính dữ liệu vì bạn không phải là POSTINGbất kỳ thứ gì đối với 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 Razorvà sử dụng @Url.Actionthay vì sử dụng 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ừ bản 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
});

— Darren
nguồn

3

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

— Darren

18

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

$.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'); }
});

— gdmanandamohon
nguồn

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

— xd6_

1

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

— Halter

@Halter UX cải thiện hàng loạt khi bạn không buộc người dùng chuyển hướng trong mọi hành động. Và có rất nhiều thứ xảy ra ở phía máy khách mà phía máy chủ không nên quan tâm.

— Kolob Canyon

@KolobCanyon, bạn đúng 100%. Nhận xét của tôi đề cập nhiều hơn đến việc hiển thị url bằng dao cạo trong javascript, điều này kết hợp chặt chẽ javascript của bạn với chế độ xem (cshtml). Đó là một câu trả lời hay, nhưng để khắc phục sự kết hợp chặt chẽ, bạn có thể kết xuất url thành một thuộc tính dữ liệu trong chstml và đọc nó trong javascript. Xin lỗi vì sự nhầm lẫn!

— Halter,

5

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

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

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

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

Đây là cách chế độ xem của bạn sẽ trông như thế nào:

<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>

— Lokesh_Ram
nguồn

5

Nếu bạn chỉ cần nhấn Phương thức C # trong Cuộc gọi Ajax của mình, 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 được đáp ứng thì bạn chỉ cần chỉ định url mà thôi. vui lòng làm theo mã bên dưới nó hoạt động tốt.

Mã C #:

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

Mã tập lệnh Java nếu nhận được yêu cầu

    $.ajax({
        url: 'home/FirstAjax',
        success: function(responce){ alert(responce.data)},
        error: function(responce){ alert(responce.data)}
    });

Mã tập lệnh Java nếu Đăng Yêu cầu và cả [HttpGet] lên [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 một bộ điều khiển trong đó Bộ điều khiển Chế độ xem của bạn thì không cần tên Bộ điều khiển trong url. giốngurl: 'FirstAjax',

— Muhammad Asad
nguồn

4

Nó dành cho câu hỏi CẬP NHẬT của bạn.

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

CẬP NHẬT:

[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 liên kết này để tham khảo thêm về cách một phương thức trở thành một hành động. Tham khảo rất tốt mặc dù.

— RGR
nguồn

1

Lượt 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);
 }

— oyenigun
nguồn

0

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

url: '<%= serviceURL%>',

và bạn có đang chuyển 2 tham số cho thành công không?

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

— hoán đổi
nguồn

0

Thêm "JsonValueProviderFactory" trong global.asax:

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

— Yashh
nguồn

JsonValueProviderFactory là gì?

— Kiquenet