Hành động điều khiển cuộc gọi Javascript với các tham số

Thiết lập một ASP mới. NET MVC với bộ điều khiển và chế độ xem khá đơn giản, với các ví dụ toàn diện trên trang web chính thức. Khi bạn tập trung vào mẫu Model-View-Controller, làm việc với các khu vực đó trong ứng dụng sẽ cảm thấy thoải mái. AJAX cung cấp tùy chọn cập nhật các phần của trang web của bạn mà không cần tải lại toàn bộ trang. Mặc dù điều này hấp dẫn trong một số ứng dụng, nhưng việc thêm chức năng AJAX sẽ tạo thêm một lớp phức tạp khiến một số nhà phát triển mới (và cũ) bị mắc kẹt. Hơn nữa,. NET có một số điều kỳ quặc không thực sự rõ ràng. Chúng ta hãy xem cách thực hiện lệnh gọi jQuery AJAX tới Bộ điều khiển MVC với các tham số

Phần tiếp theo là phần giải thích chi tiết về những gì bạn cần làm để yêu cầu AJAX hoạt động. Nếu bạn chỉ đang tìm kiếm một tài liệu tham khảo nhanh,

Thiết lập Dự án MVC của chúng tôi. bình thề

Khi tôi đang cố gắng học điều gì đó, tôi cố gắng làm việc với các ví dụ gần với thực tế nhất có thể, không quá phức tạp. Một ứng dụng sử dụng AJAX đơn giản có thể giống như danh sách việc cần làm, danh sách tạp phẩm hoặc danh sách các bài đăng trên mạng xã hội

Tôi nghĩ rằng đó là nhàm chán

Vì vậy, chúng tôi sẽ tạo một ứng dụng jar chửi thề

Trong ứng dụng này, chúng tôi cần có một nút mà người dùng sẽ nhấn bất cứ khi nào ai đó sử dụng từ chửi rủa. Chúng tôi sẽ có một đầu vào để đặt số tiền sẽ được thêm vào bình mỗi lần. Và chúng ta sẽ có một màn hình hiển thị tổng

Bắt đầu bằng cách tạo một ASP mới. NET Web không có xác thực

Tiếp theo, khi dự án đã được tạo, hãy thêm bộ điều khiển mới bằng cách nhấp chuột phải vào thư mục Bộ điều khiển và chọn Thêm -> Bộ điều khiển…

Chọn tùy chọn Bộ điều khiển MVC 5 - Empty và gọi bộ điều khiển này là SwearJar

Bây giờ chúng ta đã có bộ điều khiển của mình, chúng ta chỉ cần tạo chế độ xem Chỉ mục để chứa mã đánh dấu phía máy khách và JavaScript

Trong thư mục Lượt xem, Nhấp chuột phải vào thư mục SwearJar. Chọn Thêm -> Xem và tạo chế độ xem Chỉ mục

Chạy ứng dụng của bạn để kiểm tra nó. Nếu bạn điều hướng đến http://localhost:YOURPORT/SwearJar, bạn sẽ thấy nội dung như sau

Tuyệt vời. Nhàm chán, nhưng tuyệt vời

Hãy làm cho nó bớt nhàm chán hơn một chút và sẵn sàng thực hiện lệnh gọi AJAX

Vì chúng tôi đang sử dụng jQuery để thực hiện các yêu cầu AJAX này, rõ ràng chúng tôi sẽ cần bao gồm jQuery. Visual Studio tự động bao gồm jQuery trên Shared/_Layout. trang cshtml, vì vậy mọi Chế độ xem phải có thể truy cập trang đó rồi. Nếu không, chúng ta sẽ cần phải tự làm điều đó, như thế này

Tiếp theo, tôi sẽ thiết lập chế độ xem với các thành phần HTML của chúng tôi. Chúng ta sẽ bắt đầu với một cái gì đó đơn giản một cách ngu ngốc. Chúng tôi sẽ nhấp vào một nút và trang của chúng tôi sẽ cho chúng tôi biết có bao nhiêu tiền trong hũ thề

Trong dự án của bạn, hãy chuyển đến Lượt xem -> SwearJar -> Chỉ mục. cshtml. Xóa đánh dấu Razor hiện có và thay thế nó bằng cái này

bình thề

@phần Tập lệnh { }

Bây giờ chúng ta đã sẵn sàng để bắt đầu

Cuộc gọi jQuery AJAX tới Bộ điều khiển MVC

Chúng ta sẽ bắt đầu một cách đơn giản, bằng cách tạo một phương thức trong bộ điều khiển để trả về số tiền có trong lọ chửi thề. Đây sẽ là một cách hay để xem các kiểu dữ liệu đơn giản được sử dụng như thế nào trong các phương thức của bộ điều khiển AJAX

Các kiểu dữ liệu đơn giản

Trong bộ điều khiển SwearJar, hãy thêm phương thức này

công khai gấp đôi GetAmount() { return 1. 45;

Sau đó, trong Chỉ mục của bạn. cshtml, hãy thêm mã Javascript này vào bên trong các thẻ script

hàm getAmount() { var url = “@Url. Hành động ("GetAmount")";

$.get(url, function (data) {
    $("#swearJar").html('$' + data);
}); }

$(“#btnHowMuch”). on(“click”, getAmount);

Ở đây, tôi đã đính kèm một trình xử lý sự kiện vào nút để khi được nhấp vào, hàm getAmount sẽ được kích hoạt

Bên trong getAmount, chúng tôi truy xuất URL của phương thức điều khiển bằng cách sử dụng URL. Trình trợ giúp HTML hành động. Cũng có thể mã hóa cứng mã này thành “/SwearJar/GetAmount”, dù sao đây cũng là thứ được hiển thị cho trang

Tiếp theo, chúng tôi sử dụng jQuery để gọi phương thức điều khiển. Bạn có thể đã thấy cú pháp GET chi tiết hơn cho jQuery trước đây, sử dụng $. ajax(), như thế này

$. ajax({ loại. “NHẬN”, loại nội dung. “ứng dụng/json; . “/SwearJar/GetAmount”, thành công. chức năng (dữ liệu) { thành côngCallback (dữ liệu); . chức năng (dữ liệu) { failCallback (dữ liệu);

Không có gì ngăn cản bạn sử dụng cái này, nhưng $. get() tóm tắt rất nhiều cấu hình. Miễn là nó hoạt động, tôi thích sử dụng $. lấy()

Sau khi dữ liệu được trả về từ bộ điều khiển, chúng tôi sẽ hiển thị dữ liệu đó trong div swaryJar. Hãy thử nó ra. Chạy dự án và nhấp vào nút

Tuyệt

Nếu bạn để ý, chúng tôi đã đặt kiểu trả về của phương thức là gấp đôi. Chúng tôi không gặp vấn đề gì khi trả về nhiều loại dữ liệu theo cùng một cách, chẳng hạn như chuỗi và số nguyên. Nhưng hãy xem điều gì sẽ xảy ra khi chúng ta cố gắng trả về một Danh sách các chuỗi

[đang cố gắng trả lại Danh sách từ bộ điều khiển ajax](/images/jquery-ajax-call-to-mvc-controller-10. png)

Ối. Đối với những thứ như thế này, chúng tôi sẽ cần trả về dữ liệu của mình dưới dạng JSON. Để thực hiện điều này trong bộ điều khiển của chúng tôi, chúng tôi cần thực hiện một số điều chỉnh đối với phương thức Hành động. Kiểu trả về cần phải là JsonResult và chúng tôi cần tuần tự hóa dữ liệu của mình sang định dạng JSON

Đây là bộ điều khiển mới của chúng tôi

công khai JsonResult GetAmount() { var list = new List{ "5 quý", "2 biệt hiệu", "8 xu" }; . AllowGet);

Đặc biệt lưu ý tham số thứ hai trong dòng trả về, JsonRequestBehavior.AllowGet. Theo mặc định, điều này được đặt để từ chối nhận yêu cầu. Nếu bạn gặp lỗi 500 khi cố gắng truy vấn hành động của mình, hãy đảm bảo rằng bạn đã đặt cờ đó. Để thử nghiệm, bạn thực sự có thể điều hướng đến http://localhost:YOURPORT/SwearJar/GetAmount. Nếu bạn thấy lỗi này, điều đó có nghĩa là bạn đang thiếu thông số 

        $.get(url, { id: id }, function (data) {
            $("#swearJar").html(data.Name + " has $" + data.Amount);
        });
    }

    $("#btnSearch").on("click", getPerson);
 }

Khi bạn thêm nó trở lại, bạn sẽ có thể thấy dữ liệu của mình bình thường

Bây giờ hãy chuyển sang mã Javascript trong chế độ xem của chúng tôi. Để làm cho đầu ra của chúng ta trông đẹp hơn một chút, hãy thay đổi dòng bên trong jQuery $. gọi lại đến

$(“#swearJar”). html(dữ liệu. tham gia(', '));

Sau đó thử chạy lại dự án và nhấp vào nút. Bạn sẽ thấy một cái gì đó tương tự như thế này

Cuộc gọi jQuery AJAX với một tham số duy nhất

Bây giờ, hãy sáng tạo hơn một chút và thêm các tham số vào lệnh gọi AJAX của chúng ta. Giả sử rằng chúng ta sẽ theo dõi nhiều người và mỗi người đều có lọ chửi thề của riêng mình

Trong tệp điều khiển hoặc trong một tệp riêng biệt (đây là cách thực hành tốt hơn), hãy tạo lớp Người sau để đại diện cho người của chúng tôi

lớp công khai Người { public int ID { get;

Tiếp theo, thêm hai phương thức hành động của bộ điều khiển sau. Việc đầu tiên sẽ tạo ra một Danh sách những người. (Điều này thường được thực hiện với cơ sở dữ liệu). Thứ hai sẽ là phương pháp AJAX để tìm một người theo ID của họ

private ListGetPeople() { Listpeople = new List{ new Person { ID = 1, Name = "Ernest Ruslan", Amount = 20. 85 }, Người mới { ID = 2, Tên = "Zygmunt Delores", Số tiền = 3. 25 }, Người mới { ID = 3, Tên = "Kama Nilofer", Số tiền = 8. 10 }, };

công khai JsonResult GetPerson(int id) { var person = GetPeople(). Trong đó (p => p. ID == id). SingleOrDefault(); . AllowGet);

Bây giờ hãy thay đổi mã front-end của chúng ta. Thay đổi đánh dấu Dao cạo và Javascript trong Chế độ xem thành cái này

@phần Tập lệnh {

        $.get(url, { id: id }, function (data) {
            $("#swearJar").html(data.Name + " has $" + data.Amount);
        });
    }

    $("#btnSearch").on("click", getPerson);
 }

Đặc biệt chú ý đến đối tượng tôi đang chuyển vào $. nhận chức năng. Theo bản năng, bạn có thể đã thử một cái gì đó như thế này

$. get(url, id, function (dữ liệu) {

});

Nhưng điều này sẽ cho bạn một lỗi. Bạn sẽ chuyển vào giá trị của

        $.get(url, { id: id }, function (data) {
            $("#swearJar").html(data.Name + " has $" + data.Amount);
        });
    }

    $("#btnSearch").on("click", getPerson);
 }

        $.get(url, { id: id }, function (data) {
            $("#swearJar").html(data.Name + " has $" + data.Amount);
        });
    }

    $("#btnSearch").on("click", getPerson);
 }

(Ràng buộc chỉ có nghĩa là ASP. NET có thể chuyển đổi giá trị biểu mẫu thành biến hoặc đối tượng. )

Vì vậy, thay vì truyền giá trị trong jQuery, bạn cần tạo một đối tượng với tên của giá trị biểu mẫu

$. lấy (url, { id. id }, hàm (dữ liệu) {

});

kiểm tra nó ra. Chạy dự án và thử đặt ID vào hộp văn bản

Tuyệt. Nó hoạt động

Cuộc gọi jQuery AJAX với nhiều tham số

Nếu chúng tôi muốn thực hiện cuộc gọi GET với nhiều hơn một tham số, điều đó dễ dàng như việc thêm tham số vào chữ ký phương thức

công khai JsonResult GetPerson(int ID, tên chuỗi) { var retrievedPerson = GetPeople(). Trong đó (p => p. ID == ID && p. Tên == tên). SingleOrDefault(); . AllowGet);

Bạn cũng có thể sử dụng một đối tượng làm tham số duy nhất trong chữ ký phương thức. Điều này thực sự hữu ích nếu bạn đã viết lớp này và đang sử dụng nó ở nơi khác. Ví dụ sau đây có chức năng tương đương với ví dụ chúng ta vừa xem xét

công khai JsonResult GetPerson(Person person) { var retrievedPerson = GetPeople(). Trong đó (p => p. ID == người. ID && p. Tên == người. Tên). SingleOrDefault(); . AllowGet);

jQuery POST với một tham số duy nhất

Trong phần này, hãy cho biết hành động Bộ điều khiển MVC của chúng ta chúng ta đã bỏ bao nhiêu tiền vào lọ và để nút biểu thị hành động bỏ tiền vào. Vì chúng tôi đang gửi dữ liệu đến máy chủ và cập nhật tổng số của chúng tôi, POST là phù hợp, trong khi GET thì không

Trong bộ điều khiển của chúng tôi, thêm hai phương thức sau

[HttpPost] công khai JsonResult AddMoney(số tiền gấp đôi) { double currentAmount = GetCurrentAmount();

private double GetCurrentAmount() { // trong một ứng dụng thực tế, bạn sẽ nhận được số tiền hiện tại từ cơ sở dữ liệu trả về 1. 75;

Lưu ý thuộc tính

        $.get(url, { id: id }, function (data) {
            $("#swearJar").html(data.Name + " has $" + data.Amount);
        });
    }

    $("#btnSearch").on("click", getPerson);
 }

        $.get(url, { id: id }, function (data) {
            $("#swearJar").html(data.Name + " has $" + data.Amount);
        });
    }

    $("#btnSearch").on("click", getPerson);
 }

Đối với giao diện người dùng, chúng tôi sẽ cần thực hiện một số thay đổi. Thay thế đánh dấu và Javascript hiện tại của bạn bằng cái này

bình thề

@phần Tập lệnh {

        $.post(url, { amount: amount }, function (data) {
            $("#swearJar").html('New Amount: $' + data.newAmount);
        });
    }

    $("#btnAddMoney").on("click", addMoney);
 }

Chúng tôi đã thêm một đầu vào để lấy số tiền chúng tôi đang đưa vào lọ thề. Chúng tôi cũng đã thay đổi phương thức

        $.get(url, { id: id }, function (data) {
            $("#swearJar").html(data.Name + " has $" + data.Amount);
        });
    }

    $("#btnSearch").on("click", getPerson);
 }

        $.get(url, { id: id }, function (data) {
            $("#swearJar").html(data.Name + " has $" + data.Amount);
        });
    }

    $("#btnSearch").on("click", getPerson);
 }

Như với $. get, lưu ý rằng tôi đang chuyển một đối tượng dữ liệu tới $. phương pháp đăng bài. Đoạn mã sau không hoạt động và sẽ dẫn đến lỗi

số tiền var = $(“#amount). giá trị(); . bài đăng (url, số lượng, chức năng (dữ liệu) {

});

Điều này sẽ không liên kết với biến ở phía sau. Tôi không thể nói cho bạn biết đã bao nhiêu lần tôi gặp phải lỗi nhỏ này khiến tôi lãng phí nửa giờ. Hoặc hơn. Đảm bảo rằng bạn thực sự tạo một đối tượng có tên của giá trị biểu mẫu

số tiền var = $(“#amount”). giá trị();

$. bài đăng (url, { số tiền. số lượng }, chức năng (dữ liệu) {

});

Được rồi, khi chúng tôi đã hoàn thành tất cả những điều đó, hãy chạy dự án, nhập số tiền vào hộp văn bản và nhấp vào nút

Tuyệt vời. nó hoạt động

jQuery POST với nhiều tham số

Cũng giống như với các phương thức GET, việc tạo các phương thức POST với nhiều tham số rất dễ dàng. Thêm các tham số vào chữ ký phương thức, như thế này

[HttpPost] public JsonResult CreatePerson(Person person) { //nếu có cơ sở dữ liệu Entity Framework, chúng ta sẽ tạo người dùng như thế này //db. Người. Thêm(người); . Lưu thay đổi();

Làm cách nào để gọi hành động của bộ điều khiển từ chế độ xem có tham số?

Làm cách nào để gọi một phương thức điều khiển trong JavaScript?

Làm cách nào để gọi hàm JavaScript từ bộ điều khiển trong MVC?

Làm cách nào để gọi hành động của bộ điều khiển từ jQuery bằng ajax?