Bộ sưu tập biểu mẫu trong html là gì?

Đối tượng FormCollection được sử dụng để truy xuất các giá trị đầu vào của biểu mẫu trong phương thức hành động. Trong chương trước, tôi đã giải thích 4 cách khác nhau để tạo biểu mẫu và thu thập dữ liệu biểu mẫu trong phương thức hành động. Đối tượng FormCollection làm cho công việc của lập trình viên dễ dàng hơn và dữ liệu biểu mẫu có thể dễ dàng truy cập trong phương thức hành động

Ví dụ về FormCollection - Truy xuất dữ liệu biểu mẫu


Bước 1. Tạo một ASP mới. NET MVC Project hoặc mở Dự án hiện có.
Bước 2. Tạo một Model StudentModel.cs mới và thêm đoạn mã sau vào đó.
namespace MvcForms.Models
{
    public class StudentModel
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public bool Addon { get; set; }
    }
}

Bước 3. Chuyển đến Lượt xem Trang chủ Index.cshtml và thêm đoạn mã sau để tạo biểu mẫu.

Forms - Form Collection Objects

@using (Html.BeginForm("Submit", "Home", FormMethod.Post)) { Enter ID: @Html.TextBox("Id") Enter Name: @Html.TextBox("Name") Addon: @Html.CheckBox("Addon", false) }

ID: @ViewBag.Id
Name: @ViewBag.Name
Addon: @ViewBag.Addon

Bước 4. Tạo phương thức hành động sau trong HomeController

[HttpPost] 
        public ActionResult Submit(FormCollection fc)
        {
            ViewBag.Id = fc["Id"];
            ViewBag.Name = fc["Name"];
            bool chk = Convert.ToBoolean(fc["Addon"].Split(',')[0]);
            ViewBag.Addon = chk;

            return View("Index");
        }

Bước 5. Chạy dự án của bạn.

Hãy hiểu mã này
1. Tạo Biểu mẫu MVC đơn giản bằng Trình trợ giúp HTML
2. Trong Submit Action Method, tôi đã khởi tạo đối tượng FormCollection fc.
3. Giá trị FormCollection có thể được truy cập bằng cách cung cấp điều khiển đầu vào "id" hoặc số chỉ mục.
4. Nếu bạn không tách giá trị Boolean thì bạn sẽ nhận được "true, false" ở cả hai đầu ra, đó là lý do tại sao tôi đã thu thập giá trị hộp kiểm trong biến kiểu Boolean và tách chúng.
____8

Bản tóm tắt

Trong chương này, tôi đã cố gắng dạy cho bạn đối tượng FormCollection bằng một ví dụ đơn giản và đầy đủ. Trong chương tiếp theo, bạn sẽ học các Kỹ thuật xác thực biểu mẫu trong ASP. NET MVC

Bộ sưu tập biểu mẫu là gì và cách triển khai nó trong ASP. MẠNG MVC? . Bộ sưu tập biểu mẫu là gì? . Cách triển khai bộ sưu tập biểu mẫu trong ASP. MẠNG MVC? . Kết luận Tập hợp biểu mẫu là gì? . Lớp tập hợp biểu mẫu tự động nhận giá trị biểu mẫu dữ liệu trong các phương thức của bộ điều khiển ở dạng cặp khóa/giá trị. Các cặp khóa và giá trị được truy cập bằng cách sử dụng tên khóa và giá trị chỉ mục. Cách triển khai bộ sưu tập biểu mẫu trong ASP. MẠNG MVC? . Ở đây mình sẽ tạo view để nhập dữ liệu vào một bảng cơ sở dữ liệu sử dụng lớp form collection có sẵn trong ASP. NET MVC. BƯỚC 1 Mở Visual Studio hoặc bất kỳ trình soạn thảo nào và tạo một Asp mới. ứng dụng web mạng (. NET Framework) và cung cấp tên thích hợp. [Quả sung. - Tạo dự án] BƯỚC 2 Chọn Tùy chọn MVC hoặc sử dụng mẫu Rỗng theo lựa chọn của bạn. [Quả sung. - Ứng dụng MVC] BƯỚC 3 Bây giờ, chúng ta cần nhập mô hình dữ liệu vào ứng dụng của mình. Nhấp chuột phải vào một thư mục mô hình và sau đó nhấp vào Thêm. Chọn Ado. NET Entity Data Model. Nếu Mô hình dữ liệu không hiển thị theo cách này, bạn có thể nhấp vào một mục mới và chọn ADO. NET Entity Data Model. [Quả sung. - QUẢNG CÁO. NET Entity Data Model] Đặt tên cho mô hình Thực thể   [Hình. - QUẢNG CÁO. NET Entity Data Model Name] Sau khi nhấp vào OK. Trình hướng dẫn này sẽ mở phần chọn EF Designer từ Cơ sở dữ liệu. Ở đây tôi sẽ sử dụng phương pháp tiếp cận cơ sở dữ liệu đầu tiên nên tôi sẽ chọn mô hình đầu tiên của EF Designer bạn có thể sử dụng bất kỳ mô hình nào tùy theo nhu cầu của mình nhưng bước trên khác với cách tiếp cận mã đầu tiên và mô hình đầu tiên. [Quả sung. - Mẫu đầu tiên của EF Designer] Đọc thêm. Tempdata là gì và cách sử dụng trong Mvc? . Nhấp vào Kết nối mới. Một cửa sổ khác sẽ xuất hiện để thêm tên máy chủ của bạn và chọn cơ sở dữ liệu của bạn và nhấp vào OK. [Quả sung. - Kết nối mới] Bây giờ một kết nối mới sẽ được thêm vào. Nhấp vào OK. [Quả sung. - Chuỗi kết nối mới được thêm vào] Sau khi nhấp vào Tiếp theo, bạn sẽ chọn Entity Framework 6. 0 rồi nhấp vào Tiếp theo. Chọn một bảng theo nhu cầu của bạn nhấp vào Kết thúc. Sau khi nhấp vào Kết thúc, bảng của bạn sẽ được thêm vào và các lớp sau sẽ được thêm vào thư mục mô hình của bạn. [Quả sung. - Thư mục mô hình] BƯỚC 4 Bây giờ chúng ta cần thêm bộ điều khiển. Nhấp chuột phải vào thư mục bộ điều khiển và chọn MVC Bộ điều khiển trống, nhấp vào Thêm. Sau khi click vào Add sẽ hiện ra cửa sổ khác. Cung cấp tên của bộ điều khiển và nhấp vào Thêm. Bộ điều khiển của bạn sẽ được thêm vào thư mục bộ điều khiển. [Quả sung. - MVC Empty Controller] Lớp tập hợp biểu mẫu tự động nhận giá trị biểu mẫu trong phương thức hành động của bộ điều khiển ở dạng cặp khóa và giá trị. Các cặp khóa và giá trị có thể được truy cập bằng tên hoặc chỉ mục. Chúng ta có thể sử dụng vòng lặp để truy cập từng khóa và giá trị của nó được gửi đến máy chủ. Hãy thêm phương thức sau. sử dụng Hệ thống; . bộ sưu tập. Chung; . LINQ; . Web; . mạng. mvc; . Người mẫu; . Bộ điều khiển { public class EmployeeController. Người điều khiển { Trainee2021Entities db = new Trainee2021Entities(); . Chỉ số ActionResult công khai của nhân viên () { var employee = db. người lao động. Liệt kê(); . IsValid) { foreach (khóa chuỗi trong formCollection. AllKeys) { Phản hồi. Write("Key=" + key + " "); . Write("Giá trị=" + formCollection[key]); . Viết(" "); . Công ty phát triển mạng? . Xem tại đây   Nếu bạn chạy mã này bên trong EmployeeController, bạn sẽ nhận được kết quả sau trên màn hình của mình. [Quả sung. - cặp khóa Giá trị] Đoạn mã trên không chèn dữ liệu vào cơ sở dữ liệu, nó chỉ hiển thị dữ liệu của chúng tôi theo cặp khóa-giá trị. Nhưng tôi muốn nhập dữ liệu vào cơ sở dữ liệu nên tôi muốn thay đổi mã của mình. Đây là mã đầy đủ của tôi cho EmployeeController EmployeeController sử dụng Hệ thống; . bộ sưu tập. Chung; . LINQ; . Web; . mạng. mvc; . Người mẫu; . Bộ điều khiển { public class EmployeeController. Người điều khiển { Trainee2021Entities db = new Trainee2021Entities(); . người lao động. Liệt kê(); . IsValid) { nhân viên emp = nhân viên mới(); . Firstname = formCollection["Firstname"]; . Họ = formCollection["Họ"]; . Giới tính = formCollection["Giới tính"]; . Lương = Quy đổi. ToInt32(formCollection["Salary"]); . Bang = formCollection["Bang"]; . Địa chỉ = formCollection["Địa chỉ"]; . người lao động. Thêm(emp); . Lưu thay đổi(); . Click vào Add View xuất hiện cửa sổ chọn List template and model class. Sau khi nhấp vào nút Thêm. nó sẽ tạo một trang xem Chỉ mục trên trang Chỉ mục nơi chúng tôi nhận danh sách các bản ghi từ cơ sở dữ liệu. ] [Quả sung. - Chế độ xem chỉ mục] Tương tự, chúng ta có thể tạo chế độ xem cho phương thức Tạo nhưng chúng ta chọn Tạo mẫu nó sẽ tạo mã mặc định. Chạy Tạo. Cshtml, nó cho kết quả như sau   [Hình. - Tạo Trang] Đối với Giới tính, nó có một nút radio và đối với Trạng thái là lý tưởng cho danh sách thả xuống thay vì hộp văn bản. Để đạt được chức năng này, tôi thay đổi mã của mình. Đây là mã đầy đủ của tôi để Tạo Chế độ xem. Bây giờ hãy sử dụng mã và bạn sẽ nhận được kết quả tiếp theo. Tạo ra. cshtml @model FromCollectionDemo. người mẫu. nhân viên @{ ViewBag. Tiêu đề = "Tạo"; . BeginForm()) { @Html. AntiForgeryToken() nhân viên @Html. LabelFor(mô hình => mô hình. Tên, htmlAttributes. mới { @class = "nhãn điều khiển col-md-2" })@Html. EditorFor(mô hình => mô hình. Tên, mới { htmlAttributes = new { @class = "form-control" } }) @Html. LabelFor(mô hình => mô hình. Họ, htmlAttributes. mới { @class = "nhãn điều khiển col-md-2" })@Html. EditorFor(mô hình => mô hình. Họ, mới { htmlAttributes = new { @class = "form-control" } }) @Html. LabelFor(mô hình => mô hình. Mức lương, thuộc tính html. mới { @class = "nhãn điều khiển col-md-2" })@Html. EditorFor(mô hình => mô hình. Mức lương mới { htmlAttributes = new { @class = "form-control" } }) @Html. LabelFor(mô hình => mô hình. Giới tính, thuộc tính html. mới { @class = "control-label col-md-2" })Nam @Html. RadioButtonFor(mô hình => mô hình. Giới tính, "Nam") Nữ @Html. RadioButtonFor(mô hình => mô hình. Giới tính, "Nữ") @Html. LabelFor(mô hình => mô hình. Trạng thái, thuộc tính html. mới { @class = "nhãn điều khiển col-md-2" })@Html. DropDownList("State" , Danh sách mới { SelectListItem mới{Text = "Gujarat" , Value="Gujarat"}, SelectListItem mới { Text = "Mumbai" , Value ="Mumbai"}, SelectListItem mới { Text ="Delhi" , . LabelFor(mô hình => mô hình. Địa chỉ, thuộc tính html. mới { @class = "nhãn điều khiển col-md-2" })@Html. EditorFor(mô hình => mô hình. Địa chỉ, mới { htmlAttributes = new { @class = "form-control" } }) } @Html. ActionLink("Quay lại danh sách", "Chỉ mục") @section Scripts { @Scripts. Render("~/bundles/jqueryval") }   Bây giờ hãy chạy mã và bạn sẽ nhận được kết quả sau. [Quả sung. - Tạo Trang ]     [Hình. - Index Page] Kết luận Trong bài này, chúng ta đã học Form Collection tự động lấy giá trị phần tử đầu vào từ một phương thức hành động của bộ điều khiển. Sử dụng lớp tập hợp biểu mẫu để truy xuất dữ liệu phần tử đầu vào

Bộ sưu tập trong HTML là gì?

Một HTMLCollection là tập hợp các phần tử tài liệu . NodeList là tập hợp các nút tài liệu (nút phần tử, nút thuộc tính và nút văn bản). Các mục HTMLCollection có thể được truy cập theo tên, id hoặc số chỉ mục của chúng.

Biểu mẫu trong HTML với ví dụ là gì?

HTML Form là tài liệu lưu trữ thông tin của người dùng trên máy chủ web bằng các điều khiển tương tác . Một biểu mẫu HTML chứa các loại thông tin khác nhau như tên người dùng, mật khẩu, số liên lạc, id email, v.v. Các phần tử được sử dụng trong biểu mẫu HTML là hộp kiểm, hộp nhập liệu, nút radio, nút gửi, v.v.

Làm cách nào chúng tôi có thể thu thập dữ liệu từ biểu mẫu trong HTML?

Thuộc tính phương thức chỉ định cách gửi dữ liệu biểu mẫu (dữ liệu biểu mẫu được gửi đến trang được chỉ định trong thuộc tính hành động). Dữ liệu biểu mẫu có thể được gửi dưới dạng biến URL (với method="get" ) hoặc dưới dạng giao dịch bài đăng HTTP (với method="post" ) . Ghi chú về NHẬN. Nối dữ liệu biểu mẫu vào URL theo cặp tên/giá trị.

Mục đích của biểu mẫu HTML là gì?

Một biểu mẫu HTML được sử dụng để thu thập thông tin đầu vào của người dùng . Đầu vào của người dùng thường được gửi đến máy chủ để xử lý.