Что такое сбор форм?

Коллекция форм используется для извлечения элементов ввода из метода действия контроллера. Класс коллекции форм автоматически получает значение формы данных в методах контроллера в виде пары ключ/значение. Доступ к парам ключ-значение осуществляется с использованием имени ключа и значения индекса.


Как реализовать сбор форм в ASP.NET MVC?

Здесь, в этой статье, я покажу вам, как использовать коллекцию форм и как мы можем использовать класс коллекции форм.

Здесь я создам представление для ввода данных в таблицу базы данных, используя класс коллекции форм, доступный в ASP.NET MVC.

ШАГ 1
Откройте Visual Studio или любой редактор и создайте новое приложение веб-приложения Asp.net (.NET Framework) и укажите соответствующее имя.

Описание изображения
[Fig:- Create project]

ШАГ 2
Выберите вариант MVC или используйте пустой шаблон по вашему выбору.

Описание изображения
[Fig:- MVC Application]

ШАГ 3

Теперь нам нужно ввести модель данных в наше приложение. Щелкните правой кнопкой мыши папку модели, а затем щелкните Добавить. Выберите модель данных сущности Ado.NET. Если модель данных не отображается таким образом, вы можете щелкнуть новый элемент и выбрать модель данных объекта ADO.NET.

Описание изображения
[Fig:- ADO.NET Entity Data Model]

Дайте имя модели Entity

Описание изображения
[Fig:- ADO.NET Entity Data Model Name]

После нажатия ОК. Этот мастер откроет выбор EF Designer из базы данных. Здесь я буду использовать первый подход базы данных, поэтому я выберу первую модель EF Designer, которую вы можете использовать в любой модели в соответствии с вашими потребностями, но описанный выше шаг отличается от первого подхода кода и первого подхода моделей.

Описание изображения
[Fig:- EF Designer First model]

После нажатия Далее появится окно. Щелкните Новое подключение. Появится другое окно, чтобы добавить имя вашего сервера, выбрать базу данных и нажать «ОК».

Описание изображения
[Fig:- New Connection]

Теперь будет добавлено новое соединение. Нажмите «ОК».

Описание изображения
[Fig:- New Connection string added ]

После нажатия «Далее» вы выберете Entity Framework 6.0, а затем нажмите «Далее». Выберите стол в соответствии с вашими потребностями, нажмите «Готово».

После нажатия кнопки «Готово» ваша таблица будет добавлена, а следующие классы будут добавлены в папку вашей модели.

Описание изображения
[Fig:- Model folder]

ШАГ 4

Теперь нам нужно добавить контроллер. Щелкните правой кнопкой мыши папку контроллера и выберите MVC. Пустой контроллер нажмите «Добавить».

После нажатия кнопки «Добавить» появится еще одно окно. Укажите имя контроллера и нажмите «Добавить». Ваш контроллер будет добавлен в папку контроллера.

Описание изображения
[Fig:- MVC Empty Controller]

Класс коллекции форм автоматически получает значение формы в методе действия контроллера в виде пары ключ-значение. Доступ к парам ключей и значений можно получить с помощью имени или индекса.

Мы можем использовать цикл для доступа к каждому ключу и его значению, отправленному на сервер. Добавим следующий метод.


using System;
using System.Collections.Generic;
using System. Linq;
using System. Web;
using System.Web.Mvc;
using FromCollectionDemo.Models;

namespace FromCollectionDemo.Controllers
{
    public class EmployeeController: Controller
    {
        Trainee2021Entities db = new Trainee2021Entities();
        // GET: Employee
        public ActionResult Index()
        {
            var employee = db.employees.ToList();
            return View(employee);
        }

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

        [HttpPost]
        [ValidateAntiForgeryToken]
        public ActionResult Create(FormCollection formCollection)
        {
            if (ModelState.IsValid)
            {
                foreach (string key in formCollection.AllKeys)
                {
                    Response.Write("Key=" + key + " ");
                    Response.Write("Value=" + formCollection[key]);
                    Response.Write("
");
                }

            }
            return View();
        }
    }

Войти в полноэкранный режим

Выйти из полноэкранного режима

Если вы запустите этот код внутри EmployeeController, вы получите следующий вывод на экране.

Описание изображения
[Fig:- key Value pair]

Приведенный выше код не вставляет данные в базу данных, он просто отображает наши данные в паре ключ-значение. Но я хочу ввести данные в базу данных, поэтому я хочу изменить свой код. Вот мой полный код для EmployeeController

СотрудникКонтроллер


using System;
using System.Collections.Generic;
using System. Linq;
using System. Web;
using System.Web.Mvc;
using FromCollectionDemo.Models;

namespace FromCollectionDemo.Controllers
{
    public class EmployeeController: Controller
    {
        Trainee2021Entities db = new Trainee2021Entities();
        public ActionResult Index()
        {
            var employee = db.employees.ToList();
            return View(employee);
        }

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

        [HttpPost]
        [ValidateAntiForgeryToken]
        public ActionResult Create(FormCollection formCollection)
        {
            if (ModelState.IsValid)
            {
                employee emp = new employee();
                emp.Firstname = formCollection["Firstname"];
                emp.Lastname = formCollection["Lastname"];
                emp.Gender = formCollection["Gender"];
                emp.Salary = Convert.ToInt32(formCollection["Salary"]);
                emp.State = formCollection["State"];
                emp.Address = formCollection["Address"];
                db.employees.Add(emp);
                db.SaveChanges();
                return RedirectToAction("Index");
            }
            return View();
        }
    }
}

Войти в полноэкранный режим

Выйти из полноэкранного режима

ШАГ 5

Щелкните правой кнопкой мыши метод Index в контроллере Employee. Нажмите «Добавить представление», появится окно, в котором выберите шаблон списка и класс модели.

После нажатия кнопки Добавить. он создаст страницу просмотра индекса на странице индекса, где мы получим список записей из базы данных.

Описание изображения
[Fig:- Index view]

Таким же образом мы можем создать представление для метода Create, но мы выбираем Create Template, он сгенерирует код по умолчанию.

Запустите Создать. Cshtml, он дает следующий вывод

Описание изображения
[Fig:- Create Page]

Для Пола у него есть переключатель, а также для Состояние идеально подходит для раскрывающегося списка вместо текстового поля. Чтобы реализовать эту функциональность, я изменяю свой код. Вот мой полный код для Create View.

Теперь используйте код, и вы получите следующий результат.

Создать.cshtml


  @model FromCollectionDemo.Models.employee

  @{
      ViewBag.Title = "Create";
  }<h2>Create</h2>
  @using (Html.BeginForm()) { @Html.AntiForgeryToken()
<div class="form-horizontal"><h4>employee</h4>
<hr><div class="form-group">@Html.LabelFor(model => model.Firstname, htmlAttributes: new { @class = "control-label col-md-2" })<div class="col-md-10">@Html.EditorFor(model => model.Firstname, new { htmlAttributes = new { @class = "form-control" } })</div></div>
<div class="form-group">@Html.LabelFor(model => model.Lastname, htmlAttributes: new { @class = "control-label col-md-2" })<div class="col-md-10">@Html.EditorFor(model => model.Lastname, new { htmlAttributes = new { @class = "form-control" } })</div></div>
<div class="form-group">@Html.LabelFor(model => model.Salary, htmlAttributes: new { @class = "control-label col-md-2" })<div class="col-md-10">@Html.EditorFor(model => model.Salary, new { htmlAttributes = new { @class = "form-control" } })</div></div>
<div class="form-group">@Html.LabelFor(model => model.Gender, htmlAttributes: new { @class = "control-label col-md-2" })<div class="col-md-10">Male @Html.RadioButtonFor(model => model.Gender, "Male") Female @Html.RadioButtonFor(model => model.Gender, "Female")</div></div>
<div class="form-group">@Html.LabelFor(model => model.State, htmlAttributes: new { @class = "control-label col-md-2" })<div class="col-md-10">@Html.DropDownList("State" , new List<selectlistitem> { new SelectListItem{Text = "Gujarat" , Value="Gujarat"}, new SelectListItem { Text = "Mumbai" , Value ="Mumbai"}, new SelectListItem{ Text ="Delhi" ,Value = "Delhi"}, new SelectListItem{ Text ="Hydrabad" ,Value = "Hydrabad"} },"select State" ,new {@class ="form-control"}) </selectlistitem></div></div>
<div class="form-group">@Html.LabelFor(model => model.Address, htmlAttributes: new { @class = "control-label col-md-2" })<div class="col-md-10">@Html.EditorFor(model => model.Address, new { htmlAttributes = new { @class = "form-control" } })</div></div>
<div class="form-group"><div class="col-md-offset-2 col-md-10"><input class="btn btn-default" type="submit" value="Create"></div></div></div>
  }
<div>@Html.ActionLink("Back to List", "Index")</div>
  @section Scripts { @Scripts.Render("~/bundles/jqueryval") }

Войти в полноэкранный режим

Выйти из полноэкранного режима

Теперь запустите код, и вы получите следующий вывод.

Описание изображения
[Fig:- Create Page ]

Описание изображения
[Fig:- Index Page]


Вывод

В этой статье мы узнали, что коллекция форм автоматически извлекает значение элемента ввода из метода действия контроллера. Используйте класс коллекции форм для получения данных элемента ввода.