Динамически генерировать элементы управления в MVC и публиковать их значения - PullRequest
Новая
       19

Динамически генерировать элементы управления в MVC и публиковать их значения

0 голосов
/ 24 октября 2018

Я хочу, чтобы пользователь мог динамически добавлять или удалять элементы управления в форме.Пользователь может иметь несколько адресов.Итак, я создал список CommunicationDetailsViewmodel.CommunicationDetailsViewmodel выглядит следующим образом: 

public class CommunicationDetailsViewModel
    {
        public string OrganizationName { get; set; }
        public List<Country> Country { get; set; }

        public List<State> State { get; set; }

        public List<City> City { get; set; }

        [Display(Name = "Id")]
        public int CountryId { get; set; }

        [Display(Name = "Id")]
        public int StateId { get; set; }

        [Display(Name = "Id")]
        public int CityId { get; set; }

        [StringLength(32), Required(ErrorMessage = "Address is required")]
        public string Address { get; set; }
    }

SupplierInformationViewmodel выглядит следующим образом: 

public class SupplierInformationViewModel
{
    public SupplierInformationViewModel()
    {
        CommunicationDetailsViewModel = new List<ViewModels.CommunicationDetailsViewModel>();
    }

    [StringLength(50, ErrorMessage = "Organization name cannot be greater than 50 characters"), Required(ErrorMessage ="Organization name is required")]
    public string OrganizationName { get; set; }

    public List<CommunicationDetailsViewModel> CommunicationDetailsViewModel { get; set; }
}

Вид выглядит следующим образом: 

@model WebAPI.ViewModels.SupplierInformationViewModel
@{
    ViewBag.Title = "Supplier Information";
}

<h4>Supplier Details</h4>

@using (Html.BeginForm("Save", "SupplierInformation", FormMethod.Post))
{
    <div class="demo-section k-content">
        <div class="form-group">
            @Html.Label("Organization name")
            @Html.Kendo().TextBoxFor(model => model.OrganizationName).Name("OrganizationName").HtmlAttributes(new { @class = "k-textbox required", placeholder = "Organization Name" })
        </div>

        @for (int i = 0; i < Model.CommunicationDetailsViewModel.Count; i++)
        {
            <div class="form-group">
                @Html.Label("Country")
                @(Html.Kendo().DropDownListFor(model => model.CommunicationDetailsViewModel[i].CountryId).DataTextField("CountryName").DataValueField("Id").BindTo(Model.CommunicationDetailsViewModel[i].Country))
            </div>
            <div class="form-group">
                @Html.Label("State")
                @(Html.Kendo().DropDownListFor(model => model.CommunicationDetailsViewModel[i].StateId).DataTextField("StateName").DataValueField("Id").BindTo(Model.CommunicationDetailsViewModel[i].State))
            </div>
            <div class="form-group">
                @Html.Label("City")
                @(Html.Kendo().DropDownListFor(model => model.CommunicationDetailsViewModel[i].CityId).DataTextField("CityName").DataValueField("Id").BindTo(Model.CommunicationDetailsViewModel[i].City))
            </div>
            <div class="form-group">
                @Html.Label("Address")
                @Html.Kendo().TextBoxFor(model => model.CommunicationDetailsViewModel[i].Address).Name("Address").HtmlAttributes(new { @class = "k-textbox required", placeholder = "Address", @maxlength = "32" })
            </div>
            <div class="form-group">
                @Html.Label("Building name")
                @Html.Kendo().TextBoxFor(model => Model.CommunicationDetailsViewModel[i].BuildingName).Name("BuildingName").HtmlAttributes(new { @class = "k-textbox required", placeholder = "Address", @maxlength = "32" })
            </div>
        }
        <input type="button" value="Add New Address" />
    </div>
    @Html.Kendo().Button().Name("btnSave").Content("Save").HtmlAttributes(new { type = "submit", @class = "k-button k-primary" })
}

Вкл.Add New Address нажмите кнопку, и я хочу создать такие поля, как раскрывающийся список Страна, раскрывающийся список Состояние, раскрывающийся список Город со значениями и текстовые поля expty для Имя здания, Адрес и т. Д. Когда пользователь публикует эту форму, все эти вновь добавленные поля должны быть опубликованы.Эти поля являются частью CommunicationDetailsViewModel.Таким образом, в моем действии я должен иметь возможность использовать как существующие, так и новые поля.

Есть идеи, как мне этого добиться?

1 Ответ

0 голосов
/ 24 октября 2018

Бритва сама по себе не очень хороша в манипулировании DOM в этом смысле.Лучше всего использовать JavaScript или jQuery, чтобы получить эффект, который вы ищете.Лично я бы создал поля в бритве, но настроил стили, чтобы они были скрыты по умолчанию.Затем вы можете прикрепить обработчик щелчка к кнопке Add New Address, которая будет вызывать функцию для изменения стилей входов для их отображения.Вы даже можете добавить и удалить логику проверки из полей, используя jQuery, если вам нужны сообщения проверки.Однако, если вы хотите разрешить столько новых адресов, сколько пожелает пользователь, этот метод будет работать не очень хорошо.В этом случае ваша JS-функция добавления нового адреса должна была бы динамически добавлять новые поля в форму, а не просто показывать скрытые.Надеюсь, это было полезно!

...