Как отправить данные с использованием модели ввода? - PullRequest
Новая
       3

Как отправить данные с использованием модели ввода?

0 голосов
/ 14 февраля 2019

У меня есть интерфейс для заполнения полей, где вы можете добавлять поля и удалять их: 

<form role="form" class="form-horizontal">
    <div class="form-group bg-light text-center pt-3 pb-3">
        <b><h3>Create Form</h3></b>
    </div>
    <div class="form-group">
        <input type="text" class="form-control" placeholder="HeadField">
    </div>
    <div class="form-group">
        <textarea class="form-control" rows="5" placeholder="Description Field"></textarea><br>
    </div>
    <h5>Fields:</h5><br>    
    <div class="border border-secondary rounded p-3" id="container">
        <div class="field">
            <div class="form-row">
                <div class="form-group col-md-5">
                    <input class="form-control form-control-inline" placeholder="Head of field">
                </div>
                <select class="selectBox form-control col-md-6 ml-4" onchange="addElement(this);">
                    <option value='textarea'>Typefield1</option>
                    <option value='textarea'>Typefield2</option>
                    <option value='textarea'>Typefield3</option>
                    <option value='input'>Typefield4</option>
                    <option value='input'>Typefield5</option>
                </select>
                <div class="form-group">
                    <input type="button" class="btn btn-default btn-xs col-md-1 ml-3" value="X" onclick="removeField(this);"><br>
                </div>
            </div>
            <div class='content'>

            </div>
            <div class="form-group">
                <div class="form-check text-right">
                    <input class="form-check-input" type="checkbox" required/>Require<br>
                </div> 
            </div>
        </div>
    </div>
    <div class="form-group text-right mt-3">
    <input type="button" class="btn btn-success" value="addField" onclick="addField(this);"><br><br>
</div>
    <div class="form-group mb-3">
        <input type="submit" class="btn btn-success" value="Save">
        <input type="button" class="btn btn-danger" value="Close">
    </div>
</form>

Мне нужно использовать модель ввода для отправки данных в контроллер: 

    [HttpPost]
         public ActionResult EditForm(Model model)
                {
//fill model in BD using Linq or ather...do something
                }

Как должна выглядеть модель ввода в моем случае?Не уверен, что это называется привязкой модели, но я новичок в asp net mvc.addField: 

function addField(btn) {
  var form = btn.closest("form");
  if (form) {
    var div = form.querySelector(".field");
    if (div) {
      var divCreated = document.createElement("div");
      divCreated.className = div.className;
      divCreated.innerHTML = div.innerHTML;
      document.getElementById('container').appendChild(divCreated);
    }
  }
}

И функция addElement () добавляет элемент в div с id = "content".

Ответы [ 2 ]

0 голосов
/ 15 февраля 2019

Поскольку мы не знаем вашу модель, это один из примеров того, как это сделать, используя

открытый класс PersonModel {

 public int PersonId { get; set; }

public string Name { get; set; }

public string Gender { get; set; }

public string City { get; set; } }

И сделать следующеев вашем VIEW

@ model Form_Post_MVC.Models.PersonModel
@ {Layout = null;}
Blockquote 

<meta name="viewport" content="width=device-width"/>
<title>Index</title> </head> <body>
@using (Html.BeginForm("Index", "Home", FormMethod.Post))
{
    <table cellpadding="0" cellspacing="0">
        <tr>
            <th colspan="2" align="center">Person Details</th>
        </tr>
        <tr>
            <td>PersonId: </td>
            <td>
                @Html.TextBoxFor(m => m.PersonId)
            </td>
        </tr>
        <tr>
            <td>Name: </td>
            <td>
                @Html.TextBoxFor(m => m.Name)
            </td>
        </tr>
        <tr>
            <td>Gender: </td>
            <td>
                @Html.DropDownListFor(m => m.Gender, new List<SelectListItem>
               { new SelectListItem{Text="Male", Value="M"},
                 new SelectListItem{Text="Female", Value="F"}}, "Please select")
            </td>
        </tr>
        <tr>
            <td>City: </td>
            <td>
                @Html.TextBoxFor(m => m.City)
            </td>
        </tr>
        <tr>
            <td></td>
            <td><input type="submit" value="Submit"/></td>
        </tr>
    </table>
} </body> </html>

Ваши элементы управления HTML совпадают с именами в модели, и вы используете сообщение, которое контроллер должен получитьданные как ожидалось

0 голосов
/ 15 февраля 2019

Привет, если я правильно понял ваш вопрос. Есть несколько способов для этого, я хочу объяснить вам один из самых простых способов: во-первых, ваш метод действия должен выглядеть следующим образом: 

public ActionResult EditForm(Model model)
    {
       return View("ViewName", model);
    }

после этого вПредставьте, что вы должны использовать модель 

@model Models.ViewModels.Model

Далее вы можете использовать Html помощники для генерации ваших входных данных, например 

@Html.TextAreaFor(model => model.Description, new { @class = "form-control", cols = "2" })
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...