Question

我有一个界面来填充字段，您可以在其中添加和删除字段：

<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”的元素。

Answer 1

由于我们不知道您的模型，这是一个使用

的示例

公共类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
  @ {       布局= null; }
  引用

<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控件与Model中的名称匹配，并且您使用的是Post控制器必须按预期方式接收数据

Answer 2

您好，如果我真的了解您的问题，有几种方法可以用来向您解释最简单的方法之一：首先，您的操作方法应类似于下面的代码

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" })

如何使用输入模型发送数据？

2 个答案: