Question

当用户单击按钮时，Javascript会将以下HTML添加到页面中，每次单击按钮时IncrNumber的值都会增加，因此第一次单击将生成具有以下ID的div：（start0，end0，comm0），第二次点击会产生ID（start1，end1，comm1）等等。

Start: <input type="text" class="form-control" id="start' + IncrNumber + '"/>

End: <input type="text" class="form-control" id="end' + IncrNumber + '" />

Comment:  <textarea rows="4" class="form-control" id="comm' + IncrNumber + '"></textarea>

由于这些div是使用Javascript动态添加的，我无法使用Razor 因此无法将这些文本框转换为＆＃34; HTML.TextBoxFor（x.start）...＆＃34 ;

由于点击按钮会产生一个变量，这些字段数量无限，我无法将它们添加到我的模型，无论如何。

如何在控制器中获取startX，endX和commX的值？

修改：

DBO.Televiewers [ID，Date]和DBO.Annotations [ID，TeleviewerID，Start，End，Comment]之间存在多对一关系。用户可以根据Televiewer添加任意数量的Annotation对象。

查看：

<div class="panel panel-form-5">
<div class="panel-heading">
    <h3 class="panel-title">Edit Televiewer</h3>
</div>
<div class="panel-body">

    @using (Html.BeginForm())
    {
        @Html.AntiForgeryToken()


        @Html.Label("Hole Name")
        @Html.EditorFor(m => m.HoleName, new { htmlAttributes = new { @class = "form-control" } })
        <br />
        @Html.Label("Televiewer Date")
        @Html.EditorFor(m => m.TeleviewerDate, new { htmlAttributes = new { @class = "form-control" } })
        <br />
        <div class="panel panel-default">
            <div class="panel-body">
                <div class="row">
                    <div class="col-lg-10">
                        <h4>Annotations</h4>
                    </div>
                    <div class="col-lg-2">                           
                        <div id="addbuttondiv">
                            <button onclick="addAnswer(); return false;" class="btn btn-default">Add New</button>
                        </div>

                    </div>
                </div>
                <hr />
                <div id="annotations">


                </div>
            </div>
        </div>
        <br />
                @Html.ActionLink("Back", "Index", "Televiewer", null, new { @class = "btn btn-default" })
                <input type="submit" value="Calculate & Save" class="btn btn-primary" />
       }

            </div>
        </div>
        <script>
            var answers = 0;

            function addAnswer() {
                var write = document.getElementById('annotations');
                write.innerHTML += ' <div class="row"><div class="col-lg-3 col-lg-offset-1">Start Depth: <input type="text" class="form-control" id="start' + answers + '"/></div><div class="col-lg-3 col-lg-offset-4" >End Depth: <input type="text" class="form-control" id="end' + answers + '" /></div></div><br /><div class="row"><div class="col-lg-1 col-lg-offset-2"><br />Comment:</div><div class="col-lg-6"><textarea rows="4" class="form-control" id="comm' + answers + '"></textarea></div></div><hr/>';
                answers++;
            }
        </script>

Answer 1

只要您在模型上支持新元素，就可以在客户端上发回新创建的元素。

        $("#submit").on('click', function ()
        {
            var i = 0;
            $('input[name ^= \'start\']').remove();
            $('input[name ^= \'start\']').each(function ()
            {
                $("<input type='hidden' value='" + $(this).attr("id") + "' />").attr("id", "start_" + i + "_"+i).attr("name", "start[" + i + "]."+i).appendTo("form");
                i++;
            });

这将在客户端上为您的模型生成对象。您需要一个包含开始，结束和注释列表的列表，或者您可以创建一个包含所有三个对象的列表，但您需要更改从客户端发回的对象。

当您需要渲染这些项目时：

<h5>Elements assigned here</h5>
<ul id="xxx" class="droptrue dropZone selectorBox list">
@foreach(var item in Model.startObjects)
{
  <li class="ui-state-default" id="@item.startID"><span class="sName2"><i class="fa fa-flask" aria-hidden="true"></i>&nbsp;@item.startName</span></li>
}
</ul>

希望这有帮助！

Answer 2

采用类似于这个故事的方法：MVC Form not able to post List of objects

以下是基本型号：

public class Televiewer
{

    public string HoleId { get; set; }

    public DateTime Date { get; set; }

    public List<Annotation> Annotations { get; set; }
}

public class Annotation
{
    public int AnnotationId { get; set; }
    public string HoleId { get; set; } //---- foreign key
    public int StartDepth { get; set; }
    public int EndDepth { get; set; }
    public string Comment { get; set; }
}

在html中，为您的注释＆＃34;部分：

<div id="Annotations">
    @foreach (var ann in Model.Annotations)
    {
       <div class="annotation">
         <input type="text" class="form-control startDepth" name="Annotations[@i].StartDepth" value="@Model.Annotations[i].StartDepth" />
         <input type="text" class="form-control endDepth" name="Annotations[@i].EndDepth" value="@Model.Annotations[i].EndDepth" />
         <textarea rows="4" class="form-control comment"name="Annotations[@i].Comment" >@Model.Annotations[i].Comment</textarea>
       </div>
     }
</div>

在javascript中，当您点击＆＃34;添加＆＃34;按钮：

function addAnswer()
{
    var index = $('#Annotations').find('.annotation').length;
    var html = '<br><div class="annotation">'
            + '<input type="text" class="form-control startDepth" name="Annotations[' + index + '].StartDepth" value="" />'
            + '<input type="text" class="form-control endDepth" name="Annotations[' + index + '].EndDepth" value="" />'
            + '<textarea rows="4" class="form-control comment"name="Annotations[' + index + '].Comment" ></textarea>'
            + '</div>';
    $('#Annotations').append(html);
}

这应该大致插入您的表单提交。你可能需要解决一些问题（不能说什么，因为我没有足够的代码）。

注意： 1.查看模特是你的朋友。如果您需要包装一些数据，请为其制作模型。 2.按照我的方式在javascript中创建html是可以的，但使用html模板会更好。我只是不想在这里打开那些罐头或蠕虫。我使用的模型显然被剥离了。我假设您正在使用EF，所以您必须相应地进行调整。

ASP.NET MVC通过在Controller中使用ID获取div的值

2 个答案: