Javascript ASP.NET-是否可以使用按钮上的onclick事件创建标记？

我有一个带有文本区的页面，允许您发送一条消息。但就我而言，我想发几条信息

我想有一个按钮，可以创建一个新的文本区域，但我没有找到解决方案

@Html.TextAreaFor（m=>m.MessageToSend，新{style=“宽度：1200px；高度：600px；”}）

上面是我想通过点击按钮创建/复制的文本框

---

--我已经可以发送消息了，我只想通过点击按钮创建其他文本区域

是的，你可以，首先你需要安装jquery。然后，您需要将代码放在一个div中，如：

 <div id="multiple">
     @Html.TextAreaFor(m => m.MessageToSend, new { style = "width: 1200px; height: 600px;" 
      })
  </div

@TextAreaFor（m=>m.MessageToSend，新{style=“宽度：1200px；高度：600px；”
})
由于要发送多条消息，因此最好将
MessageToSend
属性数据类型从
string
更改为
List
。代码如下：

public class MessageViewModel
{
    public string Title { get; set; }
    public List<string> MessageToSend { get; set; }
}

SendMessage查看页面：

@model MVCWebApplication.Models.MessageViewModel
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="row">
    <div class="col-md-4">
        <form asp-action="SendMessage">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <div class="form-group">
                <label asp-for="Title" class="control-label"></label>
                <input asp-for="Title" class="form-control" />
                <span asp-validation-for="Title" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="MessageToSend" class="control-label"></label> <i class="fa fa-plus" id="iconAdd" style="font-size:22px"></i>
                <div id="multiple">
                    @if (Model.MessageToSend.Count > 0)
                    {
                        @for (var i = 0; i < Model.MessageToSend.Count; i++)
                        {
                            @Html.TextAreaFor(c=>c.MessageToSend[i], new{ style = "width: 1200px; height: 60px;"})
                        }
                    }

                </div><span asp-validation-for="MessageToSend" class="text-danger"></span>
            </div>
            <div class="form-group">
                <input type="submit" value="Create" class="btn btn-primary" />    <input type="button" id="btnAjaxCreate" value="Ajax Create" class="btn btn-primary" />
            </div>
        </form>
    </div>
</div>

并添加以下脚本：

@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
    <script>
        $(function () {
            //get the first textarea, use it as a template.
            var existingtext = $("#multiple").html();
            //submit button click event
            $("#iconAdd").click(function () {
                //get the count of the textarea.
                var num = $("#multiple").find("textarea").length;
                //change the template id and name value.
                newtext = existingtext.replace("MessageToSend[0]", "MessageToSend[" + num + "]").replace("MessageToSend_0_", "MessageToSend_" + num + "_");
                //dynamically add the textarea element.
                var htmlcontent = $("#multiple").html() + newtext;
                $("#multiple").html(htmlcontent);
            });
        });
    </script>
}

            //using Ajax to send the data to the action method.
            $("#btnAjaxCreate").click(function () {
                //create a object to store the entered data.
                var message = {};
                message.Title = $("#Title").val();
                var messgecontent = [];
                $("#multiple").find("textarea").each(function (index, item) {
                    messgecontent.push($(item).val());
                });
                message.MessageToSend = messgecontent;

                $.ajax({
                    url: "/Home/AjaxSendMessage",
                    method: "Post",
                    data: message,
                    success: function (response) {
                        alert(response);
                    },
                    error: function (response) {
                        console.log("error");
                    }
                })

            });

结果如下：

public class MessageViewModel
{
    public string Title { get; set; }
    public List<string> MessageToSend { get; set; }
}

我正在添加一个nugget包（Jquery）。安装后，我应该在代码中添加一些内容吗？未捕获引用错误：messageAdder未在HTMLInputElement.onclick中定义。如果消息是未捕获引用，单击按钮时我会出现此错误。这意味着onclick无法找到adder（）函数。因此，请确保在onclick中定义的函数名与script上的相同名称匹配这很奇怪，这是相同的名称：/嘿，非常感谢，我将一些部分集成到了代码中。但我不明白如何使用模型中的方法。例如，我想通过点击“创建”按钮来调用这个方法。这是一个已创建的发送方法“但我不明白如何使用模型中的方法”。您的意思是仍要使用模型（MessageToSend属性为字符串类型）？如果是这种情况，您也可以参考上面的代码来动态添加textarea元素，但是当您将数据提交给action方法时，您可能只会获得第一个textarea值。因此，在我的示例中，我建议您将
字符串
类型更改为
列表
。如果使用第一种方法（更改模板名称和id属性），我们可以通过模型绑定方法发送多条消息。“我想通过单击“创建”按钮来调用此方法。”在这种情况下，您可以将加号图标更改为
元素，然后附加按钮单击事件。我忘记通知，它正在起作用。我没有使用所有的东西，但是你发送的大部分代码都很有用
@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
    <script>
        $(function () {
            //get the first textarea, use it as a template.
            var existingtext = $("#multiple").html();
            //submit button click event
            $("#iconAdd").click(function () {
                //get the count of the textarea.
                var num = $("#multiple").find("textarea").length;
                //change the template id and name value.
                newtext = existingtext.replace("MessageToSend[0]", "MessageToSend[" + num + "]").replace("MessageToSend_0_", "MessageToSend_" + num + "_");
                //dynamically add the textarea element.
                var htmlcontent = $("#multiple").html() + newtext;
                $("#multiple").html(htmlcontent);
            });
        });
    </script>
}

    [HttpPost]
    public IActionResult AjaxSendMessage(MessageViewModel message)
    {
        if (ModelState.IsValid)
        {
            return Ok("success");
        }
        return View();
    }

            //using Ajax to send the data to the action method.
            $("#btnAjaxCreate").click(function () {
                //create a object to store the entered data.
                var message = {};
                message.Title = $("#Title").val();
                var messgecontent = [];
                $("#multiple").find("textarea").each(function (index, item) {
                    messgecontent.push($(item).val());
                });
                message.MessageToSend = messgecontent;

                $.ajax({
                    url: "/Home/AjaxSendMessage",
                    method: "Post",
                    data: message,
                    success: function (response) {
                        alert(response);
                    },
                    error: function (response) {
                        console.log("error");
                    }
                })

            });