ASP.NET - 可以在按钮上使用 onclick 事件创建标签吗？

Question

我有一个带有 TextArea 的页面，可让您发送一条消息。 但就我而言，我想发送几条消息。

我想有一个按钮，可以根据需要创建一个新的 TextArea，但我没有找到解决方案。

@Html.TextAreaFor(m => m.MessageToSend, new { style = "width: 1200px; height: 600px;" })上面是我想通过单击按钮创建/复制的文本框。

-- 我已经可以发送消息了，我只想通过单击按钮创建其他 TextArea

Answer 1

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

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

然后创建一个按钮来添加多个办公桌，例如：-

   <button class="btn btn-primary" onclick="adder()">Adder</button>

在，最后写脚本

  <script>
       function adder()//This function is called when u click that button
        {
           var html='';
           html += '@Html.TextAreaFor(m => m.MessageToSend, new { style = "width: 1200px; height: 600px;" })
          })';
          $("#multiple").append(html); //This will stack your html input inside that id as we have name multiple and given id
      
        }
    
      </script>

但是，您需要管理您的 controller

Answer 2

由于要发送多条消息，最好将MessageToSend属性数据类型从string更改为List<string> 。 像这样的代码：

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

在 View Page 中，当页面加载时，您可以复制初始textarea并将其用作模板。 然后，您可以添加一个 Font Awesome Plus 图标来显示添加按钮。 在其点击事件中，您可以根据模板动态添加textarea元素。 代码如下：

家庭控制器：

    public IActionResult SendMessage()
    {
        MessageViewModel model = new MessageViewModel() { MessageToSend = new List<string>() { "" }, Title="" };
        return View(model);
    }
    [HttpPost]
    public IActionResult SendMessage(MessageViewModel message)
    {
        if (ModelState.IsValid)
        {
            return View(message);
        }
        return View();
    }

发送消息查看页面：

@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>
}

此外，您还可以使用JQuery.Ajax将数据发送到操作方法。

添加以下操作方法：

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

            });

结果是这样的：