在按钮(jQuery)的onclick上插入@ Html.TextAreaFor或使用AJX.ActionLink [英] Insert @Html.TextAreaFor onclick of a button (jQuery) OR using AJX.ActionLink

问题描述

我有一个带有@Html.TextAreaFor控件的编辑表单.我需要有一个链接"Add New"，它将在当前显示的末尾插入一个新的@Html.TextAreaFor控件.应该是@Html.TextArea控件吗?如果是这样，提交表单以将其保存到数据库时，应该如何从新创建的控件中获取信息?

I have an edit form with @Html.TextAreaFor controls. I need to have a link 'Add New' which will insert a new @Html.TextAreaFor control at the end of the current display. Should it be @Html.TextArea control? If so, how should I fetch the information from newly created controls when I submit the form to save it to the DB?

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

<div class="form-horizontal">
    <h4>ResourceTemplate</h4>
    <hr />
    @Html.ValidationSummary(true, "", new { @class = "text-danger" })
    <div class="form-group">
        @Html.LabelFor(model => model.ResourcesLabel, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.ResourcesLabel, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.ResourcesLabel, "", new { @class = "text-danger" })
        </div>
    </div>

    @if (Model.Resources.Count() > 0)
    {
        <div class="form-group">
            @Html.LabelFor(model => model.Resources, htmlAttributes: new { @class = "control-label col-md-2" })
            @for (var i = 0; i < Model.Resources.Count(); i++)
            {
                <div class="col-md-10">
                    @Html.TextAreaFor(m => m.Resources[i].Text, new { htmlAttributes = new { @class = "form-control", @cols = 80, @rows = 50 } })
                    @Html.TextAreaFor(m => m.Resources[i].Uri, new { htmlAttributes = new { @class = "form-control", @cols = 80, @rows = 50 } })
                </div>
            }
        </div>
     }
    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" value="Save" class="btn btn-default" />
        </div>
    </div>
</div>
} 

推荐答案

TextAreaFor帮助器将生成一个具有指定属性作为name属性值的<textarea> HTML元素. 假设您要添加的是新资源对象，则可以按照以下操作生成新的资源输入:

The TextAreaFor helper generates a <textarea> HTML element with the specified property as the name attribute value. Assuming its a new resource object you are trying to add you can follow this to generate a new resource input:

<div id="resourcesContainer" class="form-group">
            @Html.LabelFor(model => model.Resources, htmlAttributes: new { @class = "control-label col-md-2" })
            @for (var i = 0; i < Model.Resources.Count(); i++)
            {
                <div class="col-md-10">
                    @Html.TextAreaFor(m => m.Resources[i].Text, new { htmlAttributes = new { @class = "form-control", @cols = 80, @rows = 50 } })
                    @Html.TextAreaFor(m => m.Resources[i].Uri, new { htmlAttributes = new { @class = "form-control", @cols = 80, @rows = 50 } })
                </div>
            }

            <button type="button" id="btnAddResource">Add resource</button>

        </div>

<script>
$('#btnAddResource').on('click', function() {
    var container = $('#resourcesContainer');
    var index = container.children('div').length;
    var resourceText = $('<textarea>', { name: "Resources[" + index + "].Text"});
    var resourceUri = $('<textarea>', { name: "Resources[" + index + "].Uri"});
    container.append(
       $('<div>', { class="col-md-10" }).append(resourceText).append(resourceUri)
    );
});
</script>

基于注释，取决于局部渲染的方式，您需要将按钮click事件绑定到addResource函数.这种方式将其直接绑定到元素标记上，但是您可以根据您的实现找到另一种不受干扰的绑定方式.

Based on comment, depending on how your partial is being rendered, you need to bind your button click event to the addResource function. This way its bound directly on the element markup but you can find an alternate way to bind it unobtrusively depending on your implementation.

<button type="button" onclick="addResource();">Add resource</button>

<script>
function addResource() {
    var container = $('#resourcesContainer');
    var index = container.children('div').length;
    var resourceText = $('<textarea>', { name: "Resources[" + index + "].Text"});
    var resourceUri = $('<textarea>', { name: "Resources[" + index + "].Uri"});
    container.append(
       $('<div>', { class="col-md-10" }).append(resourceText).append(resourceUri)
    );
}
</script>

这篇关于在按钮(jQuery)的onclick上插入@ Html.TextAreaFor或使用AJX.ActionLink的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！