Asp.net mvc 4 如何在MVC4应用程序页面中动态获取同一页面上带有TinyMCE的多个文本区域?

Asp.net mvc 4 如何在MVC4应用程序页面中动态获取同一页面上带有TinyMCE的多个文本区域?,asp.net-mvc-4,tinymce-4,Asp.net Mvc 4,Tinymce 4,我有一个我认为是一个简单的场景,在这个场景中,我必须使用RTE功能生成多个文本区域。我正在使用TinyMce,如果我只有一个文本区域,那么它会非常有效,而其他文本区域则没有。我创建了一个简单的示例MVC4应用程序,试图在将我的新知识迁移到真正的应用程序之前让所有这些都正常工作。此页面上的其他项目都是可编辑的,因此问题可能源于html帮助程序。或者从结果html显示所有三个TextArea都有相同的id这一事实来看。然而,由于代码显然没有引用id,我认为这无关紧要。有人肯定知道吗 我有一个简单的模

我有一个我认为是一个简单的场景,在这个场景中,我必须使用RTE功能生成多个文本区域。我正在使用TinyMce,如果我只有一个文本区域,那么它会非常有效,而其他文本区域则没有。我创建了一个简单的示例MVC4应用程序,试图在将我的新知识迁移到真正的应用程序之前让所有这些都正常工作。此页面上的其他项目都是可编辑的,因此问题可能源于html帮助程序。或者从结果html显示所有三个TextArea都有相同的id这一事实来看。然而,由于代码显然没有引用id,我认为这无关紧要。有人肯定知道吗

我有一个简单的模型:

TextModel text = new TextModel();
text.P1 = "This is an editable element.";
我已将TinyMce包括在BundleConfig文件中,然后是我的_布局中。然后我有一个强类型视图

@model TinyMCE_lite.Models.TextModel
还有一个脚本部分,用于扩展焦点上的文本区域:

<script>
$(window).load(function () {
$('textarea.expand').focus(function () {
        $(this).addClass("expanding")
        $(this).animate({
            height: "10em"
        }, 200);
    });
    $('textarea.expand').blur(function () {
        $(this).animate({
            height: "28px"
        }, 100);
        $(this).removeClass("expanding")
    });
});
然后我在一个循环中得出三个:

@using (Html.BeginForm("Index", "Home", FormMethod.Post))
{
<fieldset>
    <h1 class="editable">Editable header</h1>

    @for (int count = 0; count < 3; count++ )
    {
        int index = count + 1;
        <h3>@index</h3>
        <p class="editable">@Html.DisplayFor(model => model.P1)</p>
        @Html.TextAreaFor(model => model.P2, 0,0, new { @class = "expand" })
    }

    <div style="margin-top: 25px;"><input type="submit" value="Save" /></div>
</fieldset>
}

第一个按预期操作,显示编辑器元素,但不显示其他元素。三者都如预期的那样扩张。希望我忽略了一些简单的事情。有什么想法吗?

哇!原来是相同的身份证。我所要做的就是创建唯一的ID,它工作得很好。 我改变了这一点:

@Html.TextAreaFor(model => model.P2, 0,0, new { @class = "expand" })
为此:

@Html.TextAreaFor(model => model.P2, 0,0, new { @class = "expand", id = @count })

希望这能避免其他人在几个小时的痛苦中试图弄明白这一点。

为什么同一个属性有两个文本区域?这背后有什么特别的原因吗?