0

我正在使用 c# 和 razor 生成发票列表。每张发票都是一个表格行，并有大量的注释清单。为了避免行之间的大量空间，我想隐藏注释并允许弹出来查看它。目前是：

 <td>
@foreach (var invoiceLine in invoice.InvoiceLines)
                {
                    <p>
                        <strong>@invoiceLine.Date.ToShortDateString() @invoiceLine.Username</strong> <br />
                        @Html.Raw(invoiceLine.Notes.Replace(Environment.NewLine, "<br />")) 
                        @Html.Raw((invoiceLine.DueDate.HasValue ? "<br /><strong>Follow up:</strong> " + invoiceLine.DueDate.Value.ToShortDateString() : "")) 
                        @Html.Raw(invoiceLine.Completed ? "<br /><strong>Completed</strong>" : "")
                    </p>
                }

所以我想做的是使用 jquery 添加弹出窗口：

$(function () {

$('#clickMe').click(function (event) {
    var mytext = $('#myText').val();

    $('<div id="dialog">' + mytext + '</div>').appendTo('body');
    event.preventDefault();

    $("#dialog").dialog({
        width: 600,
        modal: true,
        close: function (event, ui) {
            $("#dialog").hide();
        }
    });
}); //close click

});

然后修改我的代码：

<td>
            <h3 id="clickMe">Open Notes</h3>
               <textarea cols="1" rows="75" id="myText" style="display:none">
                @foreach (var invoiceLine in invoice.InvoiceLines)
                {
                    <p>
                        <strong>@invoiceLine.Date.ToShortDateString() @invoiceLine.Username</strong> <br />
                        @Html.Raw(invoiceLine.Notes.Replace(Environment.NewLine, "<br />")) 
                        @Html.Raw((invoiceLine.DueDate.HasValue ? "<br /><strong>Follow up:</strong> " + invoiceLine.DueDate.Value.ToShortDateString() : "")) 
                        @Html.Raw(invoiceLine.Completed ? "<br /><strong>Completed</strong>" : "")
                    </p>
                }
                </textarea>
            </td>

第一个问题是，只有第一行出现。我想是因为我的 id 一直都是一样的吗？

如何为每一行打开对话框？

我是 c# 和 js 的新手 :)

4

1 回答 1

0

首先： textarea 完全没有意义。

然后像这样改变零件。看到它在jsfiddle中工作。

HTML

<td>
@foreach (var invoiceLine in invoice.InvoiceLines)
{

    <p>
        <strong>@invoiceLine.Date.ToShortDateString() @invoiceLine.Username</strong> <br />
        @Html.Raw((invoiceLine.DueDate.HasValue ? "<br /><strong>Follow up:</strong> " + invoiceLine.DueDate.Value.ToShortDateString() : "")) 
        @Html.Raw(invoiceLine.Completed ? "<br /><strong>Completed</strong>" : "")

        <h3 class="notesClick">Open Notes</h3>
        <div class="notesHtml" style="display:none">
          @Html.Raw(invoiceLine.Notes.Replace(Environment.NewLine, "<br />")) 
        </div>

    </p>
}
</td>

JS

$(function() {

    $('.notesClick').click(function(event) {
        var notes = $(event.currentTarget).next('.notesHtml');
        $("<div>").html(notes.html()).dialog();
    });

});​
于 2012-06-25T12:41:53.990 回答