Question

我正在使用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>

第一个问题是，只出现第一行。我猜是因为我的身份一直都是一样的？

如何为每行打开对话框？

我是c＃和js btw的新手：）

Answer 1

首先：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();
    });

});

表行上的JQuery对话框

1 个答案: