jquery - 许多带有大字符串的模态窗口

Question

在我使用 twitter bootstrap 的 .Net MVC 应用程序中，我有一个绘制许多字段的 View 。每个字段的值是一个长度为 100 个字符的缩短字符串。原始字符串的长度始终超过 1000 个字符(有时长达 100k 个字符)。

string long = result[i]; // really long string that's over 1000 characters long
string short = long.Substring(0, 99);
<section>
    <div class="row-fluid">
        <div class="span12">@short</div>
    </div>    
</section>

对于我绘制的每个字段，我需要有一个链接，用户可以单击该链接来显示一个模式窗口，在其中显示非缩短文本。

所以我可能希望在同一页面上有 100 个指向模态窗口的链接，并且每个模态窗口将显示自己的文本。

类似这样的:http://jqueryui.com/dialog/

但我的问题是:

1) 我将在同一页面上有很多模式对话框，因此我想每个对话框都需要一个唯一的 ID。

2)我必须将长文本(“字符串长”)传递给每个模式对话框。也许当我在客户端代码中绘制它们时我可以做到这一点，或者也许我可以通过将长文本发送到我的 Controller 来做到这一点。我不确定最好的方法是什么。

我一直在看这个:ASP.NET MVC modal dialog/popup best practice但我不太明白检查的答案指的是什么(“Lunchy 的对话建议”？)。

Answer 1

一种潜在的策略是仅使用一个模式对话框的 html，并将字符串的所有长版本放在某种 JavaScript 数据结构中，例如哈希数组或其他东西。这将避免您的页面因 HTML 的数百个模式对话框而变得臃肿

然后，当用户单击“显示长版本”链接时，您会进行一些查询，该查询将模式对话框中的内部文本替换为从哈希数组中检索的字符串的适当“长版本”，并且然后显示该对话框。

如果您想要更高级 - 您只需在页面中加载字符串的短版本，当用户单击链接时，它将通过 AJAX 检索字符串的“长版本”。

Twitter Bootstrap 附带一个模态对话框，请参阅 here ，并且 JQuery 有一些将 HTML 插入元素的方法 - 请参阅 here .

如果您查看 Twitter Bootstrap Modal Dialog 的文档，您会发现它可以选择使用 remote: 选项通过 AJAX 远程加载数据。

这里是一个粗略的示例，说明如何利用 Twitter bootstrap 通过 AJAX 来执行此操作

Controller

public ActionResult Index()
{
    var model = GetLongStrings(); 
    return View(model);
}

public ActionResult FindLongString(string shortString)
{
    var longStrings = GetLongStrings();
    var longStringToReturn = longStrings
                            .FirstOrDefault(x => x.StartsWith(shortString));

    return Content(longStringToReturn);
}

然后，您的 View 将如下所示

@foreach (var result in results)
{
    var shortString = result.Substring(0, 5);
    <section>
        <div class="row-fluid">
            <div class="span12">@shortString</div>
            @Html.ActionLink("See long version", "FindLongString", 
                             new { shortString = shortString }, 
                             new { data_toggle = "modal", 
                                   data_target = "#myModal", 
                                   aria_hidden = "true" })
        </div>
    </section>
}

<div id="myModal" class="modal hide fade">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h3>Modal header</h3>
    </div>
    <div class="modal-body">
    </div>
    <div class="modal-footer">
        <a href="#" class="btn"  data-dismiss="modal">Close</a>
    </div>
</div>

ActionLink 中的数据属性很重要，因为它们指示 Twitter Bootstrap 在对话框中使用哪些选项。

如果每个字符串都有一个 ID，则可以改进代码示例 - FindLongString 可以接受 `int 作为参数，这意味着您只需在 ActionLink 中传递它即可。