大字符串的很多模態窗口

Question

在使用twitter bootstrap的.Net MVC應用程序中，我有一個View可以繪製很多字段。每個字段的值是一個縮短的字符串，長度爲100個字符。原始字符串總是超過1000個字符（有時爲10萬個字符）。

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）我將不得不將長文本（「字符串長」）傳遞給每個模態對話框。也許我可以在客戶端代碼中繪製它們，或者我可以通過將長文本發送給我的控制器來做到這一點。我不確定最好的方法是什麼。

我一直在看這個：ASP.NET MVC modal dialog/popup best practice但我不太明白檢查的答案是指什麼（「Lunchy的對話框建議」？）。

Answer 1

一個潛在的策略是將HTML僅用於一個模式對話框，並且在某種JavaScript數據結構中具有所有字符串的所有長版本，如散列數組或其他類型。這樣可以節省您的頁面被數百個模態對話框的HTML膨脹

然後，當用戶單擊「顯示長版本」鏈接時 - 您有一些查詢將用模式對話框替換模式對話框中的內部文本它從哈希數組中檢索到的字符串的適當「長版本」，然後顯示該對話框。

如果你想獲得更多的信息 - 你只能在頁面中加載短版本的字符串，並且當用戶點擊鏈接時，它會通過AJAX檢索字符串的'長版'。

Twitter Bootstrap帶有模式對話框，參見here，JQuery有一些將HTML插入元素的方法 - 請參見here。

如果您查看Twitter Bootstrap模式對話框的文檔，您會發現它可以選擇使用remote:選項通過AJAX遠程加載數據。

這裏是你能如何利用Twitter的引導的一個粗略的例子，通過AJAX

做到這一點

控制器

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); 
} 

然後，您認爲會是這個樣子

@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中傳遞此代碼。

Answer 2

斯坦克的答案是你所需要的，所以如果它對你有幫助，不要猶豫，接受它。

我只是有一個觀察，雖然：它是不是真的可靠，通過短字符串檢索長字符串。我的意思是理論上所有的字符串可以以相同的100個字符開始（所有的字符串甚至可以是相同的:)）。如果有兩個以相同的100個字符開始的字符串，則無論單擊哪個短字符串，都只返回第一個字符串。

更可靠的方法是爲每個字符串提供唯一的標識。只要它們是獨一無二的，這可以是任何東西。這取決於你的服務器端邏輯。

• 如果字符串來自於關係數據庫中，通常可以使用表的主鍵（或任何唯一的鑰匙。這是一個很好的做法，對大多數表的唯一增量ID）。這種方法也會導致相當快速和乾淨的數據庫查詢。但請記住，通過這種方式，您可以從數據庫結構中揭示更多可能需要的信息。
• 如果字符串在有序列表中且順序固定，則可以使用元素的索引。

因此，採取發臭的示例代碼和引入一個數據庫連接到它（實體框架在我的情況，但是這可能是任何東西）：

控制器操作：

public ActionResult Index() 
{ 
    using (Context ctx = new MyEntities()) 
    { 
     var model = ctx.Strings.Select(o => new { Id = o.Id, longString = o.String }); 
     return View(model); 
    } 

} 

public ActionResult FindLongString(string id) 
{ 
    using (Context ctx = new MyEntities()) 
    { 
     var record = ctx.Strings.SingleOrDefault(o => o.Id == id); 
     if (record == null) 
     { 
      throw new HttpException(404, "The long string cannot be found"); 
     } 
     else 
     { 
      return record.String; 
     } 
    } 
} 

的觀點：

@foreach (var result in results) 
{ 
    var shortString = result.String.Substring(0, 99); 
    <section> 
     <div class="row-fluid"> 
      <div class="span12">@shortString</div> 
      @Html.ActionLink("See long version", "FindLongString", 
          new { id = result.Id }, 
          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>