jquery - Many modal windows with large strings -

Using twitter bootstrap, my In the Net MVC App, I have a scene that pulls many areas. The value of each field is 100 characters long. The original string is always greater than 1000 characters long (sometimes 100k characters long).

  string length = result [i]; // is actually a long string which is longer than 1000 characters long = long Shuttle (0, 99); & Lt; Section & gt; & Lt; Div class = "line-fluid" & gt; & Lt; Div class = "span12" & gt; @ Short & lt; / Div & gt; & Lt; / Div & gt; & Lt; / Section & gt;   
 For every field that I want to draw, I should have a link that the user can click to show a model window in which I display small text.  
 So I should have 100 links in the normal window on the same page and every modal window will display its own text.  
 Something like this:  
 But my problems are:  
 1) I have many modal dialogs on the same page, so I think that I Will need a unique ID.  
 2) Text in every modal dialog ("string long") I might long to do when I drag them into client code, or maybe I can do this by sending long text to my controller I am I'm not sure what the best way would be.  
 I see this: But I do not understand what the answer to the inquiry ("Lunch Dialog Suggestions") is mentioned. One possible strategy is to have HTML only for a modal dialogue, and all its long versions are. Some types of JavaScript data structures, such as strings, such as a hash array or something else can cause your page to be swamped by HTML for hundreds of modal communication  
 Then, when the user 'shows me a tall version' link Clicks - you have some questions that change the internal text within the model, the dialog with the proper length of the string that receives from the hash array and then The dialog displays.  
 If you want to get a fancy - you will only load a small version of the string page, and when the user clicks on the link, it will retrieve the 'long version' of the string through AJX Will do  
 Twitter comes with Bootstrap Model Dialog, and there are a few ways to insert HTML in jQuery elements - see.  
 If you see the documentation for Twitter Bootstrap modal dialog, you will see that it can optionally load data via AJAX using the  Remote:  option.  
 This is a very good example of how you can use Twitter Bootstrap to do via AJAX  
 Controller  
  Public ac TionResult index () {var model = GetLongStrings (); See Return (Model); } Public Action Search Long string (string short string) {var longStrings = GetLongStrings (); Var longStringToReturn = Length strings. First with the default (x = & gt; x.Starts (shortString)); Return content (Long string tutorial); }   
 Then, something like this will appear in your view  
  @foreach (result in result) {var shortString = result.Substring (0, 5); & Lt; Section & gt; & Lt; Div class = "line-fluid" & gt; & Lt; Div class = "span12" & gt; @ ShortString & lt; / Div & gt; @Html.ActionLink ("see long version", "search long string", new {shortString = shortString}, new {data_toggle = "modal", data_ target = "#mymodal", aria_hidden = "true"}) & lt; / Div & gt; & Lt; / Section & gt; } & Lt; Div id = "mymodal" class = "modal hide fade" & gt; & Lt; Div class = "modal-header" & gt; & Lt; Button type = "button" class = "off" data-rejected = "modal" Aria-hidden = "true" & gt; And;; & Lt; / Button & gt; & Lt; H3 & gt; Modal Header & lt; / H3 & gt; & Lt; / Div & gt; & Lt; Div class = "modal-body" & gt; & Lt; / Div & gt; & Lt; Div class = "modal-footer" & gt; & Lt; A href = "#" class = "btn" data-rejected = "model" & gt; Close & lt; / A & gt; & Lt; / Div & gt; & Lt; / Div & gt;   
 The data features are important in the ActionLink because they direct Twitter Bootstrap to see which option to use for your dialog.  
 The code example can be improved if each string can accept an ID -  FindLongString  as a paragraph, which means that you pass it just in ActionLink can do.