generieren Daten auf Anfrage (ASP.NET MVC - HTML)

Question

Alle,

Ich versuche, Benutzer TAGS in Menü zu generieren dynamisch

Ich habe die folgende

1. Erstellt eine „Partial Anzeigen "für TAGS-Elemente und platziert es im Hauptmenü (Navigationsleiste)

2. Dynamisch generierte Tag-Liste mit TAG MODELL

Meine Teilansicht hat den folgenden Code

@{ 
MVCbootstrap.Views.Tag.TagListGenerator tagList = new MVCbootstrap.Views.Tag.TagListGenerator(); 
List<MVCbootstrap.Models.TagModel> Tag_List = tagList.Get_Tags_List(); 
} 
<li class=""> 
<a href="javascript:;"> 
    <span class="title">Tags</span> 
    <span class=" arrow"></span> 
</a> 
<span class="icon-thumbnail"><i class="pg-indent"></i></span> 
<ul class="sub-menu"> 
    @foreach (MVCbootstrap.Models.TagModel I in Tag_List) 
    { 
      <li class=""> 
       <a href="#">@I.Tag_name</a>      
      </li> 
    } 
</ul> 
</li> 

Jetzt Performance-weise, ich denke, das ist nicht richtig, wenn es 1000 TAGS dann wird der Code 1000 TAG PUNKTE jedes Mal eine Seite erzeugen ist aktualisiert oder besucht, da sich diese Tags im Navigationsmenü befinden. So , was ich will, ist diese Tags nur dann zu erzeugen, wenn jemand auf „TAGS“ HREF wie unten

<a href="javascript:;"> 
    <span class="title">Tags</span> 
    <span class=" arrow"></span> 
</a> 

Um die Leistung I TAGS generieren möchten nur zu verbessern, wenn TAGS oder Stichworte Dropdown Arrow ist

geklickt

Die Web-Benutzeroberfläche sieht wie folgt aus mit Daten Dummy Schlagwörter

public class TagListGenerator 
{ 
    List<Models.TagModel> Tag_List = new List<Models.TagModel>(); 

    public List<Models.TagModel> Get_Tags_List() 
    { 
     //Send Tags List From LINQ.DB 
     Tag_List.Add(new Models.TagModel() { Tag_id = 1, Tag_name = "Tag 1" }); 
     Tag_List.Add(new Models.TagModel() { Tag_id = 2, Tag_name = "Tag 2" }); 
     Tag_List.Add(new Models.TagModel() { Tag_id = 3, Tag_name = "Tag 3" }); 
     Tag_List.Add(new Models.TagModel() { Tag_id = 4, Tag_name = "Tag 4" }); 
     Tag_List.Add(new Models.TagModel() { Tag_id = 5, Tag_name = "Tag 5" });    
     return Tag_List; 
    } 
} 

Web UI für Schlagwörter Liste Klo ks wie folgt: Wo auf TAGS klicken derzeit Blendet die Liste

Wo das Tag-Modell sehr einfach ist, wie folgend

public class TagModel 
{ 
    public Int64 Tag_id { get; set; } 
    public string Tag_name { get; set; } 
} 

Prost

BESCHLOSSEN:

Also habe ich in meinem HOME-Controller eine Aktion namens GetTags erstellt, die zurückkehrt ns die Teilansicht

[HttpGet] 
    public ActionResult GetTags() 
    {    
     return PartialView("~/Views/TagNavMenu"); 

    } 

Dann habe ich in meiner Hauptansicht

<li class=""> 
      <a href="javascript:;" id="showtags"> 
       <span class="title">Tags</span> 
       <span class=" arrow"></span> 
      </a> 
      <span class="icon-thumbnail"><i class="pg-indent"></i></span> 
      <ul class="sub-menu" id="divdiv"> 

      </ul> 
     </li> 

dann ich diesen Anruf bin mit einer Teilansicht machen

Arbeiten jetzt

Answer 1

Im Fall, wenn dies jemand anderes

RESOLVED hilft:

So habe ich eine Aktion in meinem HOME Controller getTags genannt, die die Teilansicht kehrt

[HttpGet] 
    public ActionResult GetTags() 
    {    
     return PartialView("~/Views/TagNavMenu"); 

    } 

Dann habe ich das in meiner Hauptansicht

hinzugefügt

<li class=""> 
      <a href="javascript:;" id="showtags"> 
       <span class="title">Tags</span> 
       <span class=" arrow"></span> 
      </a> 
      <span class="icon-thumbnail"><i class="pg-indent"></i></span> 
      <ul class="sub-menu" id="divdiv"> 

      </ul> 
     </li> 

dann verwende ich diesen Aufruf eine Teilansicht jetzt

Arbeiten

Answer 2

Es funktioniert jetzt, wie kann ich das Laden von Text beim Laden anzeigen?

Sie können Ihre Lade-Nachricht kurz vor der Ajax-Anfrage platzieren.Zum Beispiel wie folgt aus:

<script type="text/javascript"> 
    $('#showtags').on('click', function() { 
     $('#divdiv').html('<p>Loading... {or place any other html}</p>'); 
     $.ajax({ 
      type: "GET", 
      url: '/Home/GetTags', 
      success: function (data) { 
      $('#divdiv').html(data); 
      } 
     }); 
    }); 
</script>