2017-07-11 26 views
0

Ich habe versucht, eine Antwort auf Google ohne Ergebnis zu finden. Meine Frage ist, wie kann ich meine Json-Daten (List<string>) aus meiner Sicht manipulieren? Ich würde gerne die ganze Zeichenfolge zeigen, die zum Beispiel in einem Div zurückgegeben wird.Liste <string> mit Json asp.net mvc

Hier, wo ich derzeit bin stecken:

CONTROLLER

[HttpPost] 
    public async Task<ActionResult> RetournerOP(int OF) 
    { 
     List<string> ops = new List<string>(); 
     Task verif = Task.Run(() => 
     { 
      try 
      { 
       connection.Open(); 
       string sqlQuery = "SELECT Operation from ZZ where ordre = " + OF; 
       SqlCommand command = new SqlCommand(sqlQuery, connection); 
       using (SqlDataReader reader = command.ExecuteReader()) 
       { 
        while (reader.Read()) 
        { 
         ops.Add(Convert.ToString(reader["Operation"])); 
        } 
       } 
      } 
      catch (Exception) { } 
      finally { connection.Close(); } 
     }); 
     await verif; 
     return Json(ops); 
    } 

VIEW

function retournerOp() { 
    $.ajax({ 
     url: '@Url.Action("RetournerOp", "Home", new { area = "Ajout" })', 
     data: {OF: document.getElementById("NumOf").value}, 
     type: 'POST', 
     dataType: 'JSON', 
     cache: false, 
     success: function (data) { 
      //How can I manipulate my data returned? 
     } 
    }); 
} 
+2

Haben Sie versucht, "Daten" zu durchlaufen und zu verwenden? '$ .each (data, function (a, b) {// mach etwas});' – Shyju

+1

hast du zwei Möglichkeiten: Entweder gib eine vorher ausgefüllte Ansicht an deine Ajax-Antwort zurück und spritze sie in deinen HTML ODER benutze irgendeine Art von Datenbindungsbibliothek zum Patchen Ihrer JSON-Sammlung mit einer HTML-Vorlage auf der Client-Seite. –

+0

Können Sie Ihre HTML-Vorlage zeigen? –

Antwort

1

Ihr Server Aktionsmethode zur Zeit ein Array von Strings zurückkehrt. Also können Sie in Ihrem Ajax-Calls-Erfolgsrückruf sie durchlaufen und jedes Element nach Bedarf verwenden (z. B. Hinzufügen zu Ihrem DOM). $.each Methode wird praktisch sein, um zu loopen.

Zum Beispiel die folgenden Code-Schleifen durch das Array und wickeln jedes Element in einem p-Tag und fügen Sie die Liste von p-Tags zu einem div mit id myDivId

success: function (data) { 
    var t = "<div>"; 
    $.each(data,function(a, b) { 
       t += '<p>'+b+'</p>'; 
     }); 
    $("#myDivId").html(t); 
} 

Wenn Sie eine komplexere rendern wollen HTML-Markup, würde ich stark raten, eine Aktionsmethode zu erstellen (wenn Sie das vorhandene nicht aktualisieren können, weil anderer Code es bereits verwendet), die ein Teilansichtsergebnis anstelle des JSON zurückgibt. So übergeben Sie die Liste der Zeichenfolgen an die Partienansicht, und die Teilansicht enthält den Code zum Rendern des ausgefeilten Markups, das Sie zurückgeben möchten.

return PartialView(ops); 

und in der Teilansicht,

@model List<string> 
@foreach (var item in Model) 
{ 
    <p>@item</p> 
} 

Jetzt, da die Antwort vom Server Anruf kommt, ist die HTML-Markup Sie wollen, aktualisieren Sie einfach den DOM mit, dass je nach Bedarf.

$.ajax({ 
    url: '@Url.Action("RetournerOp", "Home", new { area = "Ajout" })', 
    data: {OF:6}, 
    type: 'POST', 
    success: function (data) { 
     $("#myDivId").html(data); 
    } 
}); 

Wie auch in den Kommentaren erwähnt anderen, Ihr Server-Code ist eine SQL-Injection anfällig. Sie sollten die Benutzereingabe niemals direkt mit einer solchen SQL-Anweisung verketten. Erwägen Sie die Verwendung parametrisierter Abfragen.

+0

Es könnte sich lohnen, Ihre Antwort so zu bearbeiten, dass eine Korrektur für die eklatante SQL-Injection-Schwachstelle des OP erfolgt. – maccettura

+0

Danke für die ausführliche Antwort, hat mir wirklich geholfen! Ich werde auch auf parametrisierte Abfragen lesen. –