Verwenden Sie ein jsrender-Tag, um routevalue in @ Url.Action()

Question

zu liefern Ich arbeite an einem MVC-Projekt, in dem jsrender verwendet wird. Dies ist mein erstes Mal mit jsrender arbeiten (in der Tat bin ich ziemlich neu bei Javascript und C# zu lol) und ich habe jetzt mit einem bestimmten Problem für einen ganzen Tag gekämpft.

Ich habe folgende Javascript

$.post('@Url.Action("GetDocs","Place", new { placeID = Model.PlaceId})').done(
     function (data) { 
      var template = $.templates("#doc-tmpl"); 
      var htmlOut = template.render(data.documents); 
      $("#documentListContainer").append(htmlOut); 
      $(".docCount").html(data.count); 
     }); 

Dies wird alle Daten, die ich weiter unten für die Vorlage benötigen, aber ich brauche eine Url.Action() mit einem Stück der Daten zu erstellen.

<script id="doc-tmpl" type="text/x-jsrender"> 
<div class="col-md-4"> 
     <h5>{{:Name}}{{:test}}</h5> 
     <p id="DocId" class="hidden"><br />{{:DocId}}</p> 
     <img src="data:image;base64,{{:FrontCoverImg}}" width="140" height="230" /> 
    <a href="@Url.Action("DisplayPDF","Place", new { DocId = "{{:DocId}}" })">Link</a> 
</div> 

Ich brauche die docId aus den Daten in der Routevalues ​​der @Url.Action("DisplayPDF","Place", new { docId = "{{:docId}}" }) zu liefern. Offensichtlich funktioniert das nicht im aktuellen Zustand.

Ich habe die jsrender Dokumentation und andere Q & A mit Jsrender und MVC zu tun, aber ich habe Probleme, meinen Kopf um den Weg, wie es funktioniert.

Eine Sache, an die ich gedacht habe, ist die @ Url.Action() innerhalb des Javascript zu erstellen und ein Tag zu verwenden, um es in der Vorlage zu öffnen, aber ich konnte nicht herausfinden, wie man den Daten hinzufügt aus der $ .post, um ein Tag dafür zur Verfügung zu stellen.

Edit: Was ich meine, aus dem obigen Absatz ist, zurückgegeben die Daten durch die Javascript/getDocs Beitrag ist so etwas wie:

documents": [ 
    { 
     "DocId": "86f86a32-5005-456c-8dd1-c023a66dd794", 
     "Name": "How to...", 
     "FrontCoverImg": "Base64String(docImg)" 
    }, 

    { 
     "DocId": "d29f8afc-3191-47f1-9b88-1de08582ba27", 
     "Name": "A Document", 
     "FrontCoverImg": "Base64String(docImg)" 
    } 
], 
"count": ​2 
} 

, die dann in der Vorlage zu füllen ist eingerichtet. Ich hoffe, dass es eine Möglichkeit ist das @ Url.Action() Erklärung zu diesen Schlüssel/Wert-Paare, so etwas wie hinzufügen:

"viewdoc" : '@@Url.Action("DisplayPDF", "Place", new {DocId = ' + DocId + ', @@class = "btn btn-default" })'; 

(nicht sicher, ob die Syntax ist ziemlich genau dort), so konnte ich dann Setzen Sie {{:viewdoc}} in die Vorlage.

Bin ich wenigstens auf dem richtigen Weg? lol

Answer 1

Ok so, nachdem es allein für eine Woche dann viel Experimentieren verlassen und googeln, ich meine Lösung gefunden.

Ich habe den Link im Controller erstellt, wo die JSON-Daten festgelegt sind. Ich musste den äußersten linken Teil der URL anfordern und den Controller/Aktionsteil der URL fest codieren, sonst wurde die neue URL am Ende der aktuellen Seiten-URL vollgestopft. So ist die Lösung wie folgt:

Der Controller:

foreach (Doc document in docs) 
      { 
       DocJson dj = new DocJson(); 
       dj.DocId = document.DocId; 
       dj.Name = document.Comments; 
       //get base Url 
       var request = HttpContext.Request.Url.GetLeftPart(UriPartial.Authority); 
       dj.docLink = request + "/Place/DisplayPDF?DocId=" + document.DocId; 
       //get image bytes 
       var docImg = document.FrontCoverImg; 
       dj.FrontCoverImg = Convert.ToBase64String(docImg); 

       documents.Add(dj); 
      } 
return Json(new { documents = documents, count = documents.Count() }, JsonRequestBehavior.AllowGet); 

(in der Ansicht) Die Javascript bekommen die Daten:

//getDocs 
    $.post('@Url.Action("GetDocs","Place", new { placeID = Model.PlaceId})').done(
     function (data) { 
      console.log(data); 
      var template = $.templates("#doc-tmpl"); 
      var htmlOut = template.render(data.documents); 
      $("#documentListContainer").append(htmlOut); 
      $(".docCount").html(data.count); 
     }); 

(in der Ansicht) Und die Vorlage selbst:

@* Document jsrender template *@ 
<script id="doc-tmpl" type="text/x-jsrender"> 
<div class="col-md-4"> 
    <a href="{{:docLink}}" target="_blank"> 
     <h5>{{:Name}}</h5> 
     <p id="DocId" class="hidden"><br />{{:DocId}}</p> 
     <img src="data:image;base64,{{:FrontCoverImg}}" width="140" height="230" /> 
    </a> 
</div> 
</script> 

Answer 2

dies versuchen,

var id = $('#docId').val(); 
var link = '@URL.Action("download file", "download", new { id = "-1" })'; 
link = link.replace("-1", id); 

Quelle: How to access javascript variable within @URL.Action()