使用 jsrender 标签在 @Url.Action() 中提供路由值

use a jsrender tag to supply routevalue in @Url.Action()

我正在开发一个使用了 jsrender 的 MVC 项目。 这是我第一次使用 jsrender(事实上,我在 javascript 和 C# 方面还很陌生,哈哈),我已经为一个特定问题苦苦挣扎了一整天。

我有以下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);
        });

这会获取下面模板所需的所有数据,但我需要使用其中的一部分数据创建一个 Url.Action()。

<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>

我需要从 @Url.Action("DisplayPDF","Place", new { docId = "{{:docId}}" }) 的 routeValues 中的数据提供 docId。 显然这在当前状态下不起作用。

我查看了 jsrender 文档和其他关于 jsrender 和 MVC 的问答,但我无法理解它的工作方式。

我想到的一件事是在 javascript 中创建 @Url.Action() 并使用标签将其弹出到模板中,但是我一直想不出来了解如何从 $.post 添加数据,以便为其提供标签。

编辑: 上一段的意思是,javascript/getDocs post 返回的数据是这样的:

  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
 }

这就是接下来填写模板的设置。我希望有一种方法可以将 @Url.Action() 语句添加到那些 key/value 对中,例如:

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

(不确定那里的语法是否正确)所以我可以将 {{:viewdoc}} 放入模板中。

至少我是在正确的轨道上吗?哈哈

试试这个,

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

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

好吧,在将其搁置一周后,经过大量实验和谷歌搜索,我找到了解决方案。

我在控制器中创建了 link,其中设置了 JSON 数据。 我不得不请求 URL 的最左边部分并对 url 的 controller/action 部分进行硬编码,否则它会在当前页面的末尾塞满新的 url url。 所以解决方法如下:

控制器:

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

(在视图中) Javascript正在获取数据:

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

(在视图中) 以及模板本身:

@* 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>