Используйте помощники MVC внутри шаблонов jquery.tmpl - PullRequest
Новая
       43

Используйте помощники MVC внутри шаблонов jquery.tmpl

1 голос
/ 09 августа 2011

У меня есть простой шаблон foreach, и внутри каждого элемента я хочу ActionLink, но для этого ActionLink необходимо отправить Id для редактирования элемента.

Элемент, который будет шаблонизирован: 

<div data-bind="template: {
                    name: 'postsTemplate',
                    foreach: posts
                    }">
</div>

Шаблон: 

<script id="postsTemplate" type="text/html">
<h2 data-bind="text: Title"></h2>

<p class="post-info">
    <p class="post-info" data-bind="text UserName"></p>
    <span data-bind="Body"></span>
    <p class="post-footer">
        @Html.ActionLink("Comments", "IndividualPost", "Post", null, null, "comments", new {id = })
    </p>
</p>
</script>

Как я могу отправить фактическое сообщение Id через ActionLink?Я имею в виду, как я могу получить доступ к идентификатору поста без использования привязки данных?(Потому что это помощник).

Ответы [ 2 ]

5 голосов
/ 24 августа 2011

Если бы вы реализовали свое собственное расширение ActionLink в соответствии с: 

public static MvcHtmlString ActionLink(this HtmlHelper htmlHelper, string linkText,
                                       string actionName, string controllerName,
                                       object routeValues,  bool noEncode)
    {
        var urlHelper = new UrlHelper(htmlHelper.ViewContext.RequestContext);
        var url = urlHelper.Action(actionName, controllerName, routeValues);

        if (noEncode) url = Uri.UnescapeDataString(url);

        var tagBuilder = new TagBuilder("a");

        tagBuilder.MergeAttribute("href", url);
        tagBuilder.InnerHtml = linkText;

        return MvcHtmlString.Create(tagBuilder.ToString(TagRenderMode.Normal));
    }

Тогда вы могли бы сделать свой шаблон следующим образом: 

<p class="post-info">
    <p class="post-info" data-bind="text UserName"></p>
    <span data-bind="Body"></span>
    <p class="post-footer">
        @Html.ActionLink("Comments (${CommentCount})", "IndividualPost", "Post", 
                         new {id = "${id}"}, true)
    </p>
</p>

сгенерированный HTML-сервер на сервере будет выглядеть так:: 

<p class="post-info">
    <p class="post-info" data-bind="text UserName"></p>
    <span data-bind="Body"></span>
    <p class="post-footer">
       <a href="/Post/IndividualPost/${id}">Comments (${CommentCount})</a>
    </p>
</p>

, что, на мой взгляд, является идеальным шаблоном.

Причиной расширения ActionLink является тот факт, что обычный Html.ActionLink кодирует ваш URL-адрес в /Post/IndividualPost/%24%7Bid%7D, чтоне работает для шаблона

1 голос
/ 09 августа 2011

вариант 1: - вероятно, ваша публикация viewmodel идет с сервера, она может содержать ссылку. 

{
title:'post title', 
commentsUrl:'/Indivdualpost/comments/123'
}

на сервере 

 return new post { comment='post title', commentsUrl=Url.Action('Comments','Individualposts', new {id=1234}); }

, а затем визуализируйте URL-адрес комментария в шаблоне: 

 <a data-bind="attr: {href:commentsUrl}">comments</a>

вариант 2: скрипт с использованием формы 

<form id="frm" action="@Url.Action("Comments","IndividualPost")>
<input type="hidden" name="id" id="postid"/>
<!-- template stuff -->
</form>

и в шаблоне 

<p class="post-footer">
    <a data-bind="click:function(){ $('#postid').val(${$id}); $('#frm').submit(); }">comments</a>
</p>

(атрибут click довольно уродлив, его следует улучшить с помощью обработчика привязки или функции viewmodel (http://www.knockmeout.net/2011/08/simplifying-and-cleaning-up-views-in.html))

...