如何使用 jquery mobile 在 mvc 中使用 @Html.ActionLink 创建计数气泡答案

【问题标题】：How to Create count bubble with @Html.ActionLink in mvc with jquery mobile如何使用 jquery mobile 在 mvc 中使用 @Html.ActionLink 创建计数气泡
【发布时间】：2014-05-30 11:28:45
【问题描述】：

我使用 jquery mobile 在 mvc4 中的按钮中创建了计数气泡。下面的代码

<a href="url.html" class="ui-li-has-count" data-role="button"  data-ajax="false" data-mini="true" style="background-color:#52616D;color:white">
 DK-02<span class="ui-li-count ui-btn-up-c ui-btn-corner-all" style="background-color:white;color:#52616D">11</span></a>

给

现在如何使用@Html.ActionLink razor 语法创建类似外观的按钮？

 @Html.ActionLink("DK-02","test","home")

更新

在你们的帮助下，我解决了 80% 的问题。我所做的是

<div class="ui-grid-c">
    @for (int j = 1; j < myPutaway.Count + 1; j++)
    {
        if **(j == 1)**
        {
        <div class="ui-block-a">
            <a href="@Url.Action("test", "DirectPutaway")" class="ui-li-has-count" data-role="button"  data-ajax="false" data-mini="true" style="background-color:#52616D;color:white">
                @myPutaway[j].ReceivingLane.ToString() <span class="ui-li-count ui-btn-up-c ui-btn-corner-all" style="background-color: white; color: #52616D">@myPutaway[j].NoOfMuf.ToString() </span></a>
        </div>
        }
        else if **(j == 2)**
        {
        <div class="ui-block-b">
            <a href="@Url.Action("test", "DirectPutaway")" class="ui-li-has-count" data-role="button"  data-ajax="false" data-mini="true" style="background-color:#52616D;color:white">
                @myPutaway[j].ReceivingLane.ToString() <span class="ui-li-count ui-btn-up-c ui-btn-corner-all" style="background-color: white; color: #52616D">@myPutaway[j].NoOfMuf.ToString()</span></a>
        </div>
        }
        else if **(j == 3)**
        {
        <div class="ui-block-c">
            <a href="@Url.Action("test", "DirectPutaway")" class="ui-li-has-count" data-role="button"  data-ajax="false" data-mini="true" style="background-color:#52616D;color:white">
                @myPutaway[j].ReceivingLane.ToString() <span class="ui-li-count ui-btn-up-c ui-btn-corner-all" style="background-color: white; color: #52616D">@myPutaway[j].NoOfMuf.ToString()</span></a>
        </div>
        }
        else if **(j == 4)**
        {
        <div class="ui-block-d">
            <a href="@Url.Action("test", "DirectPutaway")" class="ui-li-has-count" data-role="button"  data-ajax="false" data-mini="true" style="background-color:#52616D;color:white">
                @myPutaway[j].ReceivingLane.ToString() <span class="ui-li-count ui-btn-up-c ui-btn-corner-all" style="background-color: white; color: #52616D">@myPutaway[j].NoOfMuf.ToString()</span></a>
        </div>
        }
    }
</div>

我明白了，但我硬编码 j==1,2,3,4 来设置 css 类,,，这需要显示 4*4 网格。但不是硬拉线我怎么能使它动态。所以我的第一个值将获得 A 类和第二个 B 类。.etc

【问题讨论】：

您的实际问题是什么：设置属性、创建嵌套的<span> 或设置a 元素的URL？
@AndreiV：兄弟，请看我更新的帖子。

标签： c# jquery asp.net-mvc asp.net-mvc-4

【解决方案1】：

您必须使用 @Url.Action 将 url 放入 a 的 href 属性中：

<a href='@Url.Action("test","home")' class="ui-li-has-count" data-role="button"  data-ajax="false" data-mini="true" style="background-color:#52616D;color:white">
DK-02
<span class="ui-li-count ui-btn-up-c ui-btn-corner-all" style="background-color:white;color:#52616D">11</span>
</a>

或者如果你只想使用 Html helper 方法，那么你必须编写自己的自定义 Html Helper。

你可以在这个tutorial看到如何创建

【讨论】：

老兄，非常感谢。你解决了我 80% 的问题。请查看更新后的帖子。我在等你的回复。