c# - 如何使用 Jquery Mobile 在 MVC 中动态创建带有 Count Bubbles 的链接

Question

非常需要你们的建议，已经在这上面浪费了两天了。不知道该怎么办。我需要使用 jquerymobile 来保持 mvc4 中按钮中的气泡计数。我是在静态中完成的，例如

代码。

<div class="ui-grid-c">
    <div class="ui-block-a">
        <a class="ui-li-has-count" data-role="button"  data-ajax="false" data-mini="true" style="background-color:#52616D;color:white" onclick="location.href='@Url.Action("Index", "DirectPutawayDetails")'">
           DK-01
           <span class="ui-li-count ui-btn-up-c ui-btn-corner-all" style="background-color:white;color:#52616D">
               3
           </span>
        </a>
    </div>
    <div class="ui-block-b">
        <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>
   </div>
   <div class="ui-block-c">
       <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-03
           <span class="ui-li-count ui-btn-up-c ui-btn-corner-all" style="background-color:white;color:#52616D">12</span>
       </a>
  </div>
  <div class="ui-block-d">
      <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-04
          <span class="ui-li-count ui-btn-up-c ui-btn-corner-all" style="background-color:white;color:#52616D">
              145
          </span>
     </a>
</div>

效果很好，并且输出低于。

现在我需要动态生成所有按钮并带来类似的外观和感觉。我使用列表并将所有值带到我的 View 中，如下图所示。

但不知道如何将列表中的值转换为带有气泡计数的动态按钮。指导我。

Answer 1

https://dotnetfiddle.net/d0KH3g检查这个 fiddle

我创建了一个临时模型并根据模型值动态生成 DIV，尝试将其应用到您的模型中

@{
            string test ="";


            for(int i=0;i<@Model.countBubbleDataList.Count;i++)
            {
            string divTest="";

                divTest+="<div class='ui-block-a' style='width:25%'><a class='ui-li-has-count' data-role='button'  data-ajax='false' data-mini='true'";
                divTest+=" style='background-color:#52616D;color:white' onclick='location.href='@Url.Action('Index', 'DirectPutawayDetails')'>";
                divTest += Model.countBubbleDataList[i].Name+"<span class='ui-li-count ui-btn-up-c ui-btn-corner-all' style='background-color:white;color:#52616D'>3</span></a> </div></div>";

                    @Html.Raw(divTest);

    }

}