C# 如何使用Jquery Mobile在MVC中动态创建带有计数气泡的链接

非常需要你们的建议，已经浪费了两天了。不知道该怎么办。我需要使用jquerymobile在mvc4的按钮中保持气泡计数。我是用静态的方式做的

代码

它工作得很好，低于输出

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

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

检查这把小提琴

我已经创建了一个临时模型，并根据模型值动态生成了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);

    }

}

@{
字符串测试=”；
对于（int i=0；i为什么不使用局部视图模板？以下是方法-

首先为
DirectedPutaway
内部的
Views/Shared/DisplayTemplate
文件夹创建一个局部视图模板，并将其命名为
DirectedPutaway.cshtml

在此局部视图中，将模型定义为
DirectedPutaway
。将此文件夹放在DisplayTemplate文件夹中，并将其命名为要使用的类名，这一点非常重要

然后添加html和其他模型属性以呈现到文件中，因此最终文件应如下所示-

@模型定向存储

<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")'">
        @Html.DisplayFor(m=>m.ReceivingName)
        <span class="ui-li-count ui-btn-up-c ui-btn-corner-all" style="background-color:white;color:#52616D">
            @Html.DisplayFor(m=>m.NoOfMuf)
        </span>
</a>
</div>



好的，到目前为止，我们已经有了这个模板，因为它是在shared displaytemplate中创建的，并且有正确的名称，所以它非常容易使用。在获得列表后，添加一行来呈现列表，MVC将自动查找模板并呈现它-

@{

    var myPutaway = (List<DirectedPutaway>)ViewBag.DirectePutaway;
}
<div class="ui-grid-c">
    @Html.DisplatFor(m=> myPutaway)
<div>

@{
var myPutaway=（列表）ViewBag.DirectePutaway；
}
@DisplatFor（m=>myPutaway）

这可能是最推荐的MVC方式

最后，如果你想知道显示模板和编辑器模板在ASP.NETMVC中是如何工作的，你可以在这里签出文档，这两个博客展示了如何使用模板


只需添加一个类，如：

   <span class=" GridBubbleCount ui-li-count ui-btn-up-c ui-btn- corner-all" style="background-color:white;color:#52616D">

      .GridBubbleCount {
    background-color: #F7F7F8 !important;
    color: #2C343B !important;
    border-radius: 35%;
    -moz-border-radius: 35%;
    -webkit-border-radius: 35%;
    height: 15%;
    width: auto;
    text-align: center;
    font-family: Arial;
}


.GridBubbleCount{
背景色：#F7F7F8！重要；
颜色：#2C343B！重要；
边界半径：35%；
-moz边界半径：35%；
-webkit边界半径：35%；
身高：15%；
宽度：自动；
文本对齐：居中；
字体系列：Arial；
}

   <span class=" GridBubbleCount ui-li-count ui-btn-up-c ui-btn- corner-all" style="background-color:white;color:#52616D">

      .GridBubbleCount {
    background-color: #F7F7F8 !important;
    color: #2C343B !important;
    border-radius: 35%;
    -moz-border-radius: 35%;
    -webkit-border-radius: 35%;
    height: 15%;
    width: auto;
    text-align: center;
    font-family: Arial;
}