根据请求生成数据 (ASP.NET MVC - HTML)

Question

全部，

我正在尝试在菜单中动态生成用户标签

我做了以下

1. 为 TAGS 项目创建了一个“局部视图”并将其放置在主菜单（导航栏）内

2. 使用标签模型动态生成标签列表

我的部分视图有以下代码

@{ 
MVCbootstrap.Views.Tag.TagListGenerator tagList = new MVCbootstrap.Views.Tag.TagListGenerator();
List<MVCbootstrap.Models.TagModel> Tag_List = tagList.Get_Tags_List();
}
<li class="">
<a href="javascript:;">
    <span class="title">Tags</span>
    <span class=" arrow"></span>
</a>
<span class="icon-thumbnail"><i class="pg-indent"></i></span>
<ul class="sub-menu"> 
    @foreach (MVCbootstrap.Models.TagModel I in Tag_List)
    {
            <li class="">
                <a href="#">@I.Tag_name</a>                    
            </li>
    }
</ul>
</li>

现在性能方面，如果有 1000 个，我认为这是不正确的 TAGS 然后代码将生成 1000 TAG ITEMS 每次页面 刷新或访问，因为这些标签在导航菜单中。所以 我想要的是仅在有人点击时生成这些标签 "TAGS" HREF 如下

<a href="javascript:;">
    <span class="title">Tags</span>
    <span class=" arrow"></span>
</a>

为了提高性能，我只想在点击TAGS或标签下拉箭头时生成标签

带有虚拟标签数据的 Web UI 看起来像这样

public class TagListGenerator
{
    List<Models.TagModel> Tag_List = new List<Models.TagModel>(); 

    public List<Models.TagModel> Get_Tags_List()
    {
        //Send Tags List From LINQ.DB
        Tag_List.Add(new Models.TagModel() { Tag_id = 1, Tag_name = "Tag 1" });
        Tag_List.Add(new Models.TagModel() { Tag_id = 2, Tag_name = "Tag 2" });
        Tag_List.Add(new Models.TagModel() { Tag_id = 3, Tag_name = "Tag 3" });
        Tag_List.Add(new Models.TagModel() { Tag_id = 4, Tag_name = "Tag 4" });
        Tag_List.Add(new Models.TagModel() { Tag_id = 5, Tag_name = "Tag 5" });            
        return Tag_List;
    }
}

标签列表的 Web UI 如下所示，当前单击 TAGS 会切换列表

这里的标签模型很简单，如下

 public class TagModel
{
    public Int64 Tag_id { get; set; }
    public string Tag_name { get; set; }
}

干杯

已解决：

所以我在我的 HOME 控制器中创建了一个名为 GetTags 的操作，它返回部分视图

[HttpGet]
    public ActionResult GetTags()
    {            
        return PartialView("~/Views/TagNavMenu");

    }

然后我在我的主视图中添加了这个

 <li class="">
            <a href="javascript:;" id="showtags">
                <span class="title">Tags</span>
                <span class=" arrow"></span>
            </a>
            <span class="icon-thumbnail"><i class="pg-indent"></i></span>
            <ul class="sub-menu" id="divdiv">  

            </ul>
        </li>

然后我使用这个调用来渲染局部视图

    <script src="~/Scripts/jquery-1.10.2.min.js"></script>  
<script type="text/javascript">
    $('#showtags').on('click', function () {
        $.ajax({
            type: "GET",
            url: '/Home/GetTags',
            success: function (data) {
            $('#divdiv').html(data);
            }
        });
    });
</script>

现在工作

Answer 1

它现在可以工作了，我如何在加载时显示正在加载的文本？

您可以在 ajax 请求之前放置加载消息。比如这样：

 <script type="text/javascript">
    $('#showtags').on('click', function () {
        $('#divdiv').html('<p>Loading... {or place any other html}</p>');
        $.ajax({
            type: "GET",
            url: '/Home/GetTags',
            success: function (data) {
            $('#divdiv').html(data);
            }
        });
    });
</script>

Answer 2

如果这对其他人有帮助

已解决：

所以我在我的 HOME 控制器中创建了一个名为 GetTags 的操作，它返回部分视图

[HttpGet]
    public ActionResult GetTags()
    {            
        return PartialView("~/Views/TagNavMenu");

    }

然后我在我的主视图中添加了这个

 <li class="">
            <a href="javascript:;" id="showtags">
                <span class="title">Tags</span>
                <span class=" arrow"></span>
            </a>
            <span class="icon-thumbnail"><i class="pg-indent"></i></span>
            <ul class="sub-menu" id="divdiv">  

            </ul>
        </li>

然后我使用这个调用来渲染局部视图

    <script src="~/Scripts/jquery-1.10.2.min.js"></script>  
<script type="text/javascript">
    $('#showtags').on('click', function () {
        $.ajax({
            type: "GET",
            url: '/Home/GetTags',
            success: function (data) {
            $('#divdiv').html(data);
            }
        });
    });
</script>

现在工作