使用 Razor 在 HTML 无序列表中显示 Json 对象答案

【问题标题】：Display Json object in HTML unordered list using Razor使用 Razor 在 HTML 无序列表中显示 Json 对象
【发布时间】：2019-08-19 11:54:03
【问题描述】：

我正在使用我的控制器将 Json 对象返回到我的视图中的脚本。然后我使用 jquery 来构建我的 HTML 元素，该元素由一个复选框和来自 Json 对象的一些值组成。我觉得 Razor 会比我现在显示这些元素的方式更有效率。当我创建基于复选框输入的函数时，它也会让我更轻松。

我希望有人能指出正确的方向，即如何为无序列表中包含的复选框和标签创建剃刀元素。

我的控制器：

[Authorize]
    public JsonResult GetSnackTypes()
    {
        List<SnackVM> snacks = new List<SnackVM>();
        ViewModel vm = new ViewModel();
        vm.Snacks = GetSnackTypes().Select(a => new SnackVM
        {
            Id = a.Id,
            Name = a.Name,
            ExtraID = a.ExtraID,
            BaseCost = a.BaseCost
        }).ToList();
        snacks = vm.Snacks;
        return Json(snacks);
    }

脚本：

GetSnackTypes = function () {
        var snackResults = [];
        $.ajax({
            url: "@Url.Action("GetSnackTypes", "Wizard")",
            cache: false,
            async: false,
            type: "POST",
        }).done(function (result) {
            snackResults = result;
        });

        return snackResults
    }

然后我调用这个函数并在另一个函数中构建我的 HTML 元素。如果选择了月份选项，我需要将我的 value.BaseCost 乘以 4：

        var snackResults = [];
        snackResults = GetSnackTypes();

        var html = '<ul>';
        $.each(snackResults, function (key, value) {
            if (foodPlan == "MONTH")
                html += '<li><input type="checkbox" id=' + value.Id + '><label>' + value.Name + ' $' + value.BaseCost * 4 + ".00" + '</label></li>';
            else
                html += '<li><input type="checkbox" id=' + value.Id + '><label>' + value.Name + ' $' + value.BaseCost + ".00" + '</label></li>';
        });
        html += '<li><input type="checkbox"><label>' + 'I do not want snacks! ' + '</label></li>';
        html += '</ul>';

        var snackSection = $('#snackSection');

        snackSection.html(html);

HTML：

<div id="snackSection">

</div>

目前显示正确，但我认为从长远来看，使用 Razor 会对我有所帮助。我愿意接受任何建议。谢谢

【问题讨论】：

这个问题是关于 ASP.NET MVC 的 Razor 视图引擎吗？
是的。我在想 Razor 会为我的问题提供更有效和更整洁的解决方案。在 Javascript 中构建 HTML 元素是可行的，但我觉得这不是最好的解决方案。

标签： jquery json razor model-view-controller

【解决方案1】：

您的 GetSnackTypes 方法可能会返回包含所有 html 而不是 Json 的部分视图。

部分视图_Snacks.cshtml：

@model IEnumerable<SnackVM>

<ul>
    @foreach (var snack in Model)
    {
        <li>
            <input type="checkbox" id=' + value.Id + '><label>@string.Format("{0} ${1:n2}", snack.Name, snack.BaseCost * (ViewBag.FoodPlan == "MONTH" ? 4 : 1))</label>
        </li>
    }
    <li><input type="checkbox"><label>I do not want snacks!</label></li>
</ul>

控制器动作：

[Authorize]
    public ActionResult GetSnackTypes(string foodPlan)
    {
        var snacks = GetSnackTypes().Select(a => new SnackVM
        {
            Id = a.Id,
            Name = a.Name,
            ExtraID = a.ExtraID,
            BaseCost = a.BaseCost
        }).ToList();
        ViewBag.FoodPlan = foodPlan;
        return PartialView("_Snacks", snacks);
    }

Javascript 1：

GetSnackTypes = function () {
        var snackResults = [];
        $.ajax({
            url: "@Url.Action("GetSnackTypes", "Wizard")",
            data: { foodPlan: "MONTH" },
            cache: false,
            async: false,
            type: "POST"
        }).done(function (result) {
            snackResults = result;
        });

        return snackResults
    }

Javascript 2：

var snackResults = [];
snackResults = GetSnackTypes();
var html = $(snackResults);
var snackSection = $('#snackSection');
snackSection.html(html);

【讨论】：