Отобразить объект Json в неупорядоченном списке HTML с помощью Razor

Question

Я использую свой контроллер для возврата объекта 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 в другой функции. Если выбрана опция месяца, мне нужно умножить мое значение. 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 поможет мне в долгосрочной перспективе. Я открыт для любых предложений. Спасибо

Answer 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);