Question

我正在使用Controller将Json对象返回到View中的脚本。然后，我使用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);

使用Razor

1 个答案: