Question

这是一个奇怪的问题，但我真的是网络开发的新手，对我来说感觉很奇怪（作为桌面开发者）。

我创建了一个虚拟项目来测试事物：

我想要一个包含备注（<li>项目）的列表，并希望使用Ajax添加更多备注。

我将展示我的jquery（对不起西班牙语/英语混音，只是我扔的脏代码而不考虑名字）：

<script type="text/javascript">
$(function () {

    AddNotes();

    $("#NuevaNotaForm").submit(function (event) {
        event.preventDefault();

        var form = $(this);
        $.ajax({
            url: form.attr("action"),
            data: form.serialize(),
            success: function (data) {
                AddNotes();
            }
        });
    });
});

function UpdateNotes(notes) {
    $(".Nota").each(function (index, element) {
        var fecha = $(element).find(".Nota-fecha");
        var nota = $(element).find(".Nota-Derecha");

        fecha.height(nota.height());

        fecha.css('background-color', ($(notes).get(index)).Fondo);
        nota.css('background-color', ($(notes).get(index)).Fondo);

        fecha.css('color', $(notes).get(index).Texto);
        nota.css('color', ($(notes).get(index)).Texto);
    });
}

function GetNotes() {
    $.ajax({
        url: '@Url.Action("GetNotes")',
        dataType: 'json',
        data: '{}',
        success: function (data) {
            UpdateNotes(data);
        }
    });
}

function AddNotes() {
    $.ajax({
        url: '@Url.Action("RenderNotes")',
        success: function (data) {
            $("#cajaNotas").empty().append(data);
            GetNotes();
        }
    });
}

所以，我有一个partialview（#cajaNotas），我在那里渲染笔记列表：

我开始向渲染部分视图的“RenderNotes”进行查询，所以我清理div并放置部分视图（我这样做是因为当我需要一个新笔记时，我必须“刷新”div并且是第一次，只显示笔记。）

当我渲染笔记时，我创建另一个ajax来获取Json（笔记列表）并使用该列表更新一些CSS。

我觉得很奇怪，因为所有那些ajax调用让我的网络变得如此简陋。这些笔记需要半秒钟才能显示，当我添加一个新笔记时（使用表格（#nuevaNotaForm）），它会更加轻弹（因为刷新）。

所以问题是：网络开发是否很奇怪？我做得好像地狱一样？我认为为这个小例子做3个ajax调用是很奇怪的。

当我看到firebug时，它等到页面加载（我必须等待附加部分视图，对吗？）然后调用以获取局部视图，当它完成时，它等待获取注释，简而言之，比如1秒的通话。

无论如何，有人可以给我一些光吗？（代码不干净，但我需要知道我在做什么呢）

Answer 1

首次加载页面时，首先使用内置帮助程序（如@ Html.Partial）在服务器端渲染局部视图。

Answer 2

答案是Knockoutjs。代码已经简化并且运行良好。

动态更新视图，使用ajax加载模型等

2 个答案: