如何决定何时使用 Ajax 和 Javascript 来实现可维护性答案

【问题标题】：How to decide when to use Ajax vs Javascript for maintainability如何决定何时使用 Ajax 和 Javascript 来实现可维护性
【发布时间】：2014-08-28 10:14:54
【问题描述】：

在 ASP.Net 开发期间，我经常不确定是否应该使用 ajax 请求执行某些功能，而不是使用 JavaScript 在客户端上处理所有功能。我经常想使用 Jquery ajax 函数来加快开发速度并提高可维护性，即使我可以在不联系服务器的情况下获得相同的结果。

这是一个例子。在我的 MVC 视图中，我需要更新部分视图以响应按钮单击。这是我的局部视图的简化版本

  @foreach (Requestbox.Code.XmlContentField xmlControl in Model.RequestContentControls)
    {
        if (Model.IsInEditMode)
        {
          ViewContext.Writer.Write("<div class='editDiv'>
          <a href='#' onclick='EditClick()'>Edit</a>
          <a href='#' onclick='DeleteClick()'>Delete</a>");             
        }

        switch (xmlControl.ControlType)
        {            
            case "TextBoxField":
              <div class="clearfix">
                  @Html.DevExpress().Label(settings => { 
                 settings.Name = xmlControl.FieldName + "Label";
                 settings.AssociatedControlName = xmlControl.FieldName + "TextBox";
                 settings.Text = xmlControl.LabelText;

             }).GetHtml()
                  <div class="input">
                      @Html.DevExpress().TextBox(settings => {
                     settings.Name = xmlControl.FieldName + "TextBox";
                     MvcExtensionHelpers.SetTextBoxSettings(settings);
                     settings.ControlStyle.CssClass += " full-width";
                 }).GetHtml()
                  </div>
              </div>

                break;
            case "Header":
                string header = string.Format("<{0}>{1}</{0}>",                                     xmlControl.HeaderType,xmlControl.Value);
                @Html.Raw(header)
                break;
        }

        if (Model.IsInEditMode)
        {
            ViewContext.Writer.Write("</div>");
        }
      }

单击编辑按钮时，我需要将每个部分包装在一个 div 中，并在其中添加 2 个带有 onclick 功能的锚元素。我可以通过使用 ajax 发布请求并将模型设置为“IsInEditMode 为 true”来做到这一点，这是我可以调用的代码，它将当前的局部视图替换为新的。

function EnableEditClick() {
$.post(rootDir + "Admin/EditClick",null,
function(partialViewResult){ 
  $("#refTable").html(partialViewResult);
 });
}

这是可以处理 ajax 请求的 Action

public ActionResult EditClick()
{
MyModel model = new MyModel();
model.IsInEditMode = true;

return PartialView("CustomRequest", model);
}

这是一种解决方案，另一种是通过使用 jquery 选择我需要的每个元素并直接插入锚元素来在客户端处理这一切。我还可以从视图中删除一些代码。所以像这样的东西（尚未测试此代码，但我希望你明白）

function EditClick()
   {
      var elements = $('.myTable .clearfix')
      elemtns.append(' <a href='#' onclick='EditClick()'>Edit</a>
          <a href='#' onclick='DeleteClick()'>Delete</a>');
}

我很纠结哪个更好的可维护性，就像我不必在 JavaScript 页面中编写 html 的 ajax 方式一样，我认为在修改代码时它会更清晰、更易读。但是，当我可以处理客户端上的所有请求时，我会向服务器使用不必要的请求。

所以我的问题是，如果可能的话，我是否应该始终在客户端上做所有事情，即使是为了可维护性。对我的示例的任何反馈也非常感谢。

【问题讨论】：

标签： c# javascript asp.net-mvc partial-views maintainability

【解决方案1】：

我建议您使用 AJAX 进行操作，这些操作需要在服务器上进行一些后台计算或从服务器检索一些数据库数据。对于 GUI 生成，我会使用 JS，因为它非常快，这要归功于 V8。

如果你需要通过嵌入一些服务器数据来生成GUI，并且这个页面有复杂的布局，我会使用服务器端模板引擎。

【讨论】：

【解决方案2】：

在您给出的示例中，我建议使用 JS 方法来控制编辑和删除按钮的可用性。或者可能是两者的结合。

当您进行 Ajax 调用时，它会创建一个导致一些 HTTP 流量的后台请求。除非服务器上需要一些处理来满足请求，否则将请求发送到服务器并没有多大用处。

通过查看您的代码，您想要执行的操作是向页面添加两个锚点。这可以通过 JS 轻松完成。您甚至可以通过在您的页面上包含一个包含您希望包含的元素的部分视图来组合这两者，并使用一些标记来隐藏它们。

您可以使用按钮标记创建局部视图。

<a href='#' onclick='EditClick()'>Edit</a>
<a href='#' onclick='DeleteClick()'>Delete</a>

然后包含在你的视图中。

<div id="buttons" style="display: none;">
    @Html.Partial("_ButtonView")
</div>

你的 JS 会变成。

function EditClick()
{
    $("#buttons").toggle("display");
}

查看JSFiddle 了解我的意思的示例。

在这个问题的上下文中，我会考虑对实际编辑操作使用 Ajax 请求，该操作会返回带有操作输出的 Json 结果。这最终会得到类似的结果。

$.ajax({ // ajax call starts
    url: "YourArea/YourController/EditClick",
    data: {"your data"},
    dataType: 'json',
    success: function(data) {
        //handle json response
      }
  });

此 Ajax 请求将调用控制器代码。

public JsonResult EditClick()
{
    var myResult = Helper.Edit();

    return Json(new { result = myResult });
}

结论：如果事件/动作只影响用户在 UI 上可以看到的内容（即控制可见性和启动动画），那么您可能只想使用 JS/jQuery。如果有更多的事情发生，比如服务器处理或从 DB 获取数据，那么请考虑使用 Ajax。

在您的示例中，似乎是在使用 JS 将元素动态添加到页面或通过 Ajax 执行控制器方法以将元素作为局部视图获取之间做出选择。我希望这个答案能为您提供一个很好的解决方案。

【讨论】：