如何决定何时使用Ajax和Javascript进行维护

How to decide when to use Ajax vs Javascript for maintainability

本文关键字：Ajax Javascript 维护 何时使 何决定 决定      更新时间：2023-09-26

在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>");
        }
      }

当单击Edit按钮时，我需要将我的每个部分包装在一个div中，并在其中添加2个带有onclick函数的锚点元素。我可以通过使用ajax post请求并将Model设置为"IsInEditMode为true"来实现这一点。这是我可以调用的代码，它用新视图替换了当前的部分视图。

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

以下是可以处理ajax请求的操作

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>');
}

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

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

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

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

在您给出的示例中，我建议使用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。如果需要服务器处理或从数据库中获取数据，那么可以考虑使用Ajax。

在您的示例中，似乎可以选择是使用JS将元素动态添加到页面中，还是通过Ajax执行Controller方法将元素作为部分视图。我希望这个答案能为你提供一个好的解决方案。

相关文章：