Как решить, когда использовать Ajax против Javascript для ремонтопригодности

Question

Во время разработки ASP.Net я часто не уверен в погоде, я должен выполнять некоторые функции, используя запрос ajax, и обрабатывать все это на клиенте с помощью JavaScript. Я часто хочу использовать функции Jjery 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); 
}); 
} 

Вот действий, которые могли бы обработать запрос Аякса

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

Я разрываюсь на который будет лучше ремонтопригодность мудрым, как и Аякса, как я не должны писать HTML на страницах JavaScript, и я думаю, что это будет более понятным и понятным при обновлении кода. Однако я использую ненужный запрос на сервер, когда я могу обработать все на клиенте.

Так что мои вопросы в том, должен ли я всегда делать все на клиенте, если это возможно, даже в результате ремонтопригодности. Любая обратная связь на моем примере также очень ценится.

Answer 1

Я рекомендую использовать AJAX для операций, которые требуют некоторых фоновых вычислений на сервере или для получения некоторых данных БД с сервера. Для генерации графического интерфейса я бы использовал JS, поскольку он довольно быстр, благодаря V8.

Если вам нужно создать графический интерфейс, введя в него некоторые данные сервера, и эта страница имеет сложный макет, я бы использовал механизм шаблонов на стороне сервера.

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

Вывод: Если событие/действие влияет только на то, что пользователь может видеть на пользовательском интерфейсе (т.е. управления видимостью и инициирования анимации), то вы, вероятно, хотите использовать только JS/JQuery. Если есть что-то большее, например, обработка сервера или выборка данных из БД, тогда подумайте об использовании Ajax.

В вашем примере казалось, что выбор был между динамическим добавлением элементов на страницу с помощью JS или выполнением метода контроллера через Ajax, чтобы получить элементы в виде частичного представления. Надеюсь, этот ответ станет хорошим решением для вас.