Как решить, когда использовать Ajax против Javascript для удобства сопровождения
Во время разработки 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 элемента привязки с функциями on click внутри. Я могу сделать это, используя пост-запрос ajax и установив 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 мне не нужно писать html на страницах JavaScript, и я думаю, что это будет более понятным и более читабельным при пересмотре кода. Однако затем я использую ненужный запрос к серверу, когда я могу обработать все на клиенте.
Поэтому мои вопросы: всегда ли я делаю все на клиенте, если это возможно, даже в результате ремонтопригодности? Любые отзывы о моем примере также приветствуются.
2 ответа
Я рекомендую вам использовать AJAX для операций, которые требуют каких-либо фоновых вычислений на сервере или для получения некоторых данных БД с сервера. Для генерации GUI я бы использовал JS, так как он довольно быстрый, благодаря V8.
Если вам нужно сгенерировать графический интерфейс, встроив в него некоторые данные сервера, и эта страница имеет сложный макет, я бы использовал шаблонизатор на стороне сервера.
В приведенном вами примере я бы порекомендовал подход 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 или выполнением метода Controller через Ajax, чтобы получить элементы как частичное представление. Я надеюсь, что этот ответ предоставит вам хорошее решение.