Вопрос или проблема
Это пример функции, которая принимает ID миниатюры и при клике открывает полное изображение в модальном окне:
$('.imageLandscapeFloatLeft').on('click', function () {
var vIDString = this.getAttribute('id');
if (vIDString.indexOf("image_") >= 0) {
var vID = vIDString.substring(6);
if ($.isNumeric(vID)) {
jQuery.ajax({
url: '@Url.Action("ReturnSoftwareImage", "Business")',
type: 'POST',
data: { ImageID: vID },
success: function (response) {
if (typeof (response) == 'object') {
var vAlt = (response.alt);
var vLink = (response.link);
ModalInformation(vAlt, vLink);
}
else {
ModalError(response);
}
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
ModalError(textStatus + " - " + errorThrown);
}
})
}
}
})
Это работает нормально, но поскольку много страниц используют эту функцию, я хотел упростить код и вынести часть в _Layout
, передавая параметры таким образом…
$('.imageLandscapeFloatLeft').on('click', function () {
var vIDString = this.getAttribute('id');
if (vIDString.indexOf("image_") >= 0) {
OpenImageModal("Business", "ReturnImage", "ReturnWebImage", vIDString, "6");
}
})
function OpenImageModal(ControllerName, ActionResultName, ActionData, IDString, IDLength) {
var vID = IDString.substring(IDLength);
if ($.isNumeric (vID)) {
alert(vID);
jQuery.ajax({
url: '@Url.Action()',
type: 'POST',
data: { ActionData: vID },
success: function (response) {
if (typeof (response) == 'object') {
var vAlt = (response.alt);
var vLink = (response.link);
ModalInformation(vAlt, vLink);
}
else {
ModalError(response);
}
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
ModalError(textStatus + " - " + errorThrown);
}
})
}
}
Я пытаюсь найти способ передать переменные (в данном случае ControllerName
и ActionResultName
) в URL Ajax @Url.Action()
– но пока что оборачивать их в кавычки и другие методы не сработали.
Если кто-то может указать на более простое решение, я был бы рад это услышать. Однако это единственное обходное решение, которое мне удалось придумать. Он принимает переменные и отправляет их на сервер как сессии, а затем возвращает их обратно в @Url.Action
Добавил это в контроллер домашней страницы
<HttpPost()>
Function ReturnSession(SessionController As String, SessionAction As String) As ActionResult
Try
Session("ControllerName") = "Business"
Session("ActionName") = "ReturnWebImage"
Return Json("Set")
Catch ex As Exception
EmailError(ex, 28, PageName)
Return Json("Error")
End Try
End Function
… и изменил jQuery в _Layout на
function OpenImageModal(ControllerName, ActionName, ActionData, IDString, IDLength) {
var vID = IDString.substring(IDLength);
//Отправить в сессию
jQuery.ajax({
url: '@Url.Action("ReturnSession", "Home")',
type: 'POST',
data: { SessionController: ControllerName, SessionAction: ActionName },
success: function (response) {
if (response.indexOf("Error") >= 0) {
ModalError(response);
}
else {
if ($.isNumeric (vID)) {
//Получить URL изображения и Alt
jQuery.ajax({
url: '@Url.Action(Session("ActionName"), Session("ControllerName"))',
type: 'POST',
data: { ImageID: vID },
success: function (response) {
if (typeof (response) == 'object') {
var vAlt = (response.alt);
var vLink = (response.link);
ModalInformation(vAlt, vLink);
}
else {
ModalError(response);
}
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
ModalError(textStatus + " - " + errorThrown);
}
})
}
}
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
ModalError(textStatus + " - " + errorThrown);
}
})
}
Ответ или решение
Проблема, с которой вы столкнулись, связана с необходимостью динамически передавать параметры (имя контроллера и имя действия) в метод @Url.Action
для формирования URL для AJAX-запросов в ASP.NET MVC. К сожалению, @Url.Action
в Blazor или Razor Views обрабатывается на сервере во время рендеринга, в то время как значения переменных JavaScript определяются на стороне клиента во время выполнения.
Решение проблемы
Для решения данной задачи без использования сессий и лишних кругов, следует рассмотреть возможность динамического формирования URL непосредственно в функции OpenImageModal
. Один из наиболее простых способов — создать URL в JavaScript, используя передаваемые значения.
Часть кода
Вместо использования @Url.Action
для формирования URL в JavaScript, вы можете использовать следующую структуру:
function OpenImageModal(ControllerName, ActionName, ActionData, IDString, IDLength) {
var vID = IDString.substring(IDLength);
if ($.isNumeric(vID)) {
// Формируем URL на основе переданных параметров
var url = '/' + ControllerName + '/' + ActionName;
jQuery.ajax({
url: url, // используем сформированный URL
type: 'POST',
data: { ImageID: vID },
success: function (response) {
if (typeof (response) == 'object') {
var vAlt = response.alt;
var vLink = response.link;
ModalInformation(vAlt, vLink);
} else {
ModalError(response);
}
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
ModalError(textStatus + " - " + errorThrown);
}
});
}
}
Пояснение
-
Динамическое создание URL: Вместо использования
@Url.Action
(который используется на сервере), мы непосредственно конструируем URL. Вы просто комбинируете строку с именем контроллера и именем действия. -
Без использования сессий: Это позволяет избавиться от необходимости сохранять значения в сессиях, что может замедлить приложение и сделать его более сложным в поддержке.
-
Универсальность: Этот подход позволяет легко адаптировать код под любое приложение, так как вы можете изменять имена контроллеров и действий, передавая их в функции.
Примечания
- Убедитесь, что передаваемые контроллеры и действия правильно соответствуют маршрутам вашего приложения.
- Возможно, вам потребуется обработать маршруты с параметрами, если ваша структура URL более сложная.
- Также позаботьтесь о корректной передаче значений и обработке данных на стороне контроллера.
Заключение
Использование динамически сформированного URL в JavaScript — это элегантное и эффективное решение для вашей задачи. Это значительно упрощает ваш код, делает его более читаемым и поддерживаемым, избегая при этом дополнительных сложностей с хранением данных в сессиях.