Передача переменной jQuery в @Url.Action в ASP.NET MVC

Вопрос или проблема

Это пример функции, которая принимает 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);
            }
        });
    }
}

Пояснение

  1. Динамическое создание URL: Вместо использования @Url.Action (который используется на сервере), мы непосредственно конструируем URL. Вы просто комбинируете строку с именем контроллера и именем действия.

  2. Без использования сессий: Это позволяет избавиться от необходимости сохранять значения в сессиях, что может замедлить приложение и сделать его более сложным в поддержке.

  3. Универсальность: Этот подход позволяет легко адаптировать код под любое приложение, так как вы можете изменять имена контроллеров и действий, передавая их в функции.

Примечания

  • Убедитесь, что передаваемые контроллеры и действия правильно соответствуют маршрутам вашего приложения.
  • Возможно, вам потребуется обработать маршруты с параметрами, если ваша структура URL более сложная.
  • Также позаботьтесь о корректной передаче значений и обработке данных на стороне контроллера.

Заключение

Использование динамически сформированного URL в JavaScript — это элегантное и эффективное решение для вашей задачи. Это значительно упрощает ваш код, делает его более читаемым и поддерживаемым, избегая при этом дополнительных сложностей с хранением данных в сессиях.

Оцените материал
Добавить комментарий

Капча загружается...