MVC jquery image src Url.Content quotes issue

Question

У меня есть файл js, где я динамически меняю изображение src.

Это мой текущий код, который я пытаюсь:

$("#prodFront").attr("src", '@Url.Content("~/Order_Images/Campaigns/"' 
    + campaignKey + '"/"' + id + '"/General/front.png"")'); 

Мой образ на самом деле находится на месте:

Root folder/Order_Images/Campaigns/ 
765662bd-06ec-4925-8611-f147e232a124/1/General/front.png 

$("#prodFront").attr("src", 
'@Url.Content("~/Order_Images/Campaigns/ 
765662bd-06ec-4925-8611-f147e232a124/1/General/front.png")'); 

Но мой код всегда идет на месте, как

http://localhost:50209/BuyNow/Index/@Url.Content(%22~/Order_Images/ 
Campaigns/765662bd-06ec-4925-8611-f147e232a124/1/General/front.png%22) 

Я могу посмотреть изображение здесь:

http://localhost:50209/Order_Images/Campaigns/765662bd-06ec-4925-8611- 
f147e232a124/1/General/front.png 

Может кто-нибудь помочь с этими цитатами.

спасибо.

Answer 1

@Url.Content - это команда бритвы, которая использует C# для создания строки при вызове страницы. Вы не можете пройти в @Url.Content в качестве «динамического» значения, вам нужно будет вызвать Url.Content в вашем контроллере и передать его в javascript. Вот почему он подходит как http://localhost:50209/BuyNow/Index/@Url.Content(%22~/Order_Images/. Выполнение вызова Ajax на сервере будет таким, каким я мог бы с ним справиться.

$.ajax({ 
     url: Url.Content("GetImageUrlAction", "SomeController"), 
     data: {id = theImageYouWantsId}, 
     success: function(returnData){ 
       $('#prodFront').attr('src', returnData.imageUrl); 
      } 
    }); 

Тогда есть контроллер, как этот

public JsonResult GetImageUrlAction(string, campaginKey, string id){ 
    var imageUrl = Url.Content("~//Order_Images//Campagins//" + campaginKey + "//" + id + 
           "//General/front.png"); 
    return Json(new { imageUrl }); 
} 

Если базовый каталог не будет меняться, вы можете установить базовую переменную на странице загрузки, а затем просто добавить campaginKey и идентификатор позже

//Declare your variable on document ready 
$(document).ready(function(){ 
    baseUrl = '@Url.Content("~/Order_Images/Campaigns/")'; 
}); 

А потом в вашем JQuery вы можете добавить к нему

$("#prodFront").attr("src", baseUrl + campaginKey + "/" + id + 
"/1/General/front.png"); 

Answer 2

В качестве campaignKey и id являются переменной JavaScript. Вы не можете использовать их с @Url.Content, так как он будет выполняться движком Razor на стороне сервера.

В качестве обходного пути вы можете сгенерировать URL-адрес с использованием заполнителя -1 и -2, которые используются для создания URL-адреса, который заменяется с помощью простой манипуляции с строкой.

//Generate URL 
var url ='@Url.Content("~/Order_Images/Campaigns/-1/-2/General/front.png")'; 

//Replace placeholder 
url = url.replace('-1', campaignKey).replace('-2', id); 

//Set image 
$("#prodFront").prop("src",url);