通过 MVC 3 操作更改图像 src

Question

我有一个带有图像标签的页面。图像标签显示的图像根据在弹出窗口上进行的图像选择而变化。以下是重现我的问题的步骤：

 1. Click button on Main Page and display popup with selectable images
 2. Click any one image in popup to create selection
 3. Click "Associate" button in popup to begin association process
     a. JQuery.post is called to "Associate" selected image to image in Main page
        i. Code in the Controller is run and save the association in the database.
     b. Upon success, the "success" function of the JQuery.post makes a call to an existing javascript function.
        i. This function creates a string in the following format: "{Controller}/{Action}/{PrimaryId}/{SecondaryId}"
        ii. In the function, the "src" of the image in the main page is set to the string created above.
        iii. The change in "src" makes the code in the controller run which in turn returns the specified image.
        iv. The popup is closed

出于所有实际目的，代码都可以正常工作，除了一个恼人的问题，即无论浏览器如何，通过上述过程从控制器返回时图像都不会刷新（在 JQuery.post 期间） “成功”功能）。

需要注意的一件事是，如果在没有“JQuery.post”的情况下运行步骤“bi”-“b.iv”（即仅检索图像数据而不首先进行关联），则图像每次都会刷新。使用的代码如下（已编辑 - 大括号中的项目是占位符）

修改

<div id="divMenuItemMedia">
   <img id="imgMenuItemMedia" alt='someAlt' src='/{Controller}/{Action}/{InitialImageId}' />
</div>

用于调出弹出窗口的图像

<input type="button" id="btnModifyImage" name="btnModifyImage" class="t-button" value="Change Image" onclick="showImageChooser();" />

按钮JAVASCRIPT 功能

主页弹出

function GetCurrentMediaItemsByIds(pId, iId) {
        //$('#imgMenuItemMedia').load(function () {
            //alert("Image updated");
       // });
        var imgMedia = document.getElementById("imgMenuItemMedia");
        var sourceUrl = '/{Controller}/{Action}/{pId}/{iId}';
        //$('#imgMenuItemMedia').attr("src", sourceUrl);
        imgMedia.src = sourceUrl;
        InImageSelectionMode = false;
    }

function showImageChooser() {
        var url = '{Controller}/{DataGetterActionForPopup}';
        ShowPopup(url, "#MediaChooserDialog", null);
    }

窗口

function associateMediaSelection(e) {
   // The entity name is saved in hidden field in the "Edit" page
   var entityName = document.getElementById("hidEntityName").value;
   var contentPath = entityName + "/Associate" + entityName + "ToMediaItem";
   var url = '{Controller}/{Action}';
   var primaryId = {pId};
   var secondaryId = {sId};
   var entityId = {eId};
   var data = { "entityId" : eId, "primaryId": pId, "secondaryId": sId };

   var jqxhr = $.post(url, data, function (e) {
                GetCurrentMediaItemsByIds(presentationId, document.getElementById("hid" + entityName + "Id").value);

                closeMediaSelection();
            });
        }
function closeMediaSelection()
        {
            var windowPopup = $("#MediaChooserDialog").data('tWindow');
            windowPopup.close();
        }

有人知道什么可能会阻止图像刷新吗？

Answer 1

我假设这是完整的、真实的代码。在这种情况下：

var sourceUrl = '/{Controller}/{Action}/{pId}/{iId}';

将成为一个问题，因为这在 JavaScript 中没有任何意义。您可以插入：

var sourceUrl = '@Url.Action("Action","Controller")'

其中 Action 和 Controller 填写控制器/操作方法的名称。