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

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

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

图像修改

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

按钮带来POPUP

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

JAVASCRIPT FUNCTIONS

主页

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);
    }

POPUP

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}';

将是一个问题，因为这在javaascript中没有任何意义。 Yon可以插入：

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

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

通过MVC 3 Action更改图像src

1 个答案: