Javascript Tempdata未显示在视图ASP.NET C中的图像src中#

我正在尝试在控制器中设置图像URL，并在成功将img上载到文件夹后，使用tempdata将其传递到查看页面。但是，tempdata值不会出现在视图中，即使它已显示在响应负载中

请务必让我知道我可以改进什么！谢谢

控制器

[HttpGet]  
        public ActionResult UploadFile()  
        {  
            return View();  
        }

        String fileName = "";
        [HttpPost]  
        public ActionResult UploadFile(HttpPostedFileBase file)  
        {  
            try  
            {
                string _path = "";

                if (file.ContentLength > 0)  
                {

                    string _FileName = Path.GetFileName(DateTime.Now.ToBinary() + "-" + file.FileName);
                    _path = Path.Combine(Server.MapPath("~/UploadedFiles"), _FileName);

                    fileName = _FileName;

                    file.SaveAs(_path);
                }  
                
                TempData["Img"] = _path;
                TempData["Msg"] = "File Uploaded Successfully!!";

                System.Diagnostics.Debug.WriteLine("File Uploaded Successfully!!");

                return View();
            }  
            catch  
            {  
                TempData["Msg"] = "File upload failed!!";
                System.Diagnostics.Debug.WriteLine("File upload failed!!");
                return View();  
            }  
        }

视图（cshtml）

在服务器端：

   [HttpPost]  
            public ActionResult UploadFile(HttpPostedFileBase file)  
            {  
                try  
                {
                    string _path = "";

                    if (file.ContentLength > 0)  
                    {

                        string _FileName = Path.GetFileName(DateTime.Now.ToBinary() + "-" + file.FileName);
                        _path = Path.Combine(Server.MapPath("~/UploadedFiles"), _FileName);

                        fileName = _FileName;

                        file.SaveAs(_path);
                    }  


                    return Json(_path);
                }  
                catch  
                {  
                    return Json("");  
                }  
            }

在客户端：

        success: function (data) {
if(data==="") alert("Image hasn't been uploaded successfully!");
        else 
    { 
    $('your-div').find('img').attr('src', data);
    alert("Image has been uploaded successfully!");
    }
    }};

我在我的项目中尝试你的TempData[“Img”]。它工作得很好。您只需检查您的

，并找出您的错误所在。请参见下图以获取帮助

---

视图使用AJAX调用控制器操作方法，如下所示：

$('#btnFileUpload').fileupload({
    url: '@Url.Action("UploadFile")',
    // other options
    success: function (e, data) {
        console.log("Done");
    },

    error: function (XMLHttpRequest, textStatus, errorThrown) {
        console.log("Error");
    }
});

但实际上，您在

HttpPost

方法中返回的是整个视图，而不是JSON响应。要使用AJAX调用设置图像路径和返回的消息，您需要使用如下两个值返回

JsonResult

：

[HttpPost]  
public ActionResult UploadFile(HttpPostedFileBase file)  
{
    string path;
    string msg;
    try
    {
        // file processing logic

        path = _path;
        msg = "File Uploaded Successfully!!";
    }
    catch  
    {  
        msg = "File upload failed!!";
        path = string.Empty;
    }

    var result = new { Path = path, Msg = msg }; // return both image path & upload message
    return Json(result, JsonRequestBehavior.AllowGet);
}

然后，在AJAX调用

success

响应中，使用

append

&

html

方法替换

TempData

用法：

$('#btnFileUpload').fileupload({
    url: '@Url.Action("UploadFile")',
    // other options
    success: function (data) {
        if (data.Path != '') {
            $(body).append($('<img />').attr('src', data.Path));
        }
        $('#msg').html(data.Msg); // put a div with id='msg' attribute first (see HTML code below)
        console.log("Done");
    },

    error: function (XMLHttpRequest, textStatus, errorThrown) {
        console.log("Error");
    }
});

$（'btnFileUpload'）。文件上载({
url:'@url.Action（“上传文件”）'，
//其他选择
成功：功能（数据）{
如果（data.Path！=''）{
$（正文）。附加（$（'
HTML代码：

<div>
     <input type="file" name="file" id="Upload" class="zone" />
     <div id="dropZ">
        <i class="fa fa-camera fa-3x" aria-hidden="true"></i>
        <p class="add">Add Photo</p>
     </div>
</div>

<div id="msg"></div>


添加照片


相关问题：

使用Stephen Muecke方法，我能够解决问题，因为我没有对您返回的视图做任何操作

return Json(_path); 

及

<代码> >成功：函数（数据）{ $（体）.Apple（“是”代码> TimData [ IMG ] ] /代码>数据在调试中包含NULL。考虑使用<代码> ViewBag < /C> >或<代码> VIEWDATAs> /代码>（或VIEW模型）（TunData保持2个后续请求之间的值）。对于返回的视图，您不做任何事情（例如更新DOM）@TetsuyaYamamoto我确实使用if null进行了检查，但似乎有值传递到tempdata中查看，但它只是没有显示在视图中。尝试了viewBag和ViewData，但结果是相同的。但为什么仍要返回视图。只需返回包含该数据的
JsonResult
并更新现有的
src
属性即可但是（实际上您需要创建
元素，因为它最初并不存在）
返回Json（_path）；
和
成功：函数（数据）{$（body）.append（$（
标记不存在，因此
.find（'img'））
不起作用-需要created@StephenMuecke因此，应该在上传文件之前创建
img
。只需使用css属性
display:none；
。然后只需使用
.css（）
函数将值更改为
block
，显然您没有使用OP的代码测试它（进行ajax调用）！
<div>
     <input type="file" name="file" id="Upload" class="zone" />
     <div id="dropZ">
        <i class="fa fa-camera fa-3x" aria-hidden="true"></i>
        <p class="add">Add Photo</p>
     </div>
</div>

<div id="msg"></div>

return Json(_path); 

success: function (data) { $(body).append($('<img/>').attr('src', data)); }