OrderRecipeDetails菜品图片无法显示，点击Order后页面空白求助

点击Order按钮后，本应显示对应菜品的图片，但页面对应区域为空白状态。相关代码如下：

前端JS代码（site.js） #

function showOrderRecipeDetails(orderRecipeDetails, showId) { 
    $.ajax({
        //ContentType: "application/json; charset=utf-8",
        url: '/Recipe/ShowOrder',
        Data: orderRecipeDetails,
        dataType: 'html',
        type: 'POST',
        success: function (htmlResult) {
            $('#' + showId).html(htmlResult);
        }
    });
}

后端控制器代码（RecipeControlers.cs） #

public IActionResult ShowOrder(OrderRecipeDetails orderRecipeDetails)
{
    return PartialView("_ShowOrder", orderRecipeDetails);
}

视图代码（ShowOrder.cshtml） #

@model FoodApplication.Models.OrderRecipeDetails

<div class="container-fluid">
   <div class="row">
     <div class="col-12">
            <img src="@Model.Image_url" class="w-100" id="order-img" />
     </div>
   </div>
</div>

排查要点： #

• AJAX参数大小写错误：jQuery AJAX的参数名区分大小写，代码中Data应改为小写的data，否则后端无法接收请求参数，导致PartialView没有有效Model数据，渲染空白。
• 请求参数有效性：检查orderRecipeDetails是否包含正确的Image_url值，可在后端方法中添加日志，或在AJAX的success回调里打印htmlResult，查看返回的HTML中img标签的src是否为空。
• 图片路径正确性：确认@Model.Image_url生成的路径可直接在浏览器访问，若为本地路径，需确保服务器已正确配置静态文件映射。
• 请求状态排查：给AJAX添加error回调，查看控制台是否有404（路由错误）、500（后端异常）等报错：

  error: function(xhr, status, error) {
      console.log("请求错误:", status, error);
  }
  

• 控制器与路由匹配：检查控制器名是否为RecipeController（代码中文件名是RecipeControlers.cs，多了一个s，可能是拼写错误），确保/Recipe/ShowOrder能正确映射到目标方法。
• PartialView路径正确性：确认_ShowOrder视图存在于Views/Recipe/或Views/Shared/目录下，名称拼写无误。

内容的提问来源于stack exchange，提问作者erikg