在 asp.net mvc 中使用 ajax 调用不显示图像列表

问题描述

当我使用 ajax call 调用图像时，我的图像列表不显示。在页面加载代码上工作完美，但在 ajax 调用中它没有显示任何图像列表我的代码是。

视图标记为：

<script>
    $(document).ready(function () {
        $(".yesterdayfilter").click(function () {
      
        var username = $("#users-ddl option:selected").text();
        alert(username);

        $.ajax({
                type: 'Post',url: "/Home/index",dataType: 'image/jpg',data: {
                 Username: username,},success: function (status) {
                console.log('Send');
                },error: function () {
                console.log('something went wrong - debug it!');
                }
                });

                });

                });
               </script>

视图中显示图片的代码：

          <div class="flex items-center" data-toggle="modal" data-target="#superlarge-modal-size- 
           preview">
                    @{
                        if (Session["recentscreenshotss"] != null)
                        {
                            var screenshotslist = 
       
       
   (List<ezilineezitaskernew.Models.sp_getrecentscreenshots_Result>)Session["recentscreenshotss"];
                            if (screenshotslist != null)
                            {
                                foreach (var item in screenshotslist)
                                {

                                    <div class="col-span-6 sm:col-span-12 xl:col-span-12 mt-8">
                                        <div class="flex-justifiy flex-wrap">
                                            <div class="w-24 h-24 relative image-fit mb-5 mr-5 cursor-pointer zoom-in">
                                                <button value="@item.Image" data-toggle="modal" data-target="#basic-modal-preview" class="testing"><img class="rounded-md" alt="Midone Tailwind HTML Admin Template" src="@item.Image"></button>
                                                <div class="tooltip w-5 h-5 flex items-center justify-center absolute rounded-full text-white bg-theme-6 right-0 top-0 -mr-2 -mt-2 tooltipstered"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x w-4 h-4"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg> </div>
                                            </div>
                                        </div>
                                    </div>
                                }
                            }
                        }
                    }
                </div>

控制器：

    [HttpPost]
    public ActionResult Index(string Username)
    {
        Getoffices();
        Setlogo();

        var Userid = dbcontext.USERS.Where(x => x.Username == Username).FirstOrDefault();
        int UID = Userid.Id;
        int companyid = Convert.ToInt32(Session["company-id"]);
        var screenshotlist = dbcontext.sp_getrecentscreenshots(null,null,companyid).ToList();

        int s_startId = screenshotlist[0].Id;
        int s_lastId = s_startId + 6;

        if (screenshotlist != null)
        {
            var screenshots = dbcontext.sp_getrecentscreenshots(s_startId,s_lastId,companyid).ToList();
            Session["recentscreenshotss"] = screenshots;
        }
      }

代码没问题。唯一的问题是它不显示图像。相同的代码在页面加载但不使用 ajax 调用时工作，有人可以帮助我吗？

解决方法

您的问题有不同的解决方案：

解决方案 1：

在 ajax 成功时，您可以使用用户名作为参数重新加载页面

解决方案2：

.empty() 和 .append 您的 <div> 使用您的 <div> 内容在 ajax 上取得成功

解决方案 3：

最干净的解决方案：

将您的 <div> 内容放在名为 Searchpartial.cshtml 的部分视图中
在您当前的视图中添加一个空白并为其指定一个 ID，例如 <div id="divSearch"></div>

并使用您的按钮加载它，如下所示：

$("#divSearch").empty()
$.get("/Home/Searchpartial",{ Username: 'username' },function (result) {
        $("#divSearch").append(result);
    }
);

在您的控制器中需要按如下方式调用您的局部视图：

[HttpGet]
public PartialViewResult Searchpartial(string Username)
{

    // your code

    return PartialView("Searchpartial");
}

我看到你的控制器 HTTP Post 在你的 ajax 中指向 Index 我注意到它是 index 小心区分大小写。

ajax asp.net-mvc c#c#