Ajax 返回一个视图,但它没有使用 mvc4 显示

Ajax Returning a view but it is not showing using mvc4

csHtml代码

第一个 Foreach 循环是创建食品类别列表的动态菜单。 第二个 Foreach 循环正在显示产品 onclick 动态菜单。

@foreach (var i in Model.Foods)
{                                       
<a href="#" id="@i.FoodList" class="@i.FoodList" onclick="test(this.id)" >@i.FoodList</a>
}

@foreach (var j in Model.Products)
{
<div class="card col-lg-2">
   <a href="../Home/ProductDetails">
      <img src="~/Images/@j.Images" class="card-img-top" alt="...">
        <div class="card-body">
           <p class="card-text ProName">@j.Product_Name</p>
           <p class="card-text ProOrder">Min. Order : @j.Min_Order</p>
        </div>
  </a>
</div>
}

脚本

在这个脚本中,我获取动态菜单的值并发送到控制器。

function test(ids) {
        document.getElementById("myNav").style.width = "0%";
        var x = ids;
        alert(ids + "---" + x)

        $.ajax({
            type: 'POST',
            //url: "/Home/ProductList",
            url: '@Url.Action("ProductList")',
            dataType: 'html',
            UpdateTargetId: 'loads',
            data: {
                Id: x,
            },
            success: function (status) {
                console.log('Send');
                //$("#loads").load(" #loads");
                $("#loads").empty();
                $("#loads").html(status);
            },
            error: function () {
                console.log('something went wrong - debug it!');
            }
        });
}

控制器

        public ActionResult ProductList(string Id)
        {
            DemoProjectEntities DPE = new DemoProjectEntities();
            var data = new MasterDetails
            {
                Products = DPE.Products.Where(a => a.Category == Id).ToList(),
                Foods = DPE.Foods.ToList()
            };
            return View(data);
        }

让我知道这种情况下的问题是什么??

脚本

    function test(ids) {
        document.getElementById("myNav").style.width = "0%";
        var x = ids;
        //alert(ids + "---" + x)


        $.ajax({
            type: 'POST',
            url: '@Url.Action("ProductList1")',
            dataType: 'html',
            UpdateTargetId: 'loads',
            data: {
                Id: x,
            },
            success: function (status) {
                console.log('Send');
                $("#loads").html(status);
            },
            error: function () {
                console.log('something went wrong - debug it!');
            }
        });
    }

控制器

        public ActionResult ProductList()
        {
            DemoProjectEntities DPE = new DemoProjectEntities();
            var data = new MasterDetails
            {
                Foods = DPE.Foods.ToList(),
                //Products = DPE.Products.Where(a => a.Category == Id).ToList()
            };
            return View(data);
        }

        
        public string ProductList1(string Id)
        {
            DemoProjectEntities DPE = new DemoProjectEntities();
            StringBuilder s = new StringBuilder();
            var Products = DPE.Products.Where(a => a.Category == Id).ToList();
            foreach (var j in Products)
            {
                s.Append("<div class='card'>");
                s.Append("<a href='../Home/ProductDetails' id=" + j.Product_Name + " onclick='getProName(this.id)'>");
                s.Append("<img src='/Images/" + j.Images + "' class='card-img-top' alt='...'/>");
                s.Append("<div class='card-body'>");
                s.Append(string.Format("<p class='card-text ProName'>{0}</p>", j.Product_Name));
                s.Append(string.Format("<p class='card-text ProOrder'>Min. Order : {0}</p>", j.Min_Order));
                s.Append("</div>");
                s.Append("</a>");
                s.Append("</div>");
            }
            return s.ToString();
        }