Ajax返回视图但未使用mvc4显示[关闭]答案

【问题标题】：Ajax Returning a view but it is not showing using mvc4 [closed]Ajax返回视图但未使用mvc4显示[关闭]
【发布时间】：2020-11-01 09:15:54
【问题描述】：

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

那么让我知道在这种情况下有什么问题？

【问题讨论】：

ProductList 有多大（适用于所有食物）？您是想在开始时加载所有这些（您正在使用控制器执行此操作）还是调用以获取 ProductList on Food 被选中（这也是您正在使用 JS 执行的操作）？
是的，选择食物后显示所有产品。

标签： .net ajax asp.net-mvc asp.net-mvc-4

【解决方案1】：

脚本

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

【讨论】：