在按钮单击时使用 ajax 在下一页显示数据答案

【问题标题】：display data on next page using ajax on button click在按钮单击时使用 ajax 在下一页显示数据
【发布时间】：2021-12-29 02:46:48
【问题描述】：

我有一个 cshtml 页面，ListZoneRecords.cshtml。在此页面中，当用户按下特定区域行时，其详细信息应显示在另一个页面中。我可以在 ajax 中执行此操作吗？

//ListZoneRecords.cshtml
<script>
$('#btn_sbmt_details').click(function () {
            var id = $('#i_zone_id').val();
            $.ajax({
                url: "/ZoneModels/GetByKey",
                data: { id: id},
                type: "GET",
                contentType: "application/json;charset=UTF-8",
                dataType: "json",
            })
        });
 </script>

当用户按下此按钮btn_sbmt_details时，它会调用控制器中的GetByKey方法。此方法搜索 id 并检索详细信息。现在我必须在另一个 cshtml 页面中显示详细信息说ZoneDetails.cshtml。这可以使用ajax吗？

我的控制器方法::

public JsonResult  GetByKey(int? id)  
    {   var data = (from z in db.ZoneModels 
                where z.ZoneId == id
                select z).ToList();
        return Json(data,  JsonRequestBehavior.AllowGet);
    }

或者，我必须按照MVC方法创建GetByKey方法的视图页面，然后执行return View(data);

public ActionResult GetByKey(int? id)  
    {   var data = (from z in db.ZoneModels 
                where z.ZoneId == id
                select z).ToList();
        return View(data);
    }

【问题讨论】：

您可以返回视图并在同一屏幕上显示，但更好的方法是为 ZoneDetails.cshtml 创建一个操作并通过 url 将 id 传递给该操作，然后简单地导航到该 url，例如/ZoneModels/ZoneDetails?id=1
@as-if-i-code 请你写详细信息...我理解这个概念但不知道该怎么做。谢谢！！！
请参考下面的答案

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

【解决方案1】：

在你的控制器中为ZoneDetails.cshtml 创建一个动作（我假设它是ZoneModelsController.cs）现在只需导航到该操作并通过查询字符串传递id，您将获得类似于以下/ZoneModels/ZoneDetails?id=1的网址

下面是相同的模板。

ListZoneRecords.cshtml

<script>
$('#btn_sbmt_details').click(function () {
    var id = $('#i_zone_id').val();
    window.location = "/ZoneModels/ZoneDetails?id=" + id;
});
 </script>

ZoneModelsController.cs

public ActionResult ZoneDetails(int? id)  
{
    List<Object> detailsListy = GetByKey(id);
    
    // write code here to prepare view model
    
    return View(model); 
}

public List<Object>  GetByKey(int? id)  
{   
    var data = (from z in db.ZoneModels 
                where z.ZoneId == id
                select z).ToList();
    return data;
}

【讨论】：