点击按钮通过AJAX将数据展示到另一CSHTML页面的ASP.NET MVC方案问询

结论 #

可以通过AJAX实现，但需要结合你的实际交互场景选择最优方案，两种控制器写法都可以调整后适配需求，具体如下：

首先明确两种交互场景的对应方案 #

场景1：点击按钮后跳转到独立的详情页（浏览器地址栏变更，整个页面替换为详情内容）

这种场景不需要使用AJAX，直接用链接跳转的方式更简单，还支持浏览器前进后退、详情页链接分享，适配第二种返回ActionResult的方案：

• 控制器代码调整：不需要为GetByKey单独创建视图，直接指定使用你已有的ZoneDetails.cshtml即可

  public ActionResult GetByKey(int? id)  
  {   
      var data = (from z in db.ZoneModels 
              where z.ZoneId == id
              select z).FirstOrDefault();// 单条详情无需ToList，直接取匹配的第一条
      if(data == null) return HttpNotFound();
      return View("ZoneDetails", data);
  }
  

• 列表页按钮直接改成跳转链接即可，不需要绑定AJAX事件：

  <a href="@Url.Action("GetByKey","ZoneModels",new {id=对应区域ID})" class="btn" id="btn_sbmt_details">查看详情</a>
  

场景2：点击按钮后不跳转页面，在当前列表页的指定区域（弹窗、侧边栏、页面下方区块）嵌入展示详情

这种场景适合用AJAX实现，两种控制器方案的适配性如下：

• 优先选择调整后的ActionResult方案：将返回值改为分部视图，可直接复用你已有的ZoneDetails.cshtml代码，不需要额外写前端渲染逻辑：
  1. 控制器调整：

     public ActionResult GetByKey(int? id)  
     {   
         var data = (from z in db.ZoneModels 
                 where z.ZoneId == id
                 select z).FirstOrDefault();
         if(data == null) return Content("未找到对应数据");
         return PartialView("ZoneDetails", data);
     }
     

  2. 给ZoneDetails.cshtml顶部加代码取消父布局引用，避免返回重复的页面头部/底部：

     @{ Layout = null; }
     

  3. 调整你的AJAX代码，加成功回调将返回的HTML内容插入到当前页的详情容器即可：

     $('#btn_sbmt_details').click(function () {
         var id = $('#i_zone_id').val();
         $.ajax({
             url: "/ZoneModels/GetByKey",
             data: { id: id},
             type: "GET",
             dataType: "html",
             success: function(htmlResult){
                 // 假设当前列表页有id为detail_container的DOM元素用来承载详情
                 $('#detail_container').html(htmlResult);
             }
         })
     });
     

• 仅当你需要前端做大量自定义交互时选择JsonResult方案：AJAX拿到JSON数据后需要自行写JS渲染到DOM中，无法复用已有的ZoneDetails.cshtml代码，开发成本更高。

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