ASP.NET MVC 5：如何从动作链接呈现div中的局部视图？

我是ASP.NET和任何类型的Web开发新手。我已经搜索了很多小时来解决我的问题，但我似乎无法让我的部分视图出现在div中。ASP.NET MVC 5：如何从动作链接呈现div中的局部视图？

正在发生的事情是视图显示出来，但它替换整个页面，而不是显示在主页面中的DIV起来。

我的控制器看起来是这样的：

public class MyController 
{ 
    public ActionResult ShowView(int id) 
    { 
     // get view model from id 
     return PartialView(viewModel); 
    } 
}

我的主视图看起来是这样的

@model List<viewModelType> 

<div> 
    @foreach (var item in Model) 
    { 
     <div> 
      @Html.ActionLink(item.Name, "ShowView", new { id = item.ID }, new { @class = "btn-sm" }) 
     </div> 
    } 
</div> 

<div> 
    // here is where I want to partial view to go! 
</div>

这是局部视图的样子：

@model viewModelType 
<div>Model.DataToDisplay</div>

来源

2015-12-11 L_Laxton

好吧，我与克里斯托的帮助了它。

主要看应该是这样的：

@model List<viewModelType> 

<div> 
    @foreach (var item in Model) 
    { 
     <div> 
      <button class="js-showViewBtn" [email protected]>item.Name</button> 
     </div> 
    } 
</div> 

<div class="js-show-view"> 
    // here is where I want to partial view to go! 
</div> 

<script type="text/javascript"> 
    $(function() { 
     $('.js-showViewBtn').click(function (e) { 
      e.preventDefault(); 
      var itemId = $(this).data("itemId"); 

      $.ajax({ 
       method: "GET", 
       url: "/MyController/ShowView", 
       data: { id: itemId }, 
       cache: false 
      }).success(function(data){ 
       $('.js-show-view').html(data); 
      }); 
     }) 
    }); 
</script>

出于某种原因，没有被退回产品的ID，所以我想它是这样，它的工作。希望这也能帮助其他人。

感谢您的帮助Christos。

来源

2015-12-14 21:25:08

您需要有点JavaScript来做你想要的。基本上，您必须为您的链接连接点击事件处理程序，并且当用户点击其中一个点击事件处理程序时，会触发ajax请求。

@model List<viewModelType> 

<div> 
    @foreach (var item in Model) 
    { 
     <div> 
      @Html.ActionLink(item.Name, "ShowView", new { id = item.ID }, new { @class = "btn-sm js-show-view-btn" }) 
     </div> 
    } 
</div> 

<div class="js-show-view"> 
    // here is where I want to partial view to go! 
</div> 
<!-- Before the following script been loaded, he jQuery should have been loaded --> 
<script> 
    $(function(){ 
     $(".js-show-view-btn").click(function(e){ 
      e.preventDefault(); 
      $.ajax({ 
       method: "GET", 
       url: "/MyController/ShowView", 
       data: { id = $(e).id }, 
       cache: false 
      }).success(function(data) 
      { 
       $(".js-show-view").html(data); 
      }); 
     }) 
    }); 
</script>

来源

2015-12-11 23:22:36 Christos

嗯，这让我更加接近，但它仍然无法正常工作。在调试问题后，它似乎没有调用操作方法“ShowView”，这是从列表中获取视图模型所需的。感谢您的帮助。 –

@L_Laxton你在脚本之前加载了jQuery库吗？我已经在上面的代码中提到了这一点。 – Christos

我有这些加载在布局文件的标头： –

请问

这对你的工作？

[ChildActionOnly] 
public class MyController 
{ 
    public ActionResult ShowView(int id) 
    { 
     // get view model from id 
     return PartialView(viewModel); 
    } 
}

而在你的看法：

<div> 
    // here is where I want to partial view to go! 
    @Html.Action("ShowView") 
</div>

来源

2015-12-12 01:25:43 nocturns2

对不起没有，它打破了在@ Html.Action一行说参数字典包含参数‘ID’空项。 –

ASP.NET MVC 5：如何从动作链接呈现div中的局部视图？

回答

相关问题