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

Question

我不熟悉 ASP.NET 和任何类型的 Web 开发。我已经搜索了很多小时来解决我的问题，但我似乎无法在 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>

Answer 1

你需要一点 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>

Answer 2

这对你有用吗？

[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>

Answer 3

好的，我在 Christos 的帮助下弄明白了。

主视图应如下所示：

@model List<viewModelType>

<div>
    @foreach (var item in Model)
    {
        <div>
            <button class="js-showViewBtn" data-itemId=@item.ID>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 没有被返回，所以我试了一下，它成功了。希望这对其他人也有帮助。

感谢克里斯托斯的帮助。

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

ASP.NET MVC 5: How do you render a partial view in a div from an action link?

asp.net-mvc

actionlink