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没有返回，所以我尝试了这样，它工作。希望这也有助于其他人。

感谢你的帮助Christos。

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

3 个答案: