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

Question

I am new to ASP.NET and web development of any kind. I have searched for many hours for a solution to my problem, but I can't seem to get my partial view to show up in the div.

What is happening is the view is showing up, but it's replacing the entire page instead of showing up in the div within the main page.

My controller looks something like this:

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

My Main View looks something like this

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

This is what the partial view looks like:

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

score 1 · Answer 1 · answered Dec 12 '15 at 01:25

1

Would this work for you?

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

And in your view:

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

answered Dec 12 '15 at 01:25

nocturns2

663
10
17

Sorry no, it breaks at the @Html.Action line saying that the parameter dictionary contains a null entry for parameter 'id'. – L_Laxton Dec 14 '15 at 17:39

L_Laxton · Accepted Answer · 2016-01-06T18:46:57.907

Okay I figured it out with Christos' help.

The main view should look like this:

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

For some reason the id of the item was not being returned, so I tried it like this and it worked. Hope this helps others too.

Thanks for your help Christos.

Christos · Answer 3 · 2015-12-11T23:38:09.297

0

You need a bit of JavaScript to do that you want. Basically, you have to wire up a click event handler for your links and when the user click on one of them an ajax request would be triggered.

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

edited Dec 11 '15 at 23:38

answered Dec 11 '15 at 23:22

Christos

53,228
8
76
108

Well that gets me a lot closer but it's still not working. After debugging the issue it doesn't seem to be calling the action method 'ShowView', which is needed to get the view model from the list. Thanks for your help so far. – L_Laxton Dec 12 '15 at 00:01
@L_Laxton have you loaded the jQuery library before the script? I have mentioned this as comment in the code above. – Christos Dec 12 '15 at 00:02
I have these loaded in the header of the layout file: – L_Laxton Dec 14 '15 at 17:22

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

3 Answers3

Linked