Replacing contents of main view with partial view

Question

I have written some jquery which performs a get on an action, passing in a dashID and hopefully should have returned some html with the relevant information. However my jquery does not seem to be getting that data back.

Here is my javascript

function loadDashboard(dashID) {
    $.get('@Url.Action("Dashboard", new {id = ' + dashID + '})', function (data) {
        $('#dash-content').html(data);
    });
}

I then wire up the javascript code to the onclick event on a html element

<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
            @foreach (var dashboard in Model.dashboard)
            {
                <li class="drop-text" onclick="loadDashboard(@dashboard.DashID)">@dashboard.DashName</li>
            }
            <li class="divider"></li>
            <li class="drop-text" id="add-dashboard">Add dashboard</li>
        </ul>

and the contents should be displayed here

<div id="dash-content">
@Html.Partial("Dashboard", Model);
</div>

and here is the controller

 public ActionResult Dashboard(int? id)
    {
        var dashID = id;
        if (dashID == null || dashID == 0)
        {
            dashID = 1;
        }

        var getWidgetsQuery = (from widgets in db.widgets
                               where widgets.DashID == dashID
                               select widgets);

        dvm.widgets = getWidgetsQuery.ToList();


        return PartialView(dvm);
    }

I was following this post however it did not work for me MVC4 Update Partial view

you try pass parameter from client function to server code `'@Url.Action("Dashboard", new {id = ' + dashID + '})'`. In many places you mix razor markup and js. — Grundy, May 20 '15 at 12:32
I was following one of the previous posts hoping that it would work. This seemed to be the way that they were doing it. — Johnathon64, May 20 '15 at 12:37
in sample by link not used client variables, just hardcore value 'A' — Grundy, May 20 '15 at 12:38
can you provide route for your action? possibly `'@Url.Action("Dashboard")' + '?id='+dashID` will be enough — Grundy, May 20 '15 at 12:41
Try with the controller name in url-action: @Url.Action("Dashboard", "ControllerName", new {id = id = ' + dashID + '}); — Dawood Awan, May 20 '15 at 12:44
yet another variant `'@Url.Action("Dashboard", new {id = -1})'.replace(/-1/, dashID)` — Grundy, May 20 '15 at 12:44
@DawoodAwan it not work, because _dashID_ client variable, and `@Url.Action` render on server — Grundy, May 20 '15 at 12:45
I have tried all the suggestions that you guys have supplied but these still don't seem to work — Johnathon64, May 20 '15 at 12:57
@Johnathon64, how it not work? errors in console? error in ajax call? nothing happens? error when page load? — Grundy, May 20 '15 at 12:58
Nothing happens, I have firebug running and no errors javascript side. I put a breakpoint on the javascript code, it passes in the ID fine, however no content is being brought back. — Johnathon64, May 20 '15 at 12:59
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/78326/discussion-between-grundy-and-johnathon64). — Grundy, May 20 '15 at 13:03
@Johnathon64, Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/78326/discussion-between-grundy-and-johnathon64). — Grundy, May 20 '15 at 13:11

Dawood Awan · Accepted Answer · 2015-05-20T13:40:59.853

I think it would be better to separate your Razor and jQuery.

Render the Items like this:

@foreach (var dashboard in Model.dashboard)
{

<li class="drop-text clickMe" data-id="@dashboard.DashID">@dashboard.DashName</li>

...
}

Then at the bottom of your page add this jQuery, Create a click event on .clickMe class, send Ajax request.

<script type="text/javascript">
    var mUrl = '@Url.Action("Dashboard", "Controller")';

// Replace Controller with your Controller Name

    $(function() {
        $('.clickMe').click(function(e) {

            e.stopPropagation();

            var btn = $(this);

            $.ajax({
                url: mUrl,
                data: {
                    id: btn.data('id')
                },
                type: 'GET',
                success: function(data) {
                    $('#dash-content').html(data);

                },
                error: function(response) {
                    $('#dash-content').html('Failed');
                }

            })

        });

    });
</script>

EDIT

IF you have the jQuery in a JS File do this:

@foreach (var dashboard in Model.dashboard)
{

<li class="drop-text clickMe" data-id="@dashboard.DashID" data-action-url="@Url.Action("Dashboard", "Controller")">@dashboard.DashName</li>

...
}

And in your jQuery file you can do this:

$('body').on('click', ".clickMe", function (e) {

                e.stopPropagation();

                var btn = $(this);

                $.ajax({
                    url: btn.data('action-url'),
                    data: {
                        id: btn.data('id')
                    },
                    type: 'GET',
                    success: function(data) {
                        $('#dash-content').html(data);

                    },
                    error: function(response) {
                        $('#dash-content').html('Failed');
                    }

                })

            });

your js possibly work wrong if url would be like `http://localhost/Controller/Dashboard/1` instead `http://localhost/Controller/Dashboard/?id=1` — Grundy, May 20 '15 at 13:47
What do you mean, he has Parameter in controller Action: **int? id**. I am passing id here: id: btn.data('id') — Dawood Awan, May 20 '15 at 13:48
`$.ajax` add paramenter for `GET` request like `?paramname=paramvalue`, but in routing for question can be write something like `{controller}/{action}/{id}` or even `{controller}/{action}/{id}.view` in this case server expect request by url like `Controller/Dashboard/1.view` but you send request `Controller/Dashboard/?id=1` — Grundy, May 20 '15 at 13:52

Replacing contents of main view with partial view

1 Answers1