Redirect to another page in ajax call

Question

Hello, I have Menu bar, when I click in About its changes renderbody in Layout using Ajax:

<div id="renderbody">@RenderBody()</div>

Menu bar:

    <li class="active menu-tab"><a href="#" id="Dashboard"><i class="icon icon-home"></i> <span>Dashboard</span></a> </li>
    <li class="menu-tab"> <a href="#" id="About"><i class="icon icon-signal"></i> <span>About</span></a> </li>

and JS:

$("#About").click(function () {
            $.ajax({
                url: '/Home/About',
                success: function (data) {
                    $("#renderbody").html(data);
                }
            })
        })

It is worked Perfect but when I do it with partial view and model its did not work.

   <li class="menu-tab"> <a href="#" onclick="@Html.Partial("_MovesPages", new IndividualMenuButton { ID="About", url="About"})"><i class="icon icon-signal"></i> <span>About</span></a> </li>

Modal - IndividualMenuButton:

namespace XXX.Models
{
    public class IndividualMenuButton
    {
        public string ID { get; set; }
        public string Url { get; set; }

    }
}

and partial view - _MovesPages:

@model XXX.Models.IndividualMenuButton
@section scripts
{
    <script>

        $("#@Model.ID").click(function () {
            $.ajax({
                url: '/Home/@Model.Url',
                success: function (data) {
                    $("#renderbody").html(data);
                }
            })
        })

    </script>
}

"It did not work" can you elaborate? Is your controller action not hit? Does your controller action return HTML but it is not inserted into the page? — Georg Patscheider, Sep 19 '18 at 09:27
controller action return HTML but it is not inserted into the page @GeorgPatscheider — Maxim, Sep 19 '18 at 09:27
Are you getting any specific error messages in your console? (ctrl+shift+i in Chrome) — Martin, Sep 19 '18 at 09:37
Are you able to find the element `#renderbody`? If it's in your modal, try to do a `find()` on the element. `$('#yourModalBody').find('#renderbody').html(data); ` — Martin, Sep 19 '18 at 09:40
"it is not inserted into the page"... so `data` in your second ajax call is populated correctly, you mean? Do you actually have any element in the page with id "renderbody" in this scenario? If you're certain the ajax call is working then that's the most likely explanation. — ADyson, Sep 19 '18 at 09:41
Yes beacuse when I using without partial view and model it's worked. look at first code in my post @Martin — Maxim, Sep 19 '18 at 09:41
when I using without partial view and model it's worked. look at first code in my post @adyson — Maxim, Sep 19 '18 at 10:07
have you done `console.log(data);` in the ajax call to check what the returned content is? And I'll repeat my earlier question, do you have an element in your HTML with "id" renderbody? Because if you don't, it won't append the content anywhere in your page. You can test it - `console.log($("#renderbody").length);` - if you get 0, it doesn't exist. If you get 1, it exists. — ADyson, Sep 19 '18 at 12:58
console.log($("#renderbody").length); I get 1 so it's exists. but didn't get data - console.log(data); @ADyson — Maxim, Sep 19 '18 at 13:02
Right. So if data is empty, then the ajax call is not really working then, is it? I mean, it returns "success" but it's not doing what it's supposed to. We can't see the action method you're calling so it's not really possible to know why it doesn't return data. — ADyson, Sep 19 '18 at 13:11

score 2 · Accepted Answer · answered Sep 19 '18 at 13:18

That's not going to render a valid event handler. The rendered HTML will look something like

<li class="menu-tab"> <a href="#" onclick="<script>...</script>"><i class="icon icon-signal"></i> <span>About</span></a> </li>

The onclick attribute needs to contain javascript code, not an HTML script block. Maybe a better solution would be to use the class as a selector instead of a partial, and use the href attribute to hold the URL. So, something like:

<li class="menu-tab"> <a href="About"><i class="icon icon-signal"></i> <span>About</span></a> </li>

<script>
    $(".menu-tab").click(function (e) {
        e.preventDefault();
        var url = '/Home/' + $(this).attr('href');
        $.ajax({
            url: url,
            success: function (data) {
                $("#renderbody").html(data);
            }
        });
    });
</script>

Note that you need to pass in the event args (e) and call e.preventDefault(); to prevent the anchor tag from performing navigation as it would normally do so that you can make the ajax call.

$(".menu-tab a").click(function (e) { – Maxim Sep 19 '18 at 13:26 — Maxim, Sep 19 '18 at 13:26

Redirect to another page in ajax call

1 Answers1