Update partial view by calling MVC4 controller via jquery

Question

I have a page with a sidebar menu . On clicking the side bar menu I expand a jstree . On clicking any of the nodes of this tree the partial page on the main page should reload . However this does not seem to be happening .

Simplified MainPage.html


<body class="claro">
    <div id="header">
            <div id="logindisplay">
                @Html.Partial("_LogOnPartial")
            </div>
     </div>
     <div id="menucontainer2">
        @Html.Partial("_SideLayout")
    </div>
    <div id="main">
            @RenderBody()
    </div>
</body>

I create a sidebar layout in the form of a jstree view ( which renders fine ) and wait for the use to click on the tree nodes . ie.

SideBarLayout.html

<div id="divtree">
    <ul id="tree">
        <li>
           Manage Profile              
        </li>
        <li ><a>Settings</a>
            <ul>
                <li><a>Configuration Settings</a>
                    <ul>
                        <li><a>Customer Setup</a></li>
                        <li><a>Job Setup</a></li>
                    </ul>
                </li>
            </ul>
        </li>

    </ul>
</div>

script type="text/javascript">
    $(function () {
        $("#divtree").jstree();

        $("#divtree").bind(
        "select_node.jstree", function (evt, data) {
            debugger;
            var url = '@Url.Action("Index", "Order", new{ Area = "OrderModule"})'; -----> is this correct way to call the MVC 4 Controller ? 
            console.log(url);
            $.post(url, function (data, status) {
                alert("Data: " );
            });
        }
);
    });
</script>

1 . As you can see currently I am creating the same url irrespective of which node of the tree is clicked . Once i can update my partial view on the MainPage.html I shall take care of this .

2 .

the _LogOnPartial works fine and is able to update the partial view of the mainpage correctly . It simply contains something like this

 @Html.ActionLink("Log Off", "LogOff", "Account")

However I am unable to manipulate the jstree to update the partial view . Can anyone help me with the correct jquery command to call the MVC 4 controller so that my page updates?

**EDIT**

I am now able to get the connect to POST the data to the server ( My alert says success ). However still my partial view in the main page is not rendered

. Correct Ajax Call :

    $.ajax({
        url: '@Url.Action("Index", "DpcmOrder", new { area = "AmethystWorkestraModule" })',
        type: 'POST',
        cache: false,
        async: false,
        data: $('form').serialize(),
        success: function (data) {
            //your ajax data    
            alert('success');
            $('#main').html(data);
        },
        error: function (e) {
            alert('fail');
            console.log(e);
        }
    });

Mahesh Reddy · Accepted Answer · 2014-02-14 04:16:25Z

0

 $.ajax({
        url: '/Index/Order',
        type: 'GET',
        cache: false,
        async: false,         
        data: {Area : "OrderModule"},
        success: function (data) {
         //your ajax data    
         }
     });

answered Feb 14, 2014 at 4:16

Mahesh Reddy

3564 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

rockstar Over a year ago

i was able to get the connection to the server . However i still dont see the partial page updating :(

Mahesh Reddy Over a year ago

is alert coming in succes?

rockstar Over a year ago

yes its coming in success . Also the div i.e #main gets rebuilt with the whole page embedded inside the div . so the UI gets completely messed up . SO i suspect there is something wrong in the rendering of the data fetched back .

Mahesh Reddy Over a year ago

then your controller method must be returning entire page with header and footer contents

Tieson T. Over a year ago

@rockstar Return a PartialView() rather than a View() - that will get you just the markup in the view itself. Otherwise, you're getting the layout as well.

|

Collectives™ on Stack Overflow

Update partial view by calling MVC4 controller via jquery

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related