Solved

MVC 4 webGrid on main view disappears when ajax.actionlink is clicked to load a partial view.

Posted on 2014-12-05
3
631 Views
Last Modified: 2014-12-12
This is what I want to happen: User click an item in the grid and that items is loaded above the grid, the grid does not change.

This is what happens:  User click an item in the grid and that items is loaded above the grid, the grid disappears.

I have the grid in the main view and the item display portion in a partial view.

I'm kind of an MVC newbe, so if this in not the correct way to do this what is?

ThankssampleCode.txt
0
Comment
Question by:Bob Hoffman
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
3 Comments
 
LVL 96

Expert Comment

by:Bob Learned
ID: 40485080
Is this the code that has the Ajax.ActionLink that you are referring to?

   @using (Html.BeginForm("_Grid", "MyModel"))
    {
        <div>
            @grid.GetHtml(

                    columns: new[] 
                    {
                         grid.Column(header: "Id", canSort: false, format: (item) => Ajax.ActionLink(((int)item.RecId).ToString(), "_editPartial", "MyModel", new {recId = item.RecId}, new AjaxOptions { UpdateTargetId = "_editPartialDiv"})),
                })
        </div>
    }

Open in new window

0
 
LVL 8

Accepted Solution

by:
Bob Hoffman earned 0 total points
ID: 40485955
Got it figured out. Changed the grid column to an anchor that executes an async GET via ajax. Not really sure why this works over the ActionLink which is also doing an async GET via ajax... but it does.


GRID LINK COLUMN

grid.Column(header: "Id", format:@<text> <a href="javascript:loadEditDiv(@item.RecId);" id="Edit_@item.RecId">@item.RecId</a></text>)

JAVASCRIPT
        function loadEditDiv(RecId) {
            $.ajax({
                type: "GET",
                cache: false,
                url: "@Url.Action("_editPartialDiv", "MyModel")",
                data: { RecId: RecId },
                dataType: "html",
                async: true,
                success: function (data) {
                    $("#_editPartialDiv").html(data);
                }
            });
0
 
LVL 8

Author Closing Comment

by:Bob Hoffman
ID: 40495797
Figured it out myself
0

Featured Post

PeopleSoft Has Never Been Easier

PeopleSoft Adoption Made Smooth & Simple!

On-The-Job Training Is made Intuitive & Easy With WalkMe's On-Screen Guidance Tool.  Claim Your Free WalkMe Account Now

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Many of us here at EE write code. Many of us write exceptional code; just as many of us write exception-prone code. As we all should know, exceptions are a mechanism for handling errors which are typically out of our control. From database errors, t…
Entity Framework is a powerful tool to help you interact with the DataBase but still doesn't help much when we have a Stored Procedure that returns more than one resultset. The solution takes some of out-of-the-box thinking; read on!
Monitoring a network: how to monitor network services and why? Michael Kulchisky, MCSE, MCSA, MCP, VTSP, VSP, CCSP outlines the philosophy behind service monitoring and why a handshake validation is critical in network monitoring. Software utilized …
This is my first video review of Microsoft Bookings, I will be doing a part two with a bit more information, but wanted to get this out to you folks.

615 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question