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

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
LVL 8
Bob HoffmanDeveloperAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Bob LearnedCommented:
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
Bob HoffmanDeveloperAuthor Commented:
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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Bob HoffmanDeveloperAuthor Commented:
Figured it out myself
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
C#

From novice to tech pro — start learning today.