Solved

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

Posted on 2014-12-05
3
618 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

SharePoint Admin?

Enable Your Employees To Focus On The Core With Intuitive Onscreen Guidance That is With You At The Moment of Need.

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…
This article shows how to deploy dynamic backgrounds to computers depending on the aspect ratio of display
Finds all prime numbers in a range requested and places them in a public primes() array. I've demostrated a template size of 30 (2 * 3 * 5) but larger templates can be built such 210  (2 * 3 * 5 * 7) or 2310  (2 * 3 * 5 * 7 * 11). The larger templa…

730 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