CODEWITHSUNDEEP
ajaxasp.net-mvc-3partial-views
Michael Dunbar
Michael Dunbar

Reputation: 33

Trying to load a partial view with Ajax.ActionLink

After reading a few other posts on here I've got this far with attempting to load a partial view on the click of a link (the text link may actually change to be an image once I get past this proof of concept stage). The problem is I am being directed to the partial view on click instead of it populating a div within the view I am clicking the link on:

The layout:

<script src="@Url.Content("~/scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>

The View:

 @Ajax.ActionLink("Item 1 Ajax", "Details", "Portfolio", new { name = "test" }, new AjaxOptions
                        { 
                            HttpMethod = "Post",
                            InsertionMode = InsertionMode.Replace,
                            UpdateTargetId = "row1Content",
                            OnComplete = "portfolioItemLoaded"
                        })

<div id="row1content"></div>

<script type="text/javascript">
        function portfolioItemLoaded() {
            alert("Done");
        }
    </script>

The controller:

public class PortfolioController : Controller
    {
        public ActionResult Details(string name)
        {
            return PartialView(name);
        }
    }

The partial (obviously named test.cshtml):

<p>Item 1 test</p>

Have I missed something obvious? It's the first time I have attempted to use AJAX in MVC, so there might be a school boy error or two.

I am planning on having several different Ajax Action Links that call different partial views, hence the reason I am passing the name in to the controller.

Upvotes: 0

Views: 3976

Answers (1)

Zach dev
Zach dev

Reputation: 1620

Code fixed

Do you wanna try this, you have a better control, if error, etc.... HTML with helper

@Html.ActionLink("Item 1 Ajax", "Details", "Portfolio", Nothing, New With {.Id = "myLink"})

JavaScript

    <script type="text/javascript">

$(document).ready(function() {

    $('#myLink').click(getIt);

});

function getIt() {
        $.ajax({
            type: "POST",
            url: $(this).attr('href'),
            error: function () { 
                //show error handler
                },
            success: function (r) {
                $('#row1content').html(r);
            }
        });

        return false;
    }

</script>

Upvotes: 3

Related Questions