尝试使用Ajax.ActionLink加载部分视图

时间:2013-03-14 16:28:40

标签: ajax asp.net-mvc-3 partial-views

在阅读了这里的其他一些帖子后,我已经尝试加载链接点击的部分视图了(文本链接实际上可能会变为图像,一旦我通过这个概念验证阶段)。问题是我被定向到点击部分视图,而不是在视图中填充div我点击链接:

布局:

<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>

观点:

 @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>

控制器:

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

部分(显然命名为test.cshtml):

<p>Item 1 test</p>

我错过了一些明显的东西吗?这是我第一次尝试在MVC中使用AJAX,因此可能会有一两个学校男生的错误。

我计划有几个不同的Ajax Action Links调用不同的部分视图,因此我将名称传递给控制器​​。

1 个答案:

答案 0 :(得分:3)

代码已修复

你想尝试这个,你有更好的控制,如果错误等等.... 带帮助的HTML

@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>