Mvc4 Ajax调用打开新页面

I've looked at what must be 100 posts and can't get this to work in my new project. I've got all the scripts, its seems like the simplist of tests and unobtrusive is set in the webconfig, still no luck getting the actionlink to replace the text in the div. Firebug reports all scripts loaded successfully and code is below. If anyone can help it would be much appreciated and I'd get you a virtual beer!

Controller:

public ActionResult AjaxTest()
{
return Content("Ajax Test Successful");
}

View:

@{
ViewBag.Title = "User";
}

<h2>Users</h2>

@Html.ActionLink("Ajax Test", "AjaxTest", "Admin", new AjaxOptions() { InsertionMode = InsertionMode.Replace, UpdateTargetId = "ajaxtest" })

<div id="ajaxtest"></div>

Layout:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>@ViewBag.Title - My ASP.NET MVC Application</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
</head>
<body>
<header>
<div class="content-wrapper">
<div class="float-left">
<p class="site-title">
<img src="~/Images/logo.jpg" /></p>
</div>
<div class="float-right">
<section id="login">
@Html.Partial("_LoginPartial")
</section>
<nav>
<ul id="menu">
<li>@Html.ActionLink("Home", "Index", "Home")</li>
<li>@Html.ActionLink("Upload Files", "UploadFiles", "Upload")</li>
<li>@Html.ActionLink("Upload History", "UploadHistory", "Upload")</li>
<li>@Html.ActionLink("Help", "Help", "Home")</li>
<li>@Html.ActionLink("Admin", "Home", "Admin")</li>
</ul>
</nav>
</div>
</div>
</header>
<div id="body">
@RenderSection("featured", required: false)
<section class="content-wrapper main-content clear-fix">
@RenderBody()
</section>
</div>
<footer>
<div class="content-wrapper">
<div class="float-left">
<p>&copy; @DateTime.Now.Year - My ASP.NET MVC Application</p>
</div>
</div>
</footer>

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryval")

@RenderSection("scripts", required: false)
</body>
</html>

Html of rendered page:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>User - My ASP.NET MVC Application</title>
    <link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <meta name="viewport" content="width=device-width" />
    <link href="/Content/site.css" rel="stylesheet"/>
<link href="/Content/buttons.css" rel="stylesheet"/>

    <script src="/Scripts/modernizr-2.5.3.js"></script>

</head>
<body>
    <header>
        <div class="content-wrapper">
            <div class="float-left">
                <p class="site-title">
                    <img src="/Images/logo.jpg" /></p>
            </div>
            <div class="float-right">
                <section id="login">
                        <ul>
    <li><a href="/Account/Register" id="registerLink">Register</a></li>
    <li><a href="/Account/Login" id="loginLink">Log in</a></li>
</ul>

                </section>
                <nav>
                    <ul id="menu">
                        <li><a href="/">Home</a></li>
                        <li><a href="/Upload/UploadFiles">Upload Files</a></li>
                        <li><a href="/Upload/UploadHistory">Upload History</a></li>
                        <li><a href="/Home/Help">Help</a></li>
                        <li><a href="/Admin/Home">Admin</a></li>
                    </ul>
                </nav>
            </div>
        </div>
    </header>
    <div id="body">

        <section class="content-wrapper main-content clear-fix">


<h2>Users</h2>

<a Confirm="" HttpMethod="" InsertionMode="Replace" LoadingElementDuration="0" LoadingElementId="" OnBegin="" OnComplete="" OnFailure="" OnSuccess="" UpdateTargetId="ajaxtest" Url="" href="/Admin/AjaxTest?Length=5">Ajax Test</a>

<div id="ajaxtest"></div>
        </section>
    </div>
    <footer>
        <div class="content-wrapper">
            <div class="float-left">
                <p>&copy; 2013 - My ASP.NET MVC Application</p>
            </div>
        </div>
    </footer>

    <script src="/Scripts/jquery-1.7.1.js"></script>

    <script src="/Scripts/jquery.unobtrusive-ajax.js"></script>
<script src="/Scripts/jquery.validate.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js"></script>



</body>
</html>

Web config:

<add key="ClientValidationEnabled" value="true" />
<add key="UnobtrusiveJavaScriptEnabled" value="true" />
查看全部
weixin_33698823
weixin_33698823
2013/01/22 17:15
  • ajax
  • jquery
  • 点赞
  • 收藏
  • 回答
    私信

1个回复