Question

我正在尝试使用mvc做一个简单的ajax示例，但它无法正常工作我基于wrox，专业的asp.net mvc 3书，第8章和复数视觉ajax视频。

我会在这里粘贴相关代码文件的代码，我认为这可能是脚本的问题，但我不太确定。

_layout.csthml (Script partial view and non mandatory section at the end)


<html>
<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title</title>
    @Html.Partial("_css")

</head>
<body>
    <div class="page">
        <header>
            <div id="title">
                <h1>Eva 1.0</h1>
            </div>
            <div id="logindisplay">
                @Html.Partial("_LogOnPartial")
            </div>

            <nav>
                <ul id="menu">                    
                    @if(Request.IsAuthenticated) {
                        <li> @Html.ActionLink("DashBoard", "Index", "Home")</li>                        
                        <li> @Html.ActionLink("Positions", "Index", "Position") </li>
                        <li> @Html.ActionLink("Prospects", "Position", "UserPositionPosition") </li>
                        <li> @Html.ActionLink("Prospect History", "Position", "UserPositionPosition") </li>
                        <li> @Html.ActionLink("Technical Interview", "Position", "UserPositionPosition") </li> 
                        <li> @Html.ActionLink("Manager Interview", "Position", "UserPositionPosition") </li> 
                        <li> @Html.ActionLink("Current Employees", "Position", "UserPositionPosition") </li>
                        <li> @Html.ActionLink("Current Employees History", "Position", "UserPositionPosition") </li>
                    }
@*                    else
                    {
                         <li> @Html.ActionLink("Log On", "LogOn", "Account") </li>
                    }*@
                </ul>
            </nav>
        </header>
        <section id="main">
            @RenderBody()
        </section>
        <footer>
        </footer>
    </div>
    @Html.Partial("_scripts")
    @RenderSection("scripts", false)
</body>
</html>


_scripts.cshtml

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.4.min.js" type="text/javascript"></script>


Index.cshtml (Where I am trying to achieve the ajax effect)


@model ICollection<Data.Model.Position>

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@section scripts{
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js" type="text/javascript"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>
}

<h2>Index</h2>

<p>
    @Html.ActionLink("Create New", "Create")  

</p>
<div id="dailydeal">
    @Ajax.ActionLink("Click here to see today's special!", "Create",
                     "Position",
                     new AjaxOptions{ 
                         UpdateTargetId="dailydeal", 
                         InsertionMode=InsertionMode.Replace, 
                         HttpMethod="POST",
                         LoadingElementDuration=5000,
                         LoadingElementId="progress"
                     })
</div>

<div id="progress">
    Loading...
</div>
<table>
    <tr>
        <th>
            name
        </th>
        <th>
            yearsExperienceRequired
        </th>
        <th>
            Actions
        </th>
    </tr>

@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.name)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.yearsExperienceRequired)
        </td>
        <td>
            @Html.ActionLink("Edit", "Edit", new { id=item.PositionID }) |
            @Html.ActionLink("Details", "Details", new { id = item.PositionID }) |
            @Html.ActionLink("Delete", "Delete", new { id = item.PositionID })
        </td>
    </tr>
}

</table>


_Create.cshtml (Partial view with the create form)

@{
    ViewBag.Title = "Create";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Create<h2>

@using (Html.BeginForm()) {
    @Html.ValidationSummary(true)
    <fieldset>
        <legend>Position</legend>

        <div class="editor-label">
            @Html.LabelFor(model => model.name)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.name)
            @Html.ValidationMessageFor(model => model.name)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.yearsExperienceRequired)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.yearsExperienceRequired)
            @Html.ValidationMessageFor(model => model.yearsExperienceRequired)
        </div>

        <p>
            <input type="submit" value="Create" />
        </p>
    </fieldset>
}

<div>
    @Html.ActionLink("Back to List", "Index")
</div>


Position Controller method
      /// <summary>
        /// Create form of the position
        /// </summary>
        /// <returns></returns>
        public PartialViewResult Create()
        {
            Thread.Sleep(2000);
            return PartialView("_Create");
        }

Answer 1

要使Ajax.*帮助程序（例如Ajax.ActionLink）起作用，请确保已引用jquery.unobtrusive-ajax.js脚本：

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

然后使用FireBug或Chrome开发者工具检查AJAX请求，并查看可能失败的任何可能原因。

Answer 2

UpdateTargetId = “dailydeal”

div在哪里？该div需要存在才能更新。

http://msdn.microsoft.com/en-us/library/system.web.mvc.ajax.ajaxoptions.updatetargetid.aspx

Answer 3

从控制器中删除get或post属性

Answer 4

遇到同样的问题，我使用NuGet更新了Microsoft.jQuery.Unobtrusive.Ajax包，如mezoid的这篇有用的帖子所示

unobtrusive-ajax-form-for-partial-view

现在，验证在我的局部视图中完美运行！

使用asp.net mvc的Ajax部分视图无法正常工作

4 个答案: