使用Ajax更新页面的一部分

时间:2014-11-27 20:23:36

标签: c# ajax asp.net-mvc razor

使用ASP.NET MVC 5,我试图让一个菜单系统工作,点击一个条目更新页面的一部分而不进行完整的页面刷新。我的问题是Ajax调用有效,但如果我使用'return View()'从动作中刷新整个页面;我尝试'返回PartialView()',但这会产生一个只有部分视图渲染的新页面。

菜单位于_Layout.cshtml中,菜单项为:

@Ajax.MyActionLink(
  "<span class='fa fa-image'></span> Address Book",
  "Test",
  "Test",
  new AjaxOptions {
    UpdateTargetId = "page-content",
    InsertionMode = InsertionMode.Replace,
    HttpMethod = "GET",
  }
)

MyActionLink如下:(稍微修改了我在这里找到的一些代码)

public static IHtmlString MyActionLink(
  this AjaxHelper ajaxHelper,
  string linkText,
  string actionName,
  string controllerName,
  AjaxOptions ajaxOptions)
{
  var targetUrl = UrlHelper.GenerateUrl(null, actionName, controllerName, null, ajaxHelper.RouteCollection,
  ajaxHelper.ViewContext.RequestContext, true);
  return MvcHtmlString.Create(ajaxHelper.GenerateLink(linkText, targetUrl, ajaxOptions ?? new AjaxOptions(), null));
}

private static string GenerateLink(
  this AjaxHelper ajaxHelper,
  string linkText,
  string targetUrl,
  AjaxOptions ajaxOptions, 
  IDictionary<string, object> htmlAttributes)
{
  var a = new TagBuilder("a") {
    InnerHtml = linkText
  };
  a.MergeAttributes<string, object>(htmlAttributes);
  a.MergeAttribute("href", targetUrl);
  a.MergeAttributes<string, object>(ajaxOptions.ToUnobtrusiveHtmlAttributes());
  return a.ToString(TagRenderMode.Normal);
}

目标如下:

<div class="page-content-wrap" id="page-content">
  @RenderBody()
</div>

控制器和视图是:

public class TestController : Controller {
    public ActionResult Test() {
        return View();
    }
}


<p>
    <h1 >Hopfully this test will work!</h1>
    <br />
    <br/>
    <p align="center">Partial View!</p>
</p>

谢谢!

1 个答案:

答案 0 :(得分:0)

我猜测使Ajax调用工作所需的javascript库丢失/未加载。没有它们,单击链接不会被捕获,链接就像普通链接一样工作。