jquery – 关于路由和部分视图的MVC 3的SEO建议

<a class="main" href="/Home/Contact">Contact Us</a>

ns.BindNavigation = function () {
    $(".nav-bar a").click(function (e) {
        $("#Content").load(this.href);
        return false;
    });
};

当您从控制器操作返回时,MVC3会执行一些特殊操作.当您从控制器返回部分视图结果(返回PartialView();)时,您可以引用“完整视图”,并且剃刀引擎将忽略该视图的布局文件并仅返回内容部分.在您的情况下,您可以检查请求是否是AJAX请求.基于此,返回所请求URL的部分视图的完整视图.您可以在MVC3的默认“Internet站点”模板上尝试/ expirament,仅更改两个文件.

首先,您的主页/索引视图：

@{
    ViewBag.Title = "Home Page";
}

<h2>@ViewBag.Message</h2>
<p>
    @Html.ActionLink("This is AJAXy","About","Home",null,new{@class="ajax"})
</p>

<div id="AjaxContent"></div>

<script type="text/javascript">
    $(document).ready(function () {
        $(".ajax").click(function (e) {
            e.preventDefault();
            alert("clicked");
            $.ajax({
                url: this.href,dataType: 'html',success: function (data) {
                    $('#AjaxContent').html(data);
                    alert('Load was performed.');
                }
            });
        });
    });
</script>

我是AJAXing主页/关于操作的链接.在默认模板中,您仍然在顶角的默认模板导航部分中有完整的请求链接以进行测试.

接下来,您的家庭控制器

使用System.Web.Mvc;

namespace MvcApplication6.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            ViewBag.Message = "Welcome to ASP.NET MVC!";

            return View();
        }

        public ActionResult About()
        {
            if(Request.IsAjaxRequest())
            {
                return this.PartialView();
            }
            return View();
        }
    }
}

现在,只有这两项内容从默认项目模板中更改,单击主导航中的“关于”链接可以完整请求并显示“关于”页面,包括页面标题,所有头部信息等.但是,单击Home / Index视图中的ajax链接将对该信息执行AJAX请求.您将看到AjaxReponse div仅填充了About视图的HTML,其他任何东西(布局等)都不会出现.

实现这样的东西不仅有助于你的SEO,而且不使用JavaScript的人仍然可以使用你的网站,完全运作.

编辑

在上面的例子中,你不能使用.load函数(至少在我的测试中).原因：.load没有设置X-Requested-With标头来标识它是一个AJAX请求.我确信有一些解决方法,但注意到你正在使用它,并认为如果你选择走这条路线可能会造成旅行危险.