首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >在.NET MVC4中使用Ajax加载部分视图

在.NET MVC4中使用Ajax加载部分视图
EN

Stack Overflow用户
提问于 2013-01-26 04:33:21
回答 7查看 43.2K关注 0票数 16

我正在尝试遵循here的帖子,这很可能是错误的,以了解更多关于MVC中部分视图加载的知识。我知道MVC的基础知识,但是我想做更多我在开始使用MVC之前所做的ajax工作。

的目标是在Div内部加载部分视图。它只是将部分视图加载为整个页面,而不是在Div内部。

代码如下:

控制器:

代码语言:javascript
复制
namespace LDP.WebUI.Controllers
{
    public class TestController : Controller
    {
        //
        // GET: /Test/

        public ActionResult Index()
        {
            return View();
        }
        public PartialViewResult Page1()
        {
            return PartialView("Page1");
        }
        public PartialViewResult Page2()
        {
            return PartialView("Page2");
        }
    }
}

主视图(索引):(我也尝试了没有井号的"mainDiv“,不知道哪一个是正确的)

代码语言:javascript
复制
<script src="@Url.Content("~/Scripts/libs/jquery-1.8.2.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/libs/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#hideme').click(function () {
            $(this).hide();
        });
    });
</script>
<div>
@Ajax.ActionLink("Parial Page1", "Page1", new AjaxOptions { InsertionMode = InsertionMode.Replace, UpdateTargetId = "mainDiv"})
@Ajax.ActionLink("Parial Page2", "Page2", new AjaxOptions { InsertionMode = InsertionMode.Replace, UpdateTargetId = "mainDiv"})
<div id ='mainDiv'>

</div>
<button id ="hideme">Hide Me</button>
</div>

部分视图1 (Page1.cshtml)

代码语言:javascript
复制
@{
    ViewBag.Title = "Page1";
}

<h2>Page1</h2>

部分视图2 (Page2.cshtml)

代码语言:javascript
复制
@{
    ViewBag.Title = "Page2";
}

<h2>Page2</h2>

更新:我创建了一个全新的MVC4项目。默认情况下,Jquery 1.7.1和microsoft的unobtrusive-ajax库都提供了这一功能。它仍然在新页面中加载局部视图...

更新:不确定这是否有帮助,但以下确实达到了我想要的结果……但是仍然不能解决为什么这个解决方案不起作用的问题

代码语言:javascript
复制
<button>load about</button>
<script type="text/javascript">
    $("button").click(function () {
        $("#mainDiv").load("Test/Page2");
    });

</script>
    enter code here
EN

回答 7

Stack Overflow用户

回答已采纳

发布于 2013-01-26 05:12:00

UpdateTargetId = "#mainDiv"

  • make中的
  1. 丢弃#确保您的页面上引用了jquery.unobtrusive-ajax.min.js脚本。
票数 16
EN

Stack Overflow用户

发布于 2013-04-03 20:05:14

我将您的代码复制到一个全新的MVC4项目中,它工作得很好。

查看解决方案的屏幕截图:

希望这篇文章能给你一个提示,告诉你哪里可能出了问题。

票数 13
EN

Stack Overflow用户

发布于 2013-01-26 05:01:48

我通常使用JQuery加载分式,如下所示

代码语言:javascript
复制
$( document ).ready(function() {

  $("#lnkPage1").click(function( event ) {

    $('#mainDiv').load('Test/Pag1');

  });

  $("#lnkPage2").click(function( event ) {

    $('#mainDiv').load('Test/Pag2');

  });

});
票数 4
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/14529936

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档