使用Ajax的局部视图加载.NET中MVC4 [英] using Ajax for partial view loading in .NET MVC4

问题描述

我想按照帖子<一href="http://stackoverflow.com/questions/12848219/how-to-call-partial-views-ajax-based-directly-on-index-page-of-a-view-mvc-wi">here,这很可能是错误的，要多学一点有关的局部视图加载的MVC。我知道MVC的基础知识，但希望做更多的AJAX的东西，我以前做之前，我开始使用MVC。

我们的目标是让局部视图负荷的DIV。它只是加载的局部视图作为整个页面，而不是div中。

code是如下：

控制器：

 命名空间LDP.WebUI.Controllers
{
    公共类的TestController：控制器
    {
        //
        // GET：/测试/

        公众的ActionResult指数（）
        {
            返回查看（）;
        }
        公共PartialViewResult第1页（）
        {
            返回PartialView（第1页）;
        }
        公共PartialViewResult第2页（）
        {
            返回PartialView（第2页）;
        }
    }
}
 

主视图（指数）：（我也尝试过mainDiv没有井号，wasen't确认这是正确的）

 ＆LT;脚本SRC =@ Url.Content（〜/脚本/库/ jQuery的-1.8.2.min.js）类型=文/ JavaScript的＆GT ;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =@ Url.Content（〜/脚本/库/ jquery.unobtrusive-ajax.min.js）类型=文/ JavaScript的＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的＆GT;
    $（文件）。就绪（函数（）{
        $（'＃hideme）。点击（函数（）{
            $（本）.hide（）;
        }）;
    }）;
＆LT; / SCRIPT＆GT;
＆LT; D​​IV＆GT;
@ Ajax.ActionLink（Parial第1页，第一页，新AjaxOptions {InsertionMode = InsertionMode.Replace，UpdateTargetId =mainDiv}）
@ Ajax.ActionLink（Parial第2页，第2页，新AjaxOptions {InsertionMode = InsertionMode.Replace，UpdateTargetId =mainDiv}）
＆LT; D​​IV ID ='mainDiv'＆GT;

＆LT; / DIV＆GT;
＆LT;按钮ID =hideme＆GT;隐藏我＆LT; /按钮＆GT;
＆LT; / DIV＆GT;
 

管窥1（Page1.cshtml）

  @ {
    ViewBag.Title =第1页;
}

＆LT; H2＆GT;第1页＆LT; / H＆GT;
 

局部视图2（Page2.cshtml）

  @ {
    ViewBag.Title =第2页;
}

＆LT; H2＆GT;第2页＆LT; / H＆GT;
 

更新： 我创建了一个全新的MVC 4项目。这来了，在默认情况下，使用jQuery 1.7.1，并从微软不显眼，Ajax库。它仍然加载局部视图在一个新的网页...

更新：不知道这会有所帮助，但下面确实达到我想要的结果。但是仍然没有解决的问题，为什么这个解决方案不起作用

 ＆LT;按钮＆GT;装载大约LT; /按钮＆GT;
＆LT;脚本类型=文/ JavaScript的＆GT;
    $（按钮）。点击（函数（）{
        $（＃mainDiv）的负载（测试/第二页）。
    }）;

＆LT; / SCRIPT＆GT;
    在这里输入code
 

解决方案

1. 在沟＃在 UpdateTargetId =#mainDiv
2. 确保您有 jquery.unobtrusive-ajax.min.js 在网页上引用的脚本。

I'm trying to follow the post here, which may very well be wrong, to learn a little more about partial view loading in MVC. I know the basics of MVC but want to do more of the ajax stuff I used to do before I started using MVC.

The goal is to have the partial view load INSIDE the div. Its just loading the partial view as the whole page, rather than inside of the Div.

Code is as follows:

Controller:

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");
        }
    }
}

Main View (Index): (I also tried "mainDiv" without the pound sign, wasen't sure which was right)

<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>

Partial View 1 (Page1.cshtml)

@{
    ViewBag.Title = "Page1";
}

<h2>Page1</h2>

Partial View 2 (Page2.cshtml)

@{
    ViewBag.Title = "Page2";
}

<h2>Page2</h2>

Update: I created a brand new MVC 4 project. This comes, by default, with Jquery 1.7.1 and the unobtrusive-ajax library from microsoft. It still loads the partial view in a new page...

Update: Not sure if this helps, but the following does achieve the result I want... But still doesn't solve the problem as to why this solution doesn't work

<button>load about</button>
<script type="text/javascript">
    $("button").click(function () {
        $("#mainDiv").load("Test/Page2");
    });

</script>
    enter code here

解决方案

1. ditch # in UpdateTargetId = "#mainDiv"
2. make sure you have jquery.unobtrusive-ajax.min.js script referenced on your page.

这篇关于使用Ajax的局部视图加载.NET中MVC4的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！