淡出局部视图

时间:2016-02-10 11:34:14

标签: javascript jquery html asp.net-mvc

我有一个mvc asp.net c#app

我有2页。

加载第一页。

在第一页上,用户可以按下调用我的jquery功能的按钮。 此函数加载局部视图。

这很好用

我认为看起来不错的是从第1个div内容淡化/混合到2个div内容。

可以这样做吗?

我的_Layout.cshtml页面的一部分:

<div id="mainContent">
    @RenderBody()           
</div>

我的索引页:

@{
    ViewBag.Title = "Welcome";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@{Html.RenderPartial("Welcome2", null); }

我的欢迎2页:

@{
    ViewBag.Title = "Welcome2";
    Layout = null;
}

<div id="#content1">
    @Html.Hidden("MyURL", @Url.Action("Lite", "Service"))
    <div id="divWelcome" style="margin-top:50px;">
        <div id="headerimg" style="position: relative;">
            <div style="position: absolute; bottom:250px; left:30px; width: 550px; font-family:DIN; font-size:23pt; font-weight:600; color: white; letter-spacing:0.01em;">
                We offer Cloud solutions for small businesses to help them manage their workflow requirements
            </div>

            <hr style="position: absolute;height:6px; width: 490px; bottom:200px; left:30px; " />

            <div style="position: absolute;width: 550px; bottom:150px; left:30px;  font-family:DIN; font-size:14pt; font-weight:500; color: white; letter-spacing:0.01em;">
                Our core sectors of expertise are professional services, data management and outsourcing.
            </div>
        </div>
    </div>
</div>

我的jquery函数:

$("#my_button").click(function () {
    $('#mainContent').load(url);
    return false;
});

我的控制员:

public ActionResult Index()
{
    Response.Redirect("~/Welcome");
    ViewBag.Title = "Home Page";
    return View();
}

[Route("~/Welcome")]
public ActionResult Welcome()
{
    ViewBag.Title = "Welcome Page";
    return View();
}

[HttpGet]
[Route("~/Welcome2")]
public ActionResult Welcome2()
{
    return PartialView();
}

我很欣赏答案存在于我的jquery函数中,但我认为如果要求这样做,我会发布整个事情

编辑:

将jquery更改为:

$("#divHomeBanner").click(function () {
    var url = '/Welcome2';    
    $('#divPager').load(url);
    $('#divPager').show('slow')
    return false;
});

在我的布局中:

<div id="mainContent">
    <div id="divPager" style="display:none;"></div>
    @RenderBody()           
</div>

但没有改变 - 页面没有显示

0 个答案:

没有答案