如何在单击相应链接时显示特定的MVC分部视图

本文关键字：MVC 视图 显示 单击 链接 | 更新日期: 2023-09-27 18:06:47

我使用MVC 5和Visual Studio 2015。我想做一件很简单的事……

我有一个带有控制器和NO MODEL的页面。我不认为我需要一个模型，我没有访问或捕获任何数据;我只是想根据用户点击的内容显示不同的信息(视图)。

我有一个图标栏在页面的顶部(这是它自己的部分)，当你点击一个图标，它对应于一个特定的部分视图。单击另一个图标，以前的信息消失，新的信息显示。很简单，对吧?我运气不好。

我发现至少有无数篇文章解释了如何为一个部分做到这一点。但是，如果我想有条件地显示信息，不是在一个列表中，不是在一个数据库中，但只是一个部分视图连接到一个链接?

下面是一些代码…

我的控制器

public class MyController : Controller {
    public ActionResult Index() {
        return View();
    }
    public ActionResult _about() {
        return View();
    }
    public ActionResult _business() {
        return View();
    }
    public ActionResult _finance() {
        return View();
    }
    public ActionResult _jobs() {
        return View();
    }
    public ActionResult _locations() {
        return View();
    }
    public ActionResult _marketing() {
        return View();
    }
    public ActionResult _programming() {
        return View();
    }
}

}

索引视图(本页的主视图)的标记:

@using System.Configuration
@{ViewBag.Title = "Index";}
@Html.Partial("_cteIconBar") <!-- This is the row of icons -->
<div class="padding-top-50" id="partial">  
    @Html.Partial("_about")  <!-- I do want to display the "about" partial when a user first lands on the page.-->
</div>
<div class="padding-top-50" id="partial" style="display: none">  <!-- this is not working... *sigh* -->
    @{Html.RenderAction("_business"); }
    @{Html.RenderAction("_programming"); }
    @{Html.RenderAction("_finance"); }
    @{Html.RenderAction("_marketing"); }
</div>

我的图标栏标记:

<div class="row">
    <div class="col-lg-12 col-xs-12">
        <div class="text-center margin-bottom icon-container">
            <ul>
                <li class="icon-bar-cte" id="about">
                    <a role="button" href="@Url.Action("_about", "CTE")">
                        <i class="icon-aboutInfo cte-icon"></i>
                    </a>
                </li>
                <li class="icon-bar-cte" id="business">
                    <a role="button" class="cte-icon" href="@Url.Action("_business", "CTE")">
                        <i class="icon-business cte-icon"></i>
                    </a>
                </li>
                <li class="icon-bar-cte">
                    <a role="button" href="@Url.Action("_finance", "CTE")">
                        <i class="icon-finance cte-icon"></i>
                    </a>
                </li>
                <li class="icon-bar-cte">
                    <a role="button" href="@Url.Action("_marketing", "CTE")">
                        <i class="icon-marketing cte-icon"></i>
                    </a>
                </li>
                <li class="icon-bar-cte">
                    <a role="button" href="@Url.Action("_programming", "CTE")">
                        <i class="icon-programming cte-icon"></i>
                    </a>
                </li>
                <li class="icon-bar-cte">
                    <a role="button" href="@Url.Action("_jobs", "CTE")">
                        <i class="icon-jobs cte-icon"></i>
                    </a>
                </li>
                <li class="icon-bar-cte">
                    <a role="button" href="@Url.Action("_locations", "CTE")">
                        <i class="icon-location-marker cte-icon"></i>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>

我对其中一个部分的标记(它们在不同的单词中都是相同的)。为了让你高兴，我把"嬉皮Ipsum"换成了。

<div class="container collapse in" id="about" aria-expanded="true">
    <div class="row padding-bottom-50">
        <div class="col-lg-8 col-lg-offset-2 col-md-8 col-md-offset-2 col-sm-12">
            <h2 class="green">Some Hippie Ipsum for You!</h2>
            <p><strong>What is Career Technical Education?</strong></p>
            <p>Equinox plant consciousness midwifery embracing and moving towards djembe craniosacral, dolphin Hafiz ecstatic dance higher cosmic force spoken word. Prayer flags fair trade what quantum theory says, healing tonic non-profit co-create impermanent hemp seed.</p>
            <br />
            <p><strong>Why is Hippie Ipsum important?</strong></p>
            <p>Closing circle himalayan sea salt multi-dimensional honoring your truth, forest birth name. Tofurkey native american ancestry diva cup human potential yoni, bioneers the buddha sunset. Animal totem deep cleansing emotional release one taste life coach compostable toilet, be the change astrological mercury retrograde holistic.</p>
        </div>
    </div>
</div>

.padding-top-50{
  padding-top:50px;
  }

如何在单击相应链接时显示特定的MVC分部视图

您想要实现的最简单的解决方案是使用AJAX，这样您就可以将视图注入容器。

让我们从头开始:

1)你必须返回PartialView()而不是常规的View()

public ActionResult _about() {
    return PartialView();
}
不需要，但是我会改变你的菜单标记中的一些东西。注意data-url而不是href。 
<li class="icon-bar-cte" id="business">
    <a href="#" role="button" class="cte-icon" data-url="@Url.Action("_business", "CTE")">
        <i class="icon-business cte-icon"></i>
    </a>
</li>

3)最重要的部分是下面的jQuery。根据你的需要，你可以在注入视图时使用append而不是html。

$(document).on('click','.cte-icon',function(e){
    e.preventDefault();
    var url = $(this).data('url');
    $.ajax({
       url: url,
       type: 'GET'
    }).done(function(response){
       $('#partial').html(response);
    });
});

还有另一种方法，如果你想更"香草". net MVC是使用actionlinks和返回部分视图从你的控制器动作。像这样:

public ActionResult _programming() 
{
        PartialView("~/Views/YourPartialsPath/_programming.cshtml");
}

在你的视图中加上这个:

    @Html.ActionLink("Html element text", 
                     "_programming", 
                     "MyController", 
                      new { controller = "MyController" }, 
                      new { @class = "MaybeYouWantAClassOnTheHtmlElement" })

如果你想，你可以把你的网站结构成一个单页应用程序，最初加载一个视图作为你的"基础结构"容器。然后，这个页面将加载一组由侧面/顶部菜单栏和"主页"容器组成的部分。这个主页也可以负责加载一些javascript，你想要在所有以后加载的部分中运行(可能是一个显示/隐藏ajax.gif图像的函数)

让我们假设你把这个放在你的初始页面加载。也许你把它放在你的:'Views'Home'index.cshtml或者甚至你的:'Views_Layout.cshtml

        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-left">
                @{ Html.RenderAction("TopMenuRenderer", "Menu");}
            </ul>
            <ul class="nav navbar-nav navbar-right">
                @{ Html.RenderAction("UserMenuRenderer", "Menu");}
            </ul>
        </div>
然后创建一个名为Menu 的控制器
namespace WebPortal.Web.Controllers
{
    public class MenuController : Controller
    {
        [ChildActionOnly] //for ajax call to controller remove this annotation
        public ActionResult TopMenuRenderer()
        {
            //return PartialView();
            if (User.IsInRole(Role.Admin.ToString()) ||
                User.IsInRole(Role.SuperAdmin.ToString()))
            {
                return PartialView("~/Views/Menu/_TopMenu.cshtml");
            }
            return null;
        }
        [ChildActionOnly]
        public ActionResult UserMenuRenderer()
        {
            if (User.Identity.IsAuthenticated)
                return PartialView("~/Views/Menu/_UserMenuAuthenticated.cshtml");
            else
                return PartialView("~/Views/Menu/_UserMenuNotAuthenticated.cshtml");
        }
        [ChildActionOnly] 
        public ActionResult SideMenuRenderer()
        {
            //you could put some user checks here if you want to limit some of the loaded meny options depending on the user type.
            if (User.IsInRole(Role.Admin.ToString()) ||
                User.IsInRole(Role.SuperAdmin.ToString()))
            {
                return PartialView("~/Views/Menu/_SideMenu.cshtml");
            }
            return null;
        }
}

}

相关文章：