Question

我正在使用MVC 5和Visual Studio 2015.我有一件非常简单的事情我想做...

我有一个带控制器的页面，没有模型。我不相信我需要一个模型，我不会访问或捕获任何数据;我只想根据用户点击的内容显示不同的信息（视图）。

我在页面顶部有一个图标栏（这是它自己的部分），当你点击一个图标时，它对应一个特定的局部视图。单击另一个图标，先前的信息将消失，并显示新信息。容易腻到对吗？我没有运气。

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

以下是一些代码......

我的控制器

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>

我对其中一个部分的标记（它们在不同的单词中都是一样的）。为了你的愉快，我取代了一点“嬉皮益气”。

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

Answer 1

您希望实现的最简单的解决方案是使用AJAX，以便将视图注入容器。

所以让我们从头开始：

1）你必须返回PartialView（）而不是常规的View（）

public ActionResult _about() {
    return PartialView();
}

2）不需要，但我会在菜单标记中更改一些内容。请注意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);
    });
});

Answer 2

另一种方式，如果你想更多“vanilla”.NET MVC是使用actionlinks并从你的控制器动作返回部分视图。像这样：

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

在你的观点中提出这个：

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

如果您希望通过最初加载单个视图作为“基础结构”容器，您可以将您的网站构建为单页面应用程序。然后，该页面将加载一组部分，这些部分可能包括侧面/顶部菜单栏，也可能是“主页面”容器。这个主页面也可以负责加载你想在所有后来加载的部分中运行的一些javascripts（可能是显示/隐藏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;
        }
}

}

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

2 个答案: