Question

我正在尝试使用asp.net mvc学习和创建一个网站，与使用webforms相比，我现在感到困惑。所以，

我有2个div。

div1包含一个无序列表，用作导航条

<ul id="navigation_list">
  <li id="navigation_items_1" class="navigation_items">@Html.ActionLink("ONE", "One")</li>
  <li id="navigation_items_2" class="navigation_items">@Html.ActionLink("TWO", "Two")</li>
  <li id="navigation_items_3" class="navigation_items">@Html.ActionLink("THREE", "Three")</li>
</ul>

div2包含的内容取决于div中选择的导航项目。

我的问题是 - 每次单击其中一个导航项时，整个页面都会重新加载，因此我在Div1中丢失了所有导航项的css属性的jquery操作。 Div 2正确地改变了它的内容。

如何在div1中保留当前的css类状态，以便在鼠标单击时突出显示导航项时，css属性是否仍然存在？我的意思是强制只有div2刷新或类似的东西。

在控制器中，这就是我所拥有的：

    public ActionResult Index()
    {
        return View(something.ToList());
    }

    //
    // GET: /ie/One

    public ActionResult One()
    {
        return View(something.ToList());
    }

    //
    // GET: /ie/Two

    public ActionResult Two()
    {
        return View(something.ToList());
    }

我也意识到网址会改变每个网页的负载。

Answer 1

而不是Html.ActionLink，您需要Ajax.Actionlink http://msdn.microsoft.com/en-us/library/system.web.mvc.ajax.ajaxextensions.actionlink(v=vs.108).aspx

在其中一个AjaxOptions参数（UpdateTargetId）中指定要替换的div。

另外，请确保将部分视图返回到该div，或者将整个页面的标记放入其中。将ActionResults更改为PartialViewResults可能有助于您记住它真正在做什么。

以下是您的示例：

@Ajax.ActionLink("ONE", "One", null, new AjaxOptions { UpdateTargetId = "div2" })

Answer 2

如果您尝试使用Jquery刷新div，则不需要ActionLink。 Usy load（）函数。并在您的控制器中更改ActionResults以返回PartialView（）而不是View（）。

所以，在你看来：

$(function () {
$('.one').click(function(){$('.firstcontent').load('/Home/One')}):
$('.two').click(function(){$('.secondcontent').load('/Home/two')}):
$('.three').click(function(){$('.thirdcontent').load('/Home/three')}):
});

<ul id="navigation_list">
  <li id="navigation_items_1" class="navigation_items"><a href="#" class="one">one</a></li>
  <li id="navigation_items_2" class="navigation_items"><a href="#" class="two">two</a></li>
  <li id="navigation_items_3" class="navigation_items"><a href="#" class="three">three</a></li>
</ul>

<div class="firstcontent"></div>
<div class="secondcontent"></div>
<div class="thirdcontent"></div>

在你的控制器中：

public ActionResult One()
    {
        return PartialView(something.ToList());
    }

    //
    // GET: /ie/Two

    public ActionResult Two()
    {
        return PartialView(something.ToList());
    }

     public ActionResult Three()
    {
        return PartialView(something.ToList());
    }

如何保留元素的当前css类状态，如div？

2 个答案: