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

I'm trying to learn and create a website in using asp.net mvc and I am now confused compared to using webforms. So,

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

I have 2 divs.

我有2个div。

div1 contains an unordered list, which is used as the navigation strip

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 contains the would be contents depending on which navigation item in chosen in div one.

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

My question problem is- every time I click one of the navigation items, the entire page reloads therefore all my jquery manipulation of css properties of all navigation items are lost in Div1. Div 2 correctly changes its contents though.

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

How can I preserve the current css class state in div1 so that when I highlight a navigation item upon mouse clicking, the css property persists? I mean force that only div2 refreshes or something like that.

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

In controller, this is what I have:

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

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

I also realize that the url changes every page load.

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

2 个解决方案

#1

Instead of Html.ActionLink, you need Ajax.Actionlink http://msdn.microsoft.com/en-us/library/system.web.mvc.ajax.ajaxextensions.actionlink(v=vs.108).aspx

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

In one of the AjaxOptions arguments (UpdateTargetId) specify the div you wish to replace.

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

Also, make sure you are returning partial views into that div, or you will put an entire page's markup into it. It might help to change your ActionResults to PartialViewResults to help you remember what it's truly doing.

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

Here is an example for you:

这是一个例子：

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

#2

If you are trying to refresh div using Jquery you don't need ActionLink. Usy load() function. And change ActionResults in you controller to return PartialView() instead View().

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

So, in you 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>

And in your Controller:

在您的控制器中：

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

    //
    // GET: /ie/Two

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

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

#1