0

我正在尝试使用 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 一中选择的导航项。

我的问题是 - 每次单击其中一个导航项时，整个页面都会重新加载，因此我对所有导航项的 css 属性的所有 jquery 操作都在 Div1 中丢失。不过，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());
    }

我也意识到 url 改变每个页面加载。

4

2 回答 2

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" })
于 2013-07-25T20:27:37.837 回答
0

如果您尝试使用 Jquery 刷新 div，则不需要 ActionLink。使用 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());
    }
于 2013-07-25T20:47:32.910 回答