0

asp.net mvc を使用して Web サイトを学習および作成しようとしていますが、Web フォームの使用と比較して混乱しています。そう、

私は2つの部門を持っています。

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 1 で選択されたナビゲーション項目に応じたコンテンツが含まれます。

私の質問の問題は、ナビゲーション項目の 1 つをクリックするたびにページ全体がリロードされるため、すべてのナビゲーション項目の 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 引数の 1 つ (UpdateTargetId) で、置換する div を指定します。

また、その 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 を変更して、View() ではなく PartialView() を返すようにします。

したがって、あなたのビューでは：

$(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 に答える