ajax - ASP.NET basic site structure for navigation

Question

I have now browsed many forums for answer to a quite basic question, but to my surprise I can't find a good example of a very basic design that most sites uses. I am not new to programming but it was a while ago I worked more substantial with it and I am totally new to ASP.NET. I am currently working with VS2010 and building an ASP.NET MVC 3 site from scratch. The site is AJAX enabled and I am currently using both an According control for left pane navigation and a TabContainer for top tab navigation.

Everything so far is included in one master page, and the basic problem is that when selecting navigation links in the left/top menus, the entire page reloads and destroys states for the navigational menus. Also, there is totally unnecessary flickering and I see no reason for reloading the entire page, I only want to change contents of the "main area" without touching the navigation menus.

The site structure is currently built up with <DIV> elements which makes the design quite straight forward and a structure of CSS files provides great flexbility and control. From recommendations I would like to do whatever I can to avoid obsolete solutions such as IFrames. I want to make a foundation for how this can be done in a modern and flexible way, with as few compromises as possible. It is important since the system I have started might be worked on by an entire team after having passed a number of decision forums.

I have as I as said browsed quite extensively for solutions, and found many explanations on the concept of master pages that gives me input to what my problems seems to be: my navigation menus are bound to a master page, a master page is really only a "user control" that connects tightly to the content pages and these merged pages reload when I select a navigation link. And that is not supposed to happen, it is not acceptable.

I have also tried to wrap the loading of the navigational panels in "!IsPostBack" conditions, but I've come to the conclusion that the problem is not PostBack:s, the problem is that a click on a link/treelink/accordion pane in the left menu really requests a totally new page and so everything reloads and the former state is lost. Of course I could write code to store states and provide the "new page" with the last states, this would be a solution if nothing else is possible; but I really don't want to reload the entire page; I only want to reload the "main area" to decrease bandwidth need and also avoid flickering.

So I have searched for ways of only update the "main content contentplaceholder" and I see many questions on this subject but very few good answers, and especially not when I want to change the entire aspx page in the main area, not just update a number of controls (or dynamically create new ones/delete old ones etc). The reason for the urge to change the entire aspx page is that different pages will provide different functionality and it is not enough by simply manipulating some controls, but the main area should be loaded with another aspx page - from a development organisation perspective it is also good since different developers can then work on different areas of functionality in the full blown application.

I am willing to abandon the entire master page strategy, or used nested master pages, or wrap master pages in non-master pages, or use updatepanels, or use cross page postings or whatever. But I find no example of something that actually works that I can use as a start.

And, since this is basically at this point only client side updates, I can't really understand why this should become such a tricky thing to straigthen out.

So, very simply put my question is this: what would you consider to be the basic strategy for designing a site where I have navigational menus (top and left) that can load new aspx pages into a certain area (main area) and ONLY update this area and NOT the entire site.

If you can provide me with some description of this and of course preferably some demo site where only a portion of a site is updated with a new page but not the full page - it is as simple as that! - when this would be extremely welcome. Spent three days now browsing for a good recommedation and I just get more and more confused... :-(

Would be very grateful for directions.

/DT

Answer 1

まあ、おそらく一歩踏み出しました - あなたのコードは、ページを変更するという意味で機能します。しかし、私が知る限り、ページ全体がまだリロードされており、私が苦労しているのはメインコンテンツ領域だけではありません.

私がしたことは、あなたが提供したjavascriptコードを変更せずにマスターページに配置したことです。

編集Java関数が呼び出されていないように見えることに気付きました。したがって、アンカーは「標準」機能を提供します。これは手がかりになる可能性があります:-) javascriptを呼び出すにはどうすればよいですか(コードビハインドからも後述します)? 追加のエラーをチェックするためだけに、この回答の残りをそのままにしておきます。/編集

次に、左側のナビゲーション メニューの下部に 2 つのアンカーを配置しました (まだマスター ページにあります)。

<div id="navcol">

    <%-- other left menu stuff --%>

    <a href="../ContentPages/FutureStartPage.aspx" class="ajax_link">Link 1</a>
    <a href="../ContentPages/BusCoachStartPage.aspx" class="ajax_link">Link 2</a>

</div>

ターゲット div をメイン コンテンツ セクションとマスター ページに配置しました。また、contentplace ホルダー内に div id="ajax_container_wrapper" を配置し、div id="ajax_container_wrapper" 内に contentplaceholder を配置することもテストしましたが、残念ながら動作に違いは見られませんでした。

<div id="contentcol" runat="server">
    <div id="mpcpholder">
        <asp:ContentPlaceHolder ID="ContentPlaceHolderMainArea" runat="server">
        </asp:ContentPlaceHolder>
    </div>
    <div id="ajax_container_wrapper"></div>
</div>

ContentPlaceHolder も省略しようとしましたが、これは許可されていないようです。パーサーエラーが発生しました。

したがって、おそらく私は何か間違ったことをしましたが、上部と左側のメニューを含むページ全体がリロードされていることは明らかです.

また; メインコンテンツエリアのリロードのみで動作するようになれば; これは、たとえばツリービュー リンクからと、さらに重要なコード ビハインドからの両方で行う必要があります。その方法についてもアドバイスをいただければ幸いです。

ありがとう/DT

Answer 2

マスターページレイアウトを使用します。ナビゲーションContentPlaceHolder用 (必要な数だけ) とメイン コンテンツ用にもう 1 つ用意します。JQuery.ajax()次に、組み込みの ASP.NETなどを使用してUpdatePanel、必要に応じてコンテンツをメインの ContentPlaceHolder にロードできます。

コンテンツ自体に関しては、UserControls (.ascx ファイル) を使用します。デフォルト ページにコマンドを渡して、どのコントロールをロードするかを指示し、それをロードすることができます。

を使用して新しいコンテンツを強制的にロードできるため、私は個人的に ASP.NETs UpdatePanel を使用しUpdatePanel.Update();ます。

ただし、これが検索エンジンの最適化を必要とする実際の Web サイトの場合、URL が変更されないため、SEO が影響を受けるため、実行が難しい場合があります。

これは大まかな例ですが、HTH.

編集：

私は2つのことをします：

1. PlaceHolderを default.aspx に ( 内に)追加UpdatePanelし、コード ビハインドでパブリック変数として公開して、外部からアクセスできるようにします。
2. を公​​開して、UpdatePanel外部からアクセスできるようにします。

したがって、デフォルトでは次のようになります。

<asp:Content id="Content1" runat="server" contentplaceholderid="cphContent">
    <asp:UpdatePanel id="updMain" runat="server" UpdateMode="Conditional">
        <ContentTemplate>
            <asp:PlaceHolder id="phMain" runat="server" />
        </ContentTemplate>
    </asp:UpdatePanel>
</asp:Content>

ナビゲーション コントロールで、すべてのナビゲーション リンクに対してこれを行います (読み込まれるコントロールに合わせて OnClick を変更します - これはリピーターで動的に行うことができます)。

<asp:LinkButton id="lbItem" runat="server" onClick="LoadControl1" />

次に、（ナビゲーションの）コードビハインドで次のことができます。

protected void LoadControl1(object sender, EventArgs)
{
    MyControl Con = (MyControl)LoadControl("~/MyControl.ascx");
    ((Default)Page).phMain.Controls.Add(Con);
    ((Default)Page).updMain.Update();
}

マスターページの複雑さなしで同じことを達成できることに注意してください。マスターページなしでやりたい場合はPlaceHolders、デフォルトで同じことをしてください。

編集2：

コンテンツを div にロードすることで、JQuery() を使用してこれを行うこともできます。ページ設定を行います (MasterPage または通常のページ構造)。次に、ナビゲーション リンクを次のように設定します。

<a href="http://www.mysite.com/page1.aspx" class="ajax_link">Link 1</a>

次に、いくつかの Javascript を用意します (JQuery を使用):

$(function(){
    $("a.ajax_link").click(function(e){
        ajaxLink(this, e);
    });
});

function ajaxLink(item, e) {
    var container = $("#ajax_container_wrapper");
    var link;

    if (e != null) {
        e.preventDefault();
    }
    link = $(item).attr("href") + " #ajax_container_wrapper"; //Omit the  + " #ajax_container_wrapper"; if you want to drag all the content in.
    container.load(link);
}

そして持っています：

<div id="ajax_container_wrapper"></div>

新しいページを表示する場所。

これは基本的に、各リンクで指定された新しいページを div にロードします。