1

私は mvc 4 Web サイトを構築しましたが、別のセクションが jQuery で読み込まれた場合にメイン レイアウト ページが更新されないように構築しました。ナビゲーターと jQuery スクリプトを _Layout.cshtml に配置しました。

<ul id="menu" class="menu-items">
                <li><a id="Item1" href="#" onclick="loadPage(this.id)">Item1</a></li>
                <li><a id="Item2" href="#" onclick="loadPage(this.id)">Item2</a></li>
                <li><a id="Item3" href="#" onclick="loadPage(this.id)">Item3</a></li>
                <li><a id="Item4" href="#" onclick="loadPage(this.id)">Item4</a></li>
            </ul>

</body>

<script>

    function loadPage(action) {

        $.post("/Home/" + action, function (data) {
            $(content).html(data);
        });
    }
</script>

それから私は私のコントローラーを持っています：

namespace MyApp.Controllers
{
public class HomeController : Controller
{

    public ActionResult Index()
    {
        return View();
    }

    [HttpPost]
    public ActionResult Item1()
    {
        if (Request.IsAjaxRequest())
        {
            return PartialView();
        }
        return View();
    }

    [HttpPost]
    public ActionResult Item2()
    {
        if (Request.IsAjaxRequest())
        {
            return PartialView();
        }
        return View();
    }

などなど

メイン コンテンツ ビュー (Web サイトがブラウザーに読み込まれるときの index.cshtml) を 1 つだけ使用する方法がわからないことを除いて、すべて正常に動作します。item1 の onlick をトリガーすると、メイン コンテンツに戻るように、index.cshtml にある同じコンテンツを item1.cshtml に配置する必要があります。私が持っている唯一のルート構成はデフォルト用で、最初はインデックスに設定されています。

public static void RegisterRoutes(RouteCollection routes)
    {
        routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

        routes.MapRoute(
            name: "Default",
            url: "{controller}/{action}/{id}",
            defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
        );
    }

私が望むのは、メイン コンテンツ ページを 1 つだけ使用できるようにすることですが、Item1 をクリックしたときに ajax 呼び出しでメイン コンテンツに戻ることができるようにすることです。誰かが私が何をする必要があるか知っていますか? メインコンテンツを更新したいときに両方のビューを更新しなければならないのは少しやり過ぎのようです。

また、他の Web 開発者もこのコードを気に入ると思います。特に、私のようにバンドのウェブサイトを構築している場合はなおさらです。デモ ソング メディア プレーヤーを _layout.cshtml ページに配置して、ユーザーが他のセクションをクリックしても更新されないようにすることができます (つまり、更新すると、メディア プレーヤーが停止します)。このデザインにより、ユーザーは曲の再生中に Web サイト全体をナビゲートできます。

私は JavaScript にかなり慣れていないので、アンカー タグを使用するよりも優れた onclick ハンドラーを作成できたと確信しています。しかし、私の主な問題は、index.cshtml と item1.cshtml のジレンマです。

4

1 に答える 1

3

私が間違っている場合は訂正してください: ItemX リンクをクリックしたときにページの一部を更新したい場合、コントローラー メソッド ItemX は Ajax 経由でのみ使用されます (単一ページ アプリを構築しているため)。

この場合、次のようなことができます。

Cshtml

<ul id="menu" class="menu-items">
    <li><a id="Item1" href="#" onclick="loadPage(this.id)">Item1</a></li>
    <li><a id="Item2" href="#" onclick="loadPage(this.id)">Item2</a></li>
    <li><a id="Item3" href="#" onclick="loadPage(this.id)">Item3</a></li>
    <li><a id="Item4" href="#" onclick="loadPage(this.id)">Item4</a></li>
</ul>

<div id="container">
</div>

</body>

<script>
    function loadPage(action) {
        $.post("/Home/" + action, function (data) {
            $("#container").html(data);
        });
    }
    // Will load Item1 via Ajax on page load
    loadPage('Item1');
</script>

ホームコントローラー

[HttpPost]
public ActionResult Item1()
{
    return PartialView();
}

PartialViews には、現在のアイテムに固有の HTML のみを含める必要があります。

アップデート

Ajax 呼び出しを回避したい場合は、cshml でもこれを行うことができます

...
</ul>

<div id="container">
    @Html.Partial("Item1PartialView")
</div>

</body>
...
于 2013-01-13T04:11:32.290 に答える