11

Ajax を使用して div やその他の要素を ID で更新できるいくつかの例を見てきました。Razor ビューで Ajax を使用して次の作業を支援する例を見つけることができませんでした。

マイページは、上部が標準のメニュー、中央が本文、フッターです。ヘッダーとフッターを毎回更新する必要はありません。実際、私のページでは、ページのメニュー クリックとアクションリンクに基づいて Body のセクションを更新するだけで済みます。VS 2012 を使用して作成されたインターネット テンプレートを使用してこれをテストしています。コーディング設定に Razor ビューと C# を使用しています。

では、デフォルトの _Layout.cshtml ファイルが与えられた場合、Ajax 経由で About ページ、つまり RenderBody() セクションをどのようにロードしますか? RenderBody() 呼び出しをラップした div と一致する UpdateTargetId を使用して、1 つの div の周りの _Layout.cshtml ファイルに Ajax.BeginForm(...) を追加しようとしましたが、コントローラーから部分ビューを返しましたが、そうではありませんかなり正しい。私が得るのは私の部分的な見方だけです。(メニュー、フッターなどのない About ページ。About ページのコードのみ)

誰かがこの機能を示すリンクを親切に共有してくれますか、それとも私が望むことを行うコードを親切に共有してくれますか? 私が欠けているものについてのいくつかの説明はいいでしょうが、私がうまくいかなかった確かな例から推測できると確信しています. いつものように、あなたの時間は大歓迎です。

編集: Jasen の提案 _Layout.cshtml を使用する

<nav>
    <ul id="menu">
       <li>@Html.ActionLink("Home", "Index", "Home")</li>
       <li>@Ajax.ActionLink("About", "About", "Home", null, new AjaxOptions { HttpMethod = "get", UpdateTargetId = "body" }, new { })</li>
       <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
    </ul>
</nav>

....

私のdiv id="body"内

@RenderSection("featured", required: false)
<section class="content-wrapper main-content clear-fix">
    @RenderBody()
</section>

..... HomeController.cs

public ActionResult About()
{
    ViewBag.Message = "Your app description page.";

    return PartialView();
}

……

4

2 に答える 2

9

jquery を使用した簡単な例を次に示します。パーシャルはAboutで div に注入されid="body"ます。

<button>About</button>
<div id="body"></div>

$(function () {
    $("button").on("click", function(e) {
        $.get("Home/About").done(function(result) {
            $("#body").html(result);
        });
    });
));

コントローラ アクション

[HttpGet]
public ActionResult About()
{
    return PartialView("About");
}

について.cshtml

@{ Layout = null }
<h2>Home/About</h2>
<p>Blah... </p>

編集：おそらくより良い例は、代わりにリンクを使用することです

@Html.ActionLink("About", "About", "Home", null, new { @class="menu-button" })
<div id="body"></div>

$(function () {
    $(".menu-button").on("click", function(e) {
        e.preventDefault();
        var url = $(this).attr("href");
        $.get(url).done(function(result) {
            $("#body").html(result);
        });
    });
});

編集：Ajax.ActionLink()代わりに使用したいjqueryなしAjax.BeginForm()

@Ajax.ActionLink("About", "About", "Home", null, new AjaxOptions { HttpMethod = "get", UpdateTargetId = "body" }, new { })
<div id="body"></div>
于 2013-05-07T17:57:43.470 に答える
-1

あなたのHomeController.cs

public PartialViewResult About()
{
    ViewBag.Message = "Your app description page.";

    return PartialView();
}

_Layout.cshtmlインポートすることを忘れないでください：

    <script src="~/Content/Scripts/jquery-1.9.1.min.js" type="text/javascript"></script>
    <script src="~/Content/Scripts/jquery.unobtrusive-ajax.min.js" type="text/javascript"></script>
于 2016-08-25T17:21:34.587 に答える