16

MVCでの部分的なビューの読み込みについてもう少し学ぶために、ここの投稿をフォローしようとしていますが、これは非常に間違っている可能性があります。私はMVCの基本を知っていますが、MVCを使い始める前に行っていたajaxのことをもっとやりたいと思っています。

目標は、部分ビューをdiv内にロードすることです。Div内ではなく、ページ全体として部分ビューをロードするだけです。

コードは次のとおりです。

コントローラ：

namespace LDP.WebUI.Controllers
{
    public class TestController : Controller
    {
        //
        // GET: /Test/

        public ActionResult Index()
        {
            return View();
        }
        public PartialViewResult Page1()
        {
            return PartialView("Page1");
        }
        public PartialViewResult Page2()
        {
            return PartialView("Page2");
        }
    }
}

メインビュー（インデックス）:(ポンド記号なしで「mainDiv」も試しましたが、どちらが正しいかわかりませんでした）

<script src="@Url.Content("~/Scripts/libs/jquery-1.8.2.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/libs/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#hideme').click(function () {
            $(this).hide();
        });
    });
</script>
<div>
@Ajax.ActionLink("Parial Page1", "Page1", new AjaxOptions { InsertionMode = InsertionMode.Replace, UpdateTargetId = "mainDiv"})
@Ajax.ActionLink("Parial Page2", "Page2", new AjaxOptions { InsertionMode = InsertionMode.Replace, UpdateTargetId = "mainDiv"})
<div id ='mainDiv'>

</div>
<button id ="hideme">Hide Me</button>
</div>

部分ビュー1（Page1.cshtml）

@{
    ViewBag.Title = "Page1";
}

<h2>Page1</h2>

部分ビュー2（Page2.cshtml）

@{
    ViewBag.Title = "Page2";
}

<h2>Page2</h2>

更新：新しいMVC4プロジェクトを作成しました。これには、デフォルトで、Jquery1.7.1とMicrosoftの目立たないajaxライブラリが付属しています。それでも、部分ビューが新しいページに読み込まれます...

更新：これが役立つかどうかはわかりませんが、以下は私が望む結果を達成します...しかし、この解決策が機能しない理由についてはまだ問題を解決していません

<button>load about</button>
<script type="text/javascript">
    $("button").click(function () {
        $("#mainDiv").load("Test/Page2");
    });

</script>
    enter code here
4

7 に答える 7

16
  1. 溝#にUpdateTargetId = "#mainDiv"
  2. ページでスクリプトが参照されていることを確認jquery.unobtrusive-ajax.min.jsしてください。
于 2013-01-25T21:12:00.123 に答える
13

コードを新しいMVC4プロジェクトにコピーしましたが、正常に機能します。

ソリューションのスクリーンショットを参照してください。

Ajax.ActionLinkを使用した新しいMVC4プロジェクト

これが何が間違っている可能性があるかについてのヒントを与えることを願っています。

于 2013-04-03T12:05:14.460 に答える
4

私は通常、JQueryを使用してこのようなパーシャルをロードします

$( document ).ready(function() {

  $("#lnkPage1").click(function( event ) {

    $('#mainDiv').load('Test/Pag1');

  });

  $("#lnkPage2").click(function( event ) {

    $('#mainDiv').load('Test/Pag2');

  });

});
于 2013-01-25T21:01:48.160 に答える
1 
@using (Ajax.BeginForm("AjaxViewCall", "Home", new AjaxOptions { UpdateTargetId = "result" }))   
{
    <p>
        <input type="submit" value="Ajax Form Action" />
    </p>
}

<div id="result></div>

ボタンをクリックすると、PartialViewを返すアクションが呼び出されます。Ajax.BeginForm呼び出しに「＃」は必要ありません。

于 2013-01-25T23:30:02.900 に答える
0

元の例で私が抱えていた唯一の問題は、スクリプトsrcパスの\lib\でした。デフォルトのMVC4Webアプリは、jsファイルを「Scripts\Lib」ではなく「Scripts」に配置します。スクリーンショットの例は正しいです。

<script src="@Url.Content("~/Scripts/jquery-1.8.2.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")"

また、元の例では、ViewBag.Titleを入力すると、これが機能しなくなります。

@{
    ViewBag.Title = "Some Title";
}
于 2013-04-30T15:42:29.920 に答える
0

これとまったく同じ問題が発生しました。定義されたdivではなく、ページ全体として部分ビューをロードします。

Bundlesthingy（？）が何をしているのか理解できなかったので_Layout.cshtml、ファイルが含まれていると誤って推測していました。jquery.unobtrusive-ajax.jsバンドルによって追加されていると思いました。

私の_Layout.cshtml見解では@RenderSection("scripts", required: false) 、それは英語でどれであるかを定義します。ビューに@scriptsというセクションを含めるかどうかはオプションです。したがって、含めない場合（@sectionスクリプト）はエラーはスローされませんが、含まない場合はAjaxが新しいページにレンダリングされるだけの症状が発生します。

それを修正するには：あなたのビューに以下を入れてください（私はそれを下に置きます...ViewBag.Title; }）

@section scripts{
    <script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
}

私の説明が少し初歩的なものである場合は申し訳ありませんが、私はこれに少し慣れていません。これが誰かを助けることを願っています。

于 2013-07-22T15:05:30.927 に答える
0

jsonデータまたはテーブルの部分ビューをロードします。フルフォーマットビューではありません。

success:function(data){
    alert(data);
    debugger;
    ('#div_id').data(data);
}

ここで、返されるデータはjsonデータまたは次のようなデータです

データ

。アラートを使用してデータを確認します。

于 2013-11-10T20:33:14.930 に答える