27

部分ビューを動的にロードするにはどうすればよいですか？

つまり、私はこのビューを持っているということです。たとえばListProducts、製品などを含むドロップダウンリストをいくつか選択し、それらから選択した値を使用して、部分的なビューを埋めます。これは、非表示のdivにありますが、onchange()イベント後に表示され、特定の選択されたアイテムからのデータを使用します。

4

6 に答える 6

27

部分的なビューを返すコントローラーアクションでjQueryの$.load（）を使用します。
例えば：

HTML

<script type="text/javascript">
$(document).ready(function()
{
    $("#yourselect").onchange(function()
    {
        // Home is your controller, Index is your action name
        $("#yourdiv").load("@Url.Action("Index","Home")", { 'id' : '123' }, 
                                        function (response, status, xhr)
        {
            if (status == "error")
            {
                alert("An error occurred while loading the results.");
            }
        });
    });
});
</script>

<div id="yourdiv">
</div>

コントローラ

public virtual ActionResult Index(string id)
{
    var myModel = GetSomeData();
    return Partial(myModel);
}

意見

@model IEnumerable<YourObjects>

@if (Model == null || Model.Count() == 0)
{
    <p>No results found</p>
}
else
{
    <ul>
    @foreach (YourObjects myobject in Model)
    {
        <li>@myObject.Name</li>
    }
    </ul>
}
于 2012-07-03T14:57:19.993 に答える
5

これを行うには、次の手順に従います。コントローラで、部分ビューを返します。

    [HttpGet]
    public virtual ActionResult LoadPartialViewDynamically()
    {
        var query = _repository.GetQuery();
        return PartialView("_PartialViewName", query);
    }

次に、ビューに空のdivがあります

<div id="partialgoeshere"></div>

次に、jQueryを使用して部分ビューをロードします。

function LoadPartialView() {

    $.get("@Url.Action(MVC.ControllerName.LoadPartialViewDynamically())", { null }, function (data) {

        $("#partialgoeshere").empty();
        $("#partialgoeshere").html(data);

    });

}

お役に立てれば

于 2012-07-04T02:06:41.203 に答える
1

ドロップダウンの変更イベントを代わりに使用するだけで、この例のようなことができると思います。これは単純なjQuery呼び出しであり、 jQueryWebサイトで詳細を確認できます。

$("#dropdown").change(function() {

    $("#destination").load("/Products/GetProduct", $(this).val(),
       function(result) {
         // do what you need to do

       });
});

最初のパラメーターは、詳細を呼び出すために呼び出す必要のあるビューです。

2番目のパラメーターは選択された値です。

$ .load関数の3番目のパラメーターは、コールバック関数です。この関数では、結果を解析して、必要な処理を実行できます。

複数のselect $（this）.val（）がある場合は、選択したオプションの配列が表示されます。

Jsonオブジェクトのみを返したい場合は、この例に従うことをお勧めします。

于 2012-07-03T14:56:39.707 に答える
0

Ajaxを使用してください:)

http://api.jquery.com/jQuery.ajax/

例：

$.post(window.gRootPath + "Customer/PartialView", { Question: questionId})
.done(function (data) {
    $('#partialDiv').html(data.responceText);
});
于 2012-07-03T14:52:43.860 に答える
0

ajaxを使用してアクションを呼び出し、jQueryを使用して表示するページにhtml文字列を挿入することができます。

サーバ側：

部分ビューを文字列に レンダリングサーバー上の部分ビューをhtml文字列にレンダリングします。AJAXを介して部分ビューをASP.NETMVCページに追加する必要がある場合に便利です。

クライアント側：

$('#yourDdl').change(function()
{
  $.get('/InsertPartialViewUsingAjax', function (data) 
  {
     $('#container').html(data);
  });
});
于 2012-07-03T14:52:55.527 に答える
0

次の記事では、最小限のJavaScriptでそれを行う方法を説明しています。基本的に、応答オブジェクトにはJSONではなくhtmlを返します。

https://www.simple-talk.com/content/article.aspx?article=2118

于 2015-10-06T20:50:32.023 に答える