web-dev-qa-db-ja.com

@ url.actionを使用して部分ビューを呼び出すjqueryを使用してクリック

@ url.actionの部分ビューを呼び出します。 url.actionを使用してレコードを表示していて、ユーザーがレコードをクリックしたときに部分ビューをロードしたいと思います。

これは、ユーザーがクリックしたときに部分ビューを呼び出すコードです。

<td>
<a href="@Url.Action("Details", new { id=item.TeamId})">
 @Html.DisplayFor(modelItem => item.TeamName)
</a>
</td>

これが私のDivで、部分ビューを配置しています

<div id="detailsPlace" class="dialog_content3" style="display:none"></div>
         @Html.Partial("_TeamDetails")
    </div>

これが私がレンダリングしたい私の部分的なビューです

@model light.ViewModels.ViewDetailTeam
@{
    var item = Model.Team;
}

    <div class="dialogModal_header">@Html.Label(item.TeamName)</div>
    <div class="dialogModal_content">
        <div class="main-content">
            <div class="navi-but">
                    @Html.Label(item.TeamName)
                </div>
                    @Html.Label(item.Description)
                </div>
            </div>
        </div>

これが私のコントローラーです

public ActionResult Details(int id)
        {

            lightCoreModel.User loggedInUser = new lightCoreModel.User();


                ViewDetailTeam viewDetailTeam = new ViewDetailTeam();
                ViewData["DetailModel"] = viewDetailTeam;
                viewDetailTeam.Retrieve(id);
                return PartialView("_TeamDetails",viewDetailTeam);

        }
now i am facing this problem with pop up its showing me the following screen.

enter image description here

jqueryasp.net-mvcrazorurl.action
5
Reshav

これを行うにはAjaxが必要です。まず、次のコードを使用してビューにスクリプトブロックを追加します。

<script type="text/javascript">
    $(function () {
        $('.details').click(function () {
            var $buttonClicked = $(this);
            var id = $buttonClicked.attr('data-id');

            $.ajax({
                url: '@Url.Action("Details")',
                type: 'GET',
                data: { id: id },
                success: function (partialView) {
                    $('#detailsPlace').html(partialView);
                    $('#detailsPlace').show();
                }
            });
        });
    });
</script>

次に、アンカータグを次のように変更します。

<a href="#" class="details" data-id="@item.TeamId">Details</a>

詳細のクラスを持つ要素がクリックされるたびに、ajax呼び出しが発生します。クリックすると、data-id属性に格納されているIDがコントローラーに渡されます。コントローラーが部分ビューを戻すと、部分ビューがajax呼び出しの成功関数に読み込まれ、表示がnoneに設定されているため、detailsPlaceが表示されます。

5
JB06

Ajaxを使用して、ページ全体を更新せずにリストの詳細を取得し、部分的なビューをレンダリングできます

コマンドを使用してパッケージjQuery.Ajax.Unobtrusiveを最初にインストールします

Install-Package jQuery.Ajax.Unobtrusive

リストの前にjQuery-xxxx.jsとjquery.unobtrusive-ajax.jsが含まれていることを確認してください

ユーザーがクリックしたときに部分ビューを呼び出すコードを変更する

<a  href="@Url.Action("Details", new { id=item.TeamId})" data-ajax='true' data-ajax-update='#detailsPlace' data-ajax-mode='replace'>

または

@Ajax.ActionLink("Details", 
                 "Details", 
                  new { id=item.TeamId}, 
                 new AjaxOptions { HttpMethod = "GET", 
                 InsertionMode = InsertionMode.Replace, 
                 UpdateTargetId = "detailsPlace"})

ビューの上部にこのコードを追加します

if (Request.IsAjaxRequest())
{
   Layout=null;
}

詳細については、 http://chsakell.com/2013/05/12/mvc-unobtrusive-ajax/ をご覧ください。

4
Ahmed Salah Hussein

PartialViewをdivに配置する場合は、Ajaxヘルパーを試してみてください。まず、ActionResultをPartialViewResultに変更してみてください。 Ajaxヘルパーの定義の1つは次のとおりです。

@Ajax.ActionLink("Display name",
        "Your partial action name",
        "Controller name",
        new { /* object values */ }, // e.g. ID = yourmodel.ID or null
            new AjaxOptions {
                HttpMethod = "GET",
                UpdateTargetId = "your div id without #",
                InsertionMode = InsertionMode.Replace
            })
1
Celdor