0

ユーザーのリストを含むページを作成しようとしています。目標は、行の「詳細」リンクをクリックすると、javascript または jQuery を使用してページの部分ビューをレンダリングしたいので、ページをリロードする必要がないことです。私は多くの解決策を見つけました（たとえばthis）が、現時点ではjavascriptについてほとんど何も知らないため、機能させることができません。見つけたものをコードに接続する方法がわかりません。

これは私の部分的なビューです (これまでレンダリングを試みることさえできなかったので、正しいかどうかはわかりません):

@model AdminDMS.Models.User

<h2>Details</h2>

<fieldset>
    <legend>User</legend>

    <div class="display-label">
         @Html.DisplayNameFor(model => model.Guid)
    </div>
    <div class="display-field">
        @Html.DisplayFor(model => model.Guid)
    </div>

    <div class="display-label">
         @Html.DisplayNameFor(model => model.TrusteeType)
    </div>
    <div class="display-field">
        @Html.DisplayFor(model => model.TrusteeType)
    </div>

    <div class="display-label">
         @Html.DisplayNameFor(model => model.Username)
    </div>
    <div class="display-field">
        @Html.DisplayFor(model => model.Username)
    </div>

    <div class="display-label">
         @Html.DisplayNameFor(model => model.Email)
    </div>
    <div class="display-field">
        @Html.DisplayFor(model => model.Email)
    </div>

    <div class="display-label">
         @Html.DisplayNameFor(model => model.LastLogin)
    </div>
    <div class="display-field">
        @Html.DisplayFor(model => model.LastLogin)
    </div>

    <div class="display-label">
         @Html.DisplayNameFor(model => model.PasswordChanged)
    </div>
    <div class="display-field">
        @Html.DisplayFor(model => model.PasswordChanged)
    </div>

    <div class="display-label">
         @Html.DisplayNameFor(model => model.IsUsingTempPassword)
    </div>
    <div class="display-field">
        @Html.DisplayFor(model => model.IsUsingTempPassword)
    </div>
</fieldset>`

私は非同期コントローラーを使用しています。これらは私の詳細非同期アクションです。

    public void DetailsAsync(Guid guid)
    {
        if (userList == null || DateTime.Now > lastUpdate.AddMinutes(5))
        {
            AsyncManager.OutstandingOperations.Increment();
            client.GetUsersAsync();
            lastUpdate = DateTime.Now;
            AsyncManager.Parameters["guid"] = guid;
        }
    }

    public ActionResult DetailsCompleted(IEnumerable<AdminDMS.Models.User> users)
    {
        if (userList == null || !userList.Equals(users))
            userList = users.ToList<AdminDMS.Models.User>();
        return PartialView("Details", users.Single(user => user.Guid == (Guid)AsyncManager.Parameters["guid"]));
    }

そして、これはビューです：

@model List<AdminDMS.Models.User>

@{
    ViewBag.Title = "Users";
}

<h2>Users</h2>

<p>
    @Html.ActionLink("Create New", "Create")
</p>
<table>
    <tr>
        <th>
            Guid
        </th>
        <th>
            Username
        </th>
        <th>
            Email
        </th>
        <th>
            TrusteeType
        </th>
        <th>
            Last Login
        </th>
        <th>
            Last Password Change
        </th>
        <th>
            Temporary Password
        </th>
        <th></th>
    </tr>

@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.Guid)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Username)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Email)
        </td>
         <td>
            @Html.DisplayFor(modelItem => item.TrusteeType)
        </td>
         <td>
            @Html.DisplayFor(modelItem => item.LastLogin)
        </td>
         <td>
            @Html.DisplayFor(modelItem => item.PasswordChanged)
        </td>
         <td>
            @Html.DisplayFor(modelItem => item.IsUsingTempPassword)
        </td>
        <td>
            @Html.ActionLink("Edit", "Edit", new { item.Guid }) |
            @*@Html.ActionLink("Details", "Details", new { item.Guid })*@ |
            @Html.ActionLink("Delete", "Delete", new { item.Guid })
        </td>
    </tr>
}

</table>

<div class="detailsDiv">

</div>

コメントアウトされたアクションリンクを、最後に空のままになっている「detailsDiv」divの部分ビューをレンダリングするものに置き換えたいと思います。

前もって感謝します

アップデート：

私のコントローラーにはこのアクションがあります

public PartialViewResult Details(Guid guid)
        {
            AdminDMS.Models.User user = null;
            UserService.User serviceUser = client.GetUsers().Single(u => u.Guid == guid);
            user = new AdminDMS.Models.User(serviceUser.Guid, serviceUser.TrusteeType, serviceUser.Username, serviceUser.Email, serviceUser.LastLogin, serviceUser.PasswordChanged, serviceUser.IsUsingTempPassword);
            return PartialView("_detailsPartial", user);
        }

_detailsPartial は詳細ビューです (まったく変更されていません)。

これは、ビュー内のコントローラーへの現在の呼び出しです。

@Ajax.ActionLink("Details", "Details", item, new AjaxOptions { UpdateTargetId = "detailsDiv", InsertionMode = InsertionMode.Replace})

これは私が更新したいdivです:

<div id="detailsDiv">

</div>

この div の後のビューには他に何もありません。

現在の結果は、リンクがウィンドウで新しいページを開き、部分的なビューをレンダリングすることです (コンテンツとしてアイテムの詳細を含む)

4

2 に答える 2

0

ページの一部だけをレンダリングするのに最も適しているのは AJAX だと思います。 http://en.wikipedia.org/wiki/Ajax_(プログラミング) 正直なところ、私は Asp.net のプロではありませんが、このトリックを実行するツール キットがあると思います。http://www.asp.net/ajaxlibrary/AjaxControlToolkitSampleSite/

于 2013-04-23T08:45:24.010 に答える
0

私は常にこれを使用して、ajax で部分ビューをレンダリングします。これは機能します。他の問題がある場合は、別の問題です:)

@Ajax.ActionLink("blabla", "DetailsCompleted", new { Users= "add users here" }, new AjaxOptions { UpdateTargetId = "detailsDiv"})

編集:コントローラーアクション

public PartialViewResult yourpartialname("data here")
{
    "get your data
    return PartialView(data);
}

編集2：

あなたはこれを行うことができます：

@Ajax.ActionLink("Details", "Details", new {item = item.Guid}, new AjaxOptions {      UpdateTargetId = "detailsDiv", InsertionMode = InsertionMode.Replace})

これが機能することはわかっていますが、それが大きな違いであるかどうかはわかりません（私もそのプロではありません:)）、大きな違いがあるかどうかはわかりませんが、部分ビューの結果をこれに変更できます:

public PartialViewResult DetailsPartial(Guid item)
    {
        AdminDMS.Models.User user = null;
        UserService.User serviceUser = client.GetUsers().Single(u => u.Guid == guid);
        user = new AdminDMS.Models.User(serviceUser.Guid, serviceUser.TrusteeType, serviceUser.Username, serviceUser.Email, serviceUser.LastLogin, serviceUser.PasswordChanged, serviceUser.IsUsingTempPassword);
        return PartialView(user);
    }

DetailsPartial は部分ビューの名前です。これを試すことができます。私はこのようにします。そうしないと、コードに問題は見られません。

最終編集

</footer>
@Scripts.Render("~/bundles/jquery")
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
@RenderSection("scripts", required: false)
</body>
</html>
于 2013-04-23T10:40:28.370 に答える