0

I am trying to build a page with list of users. The goal is, that when you click "Details" link in the row, I would like to render partial view in the page using javascript or jQuery, So I dont need to reload the page. I have found many solutions (for example this), but I cant get it working, since I know next to nothing about javascript at the moment so I dont know how to connect what i found to code I have.

This is my partial view (i am not sure if it is correct as I wasnt able to even try to render it so far):

@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>`

I am using async controller, these are my Details async actions:

    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"]));
    }

And this is the view:

@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>

I would like to replace that commented out action link with something, that will render the partial view in "detailsDiv" div that is left empty at the end.

Thanks in advance

UPDATE:

My controller now has this action

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 is the detail view (that hasnt changed at all)

this is the current call to controller in view:

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

This is the div I want to update:

<div id="detailsDiv">

</div>

There is nothing else in the view after this div.

Current result is that the link will open new page in the window and renders partial view (with item details as content)

4

2 回答 2

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 回答
0

我想最适合用于呈现页面的一部分的是 AJAX。 http://en.wikipedia.org/wiki/Ajax_(programming) 老实说，我不是 Asp.net 的专家，但我想有一个工具包可以解决问题。http://www.asp.net/ajaxlibrary/AjaxControlToolkitSampleSite/

于 2013-04-23T08:45:24.010 回答