How do I capture the data sent by ajax in asp.net razor page?-CodePudding

I'm trying to populate a partial view with the data of the user i clicked on. Here is the code:

   <tbody >
                @foreach (var user in Model.UserList)
                {
                    <tr key="@user.Id" id="@user.Id" 
                        data-toggle="ajax-admin" data-url="@Url.Page("/AdminPage", "_UserInfo_AdminPartial")"
                        @*onclick="ShowUserInfo(@user.Id)"*@>
                        <th scope="col" style="width:500px">@user.Email</th>
                    </tr>
                } 
            </tbody>

 public  PartialViewResult OnGetUserInfo_AdminPartial(string UserId)
    {
        UserList = _context.Users.ToList();
        return new PartialViewResult
        {
            ViewName = "_UserInfo_AdminPartial",
            ViewData = new ViewDataDictionary<User>(ViewData, new User())
            //ViewData = new ViewDataDictionary<User>(ViewData, _context.Users.FirstOrDefault(p=>p.Id== UserId))
        };
    }

Jquery

$(function () {
    var placeholderElement = $('#user_placeholder');
    var ids = $(".useridinfo").attr("id");
    $('tr[data-toggle="ajax-admin"]').click(function (userId) {
        var url = $(this).data('url');

            $.ajax({
                type: "GET",
                url: url,
               // data: JSON.stringify({ "UserId": ids }),
                data: ids,
               
            success: function () {
                placeholderElement.load("/AdminPage?handler=UserInfo_AdminPartial");
            }
        });
        console.log(ids)
    });});

Partial view, currently pretty empty

    @model  Data.Account.User

@{
}
<div id="user_partial" >
    <form asp-page-handler="UserInfo_AdminPartial"></form>
    <h5>test</h5>
    <h6>@Model.Id</h6>
</div>

Using this: ViewData = new ViewDataDictionary<User>(ViewData, new User()) works, but it creates a new user with the captured Id. I want to send the already existing user with that id to the partial view but string UserId is always null. So the id is sent but i don't know how to capture it.. What can i do ?

CodePudding user response：

The handler name is UserInfo_AdminPartial , so change data-url="@Url.Page("/AdminPage", "_UserInfo_AdminPartial")" to data-url="@Url.Page("/AdminPage", "UserInfo_AdminPartial")".

Whole working demo below:

@page 
@model AdminPageModel

<table >
    <tbody>
        @foreach (var user in Model.UserList)
        {
            <tr key="@user.Id" id="@user.Id" 
                data-toggle="ajax-admin" data-url="@Url.Page("/AdminPage", "UserInfo_AdminPartial")">
                <td>@user.Id</td>
            </tr>
        } 
    </tbody>
</table>
<div id="user_placeholder"></div>
@section Scripts
{
    <script>
        $(function () {
            var placeholderElement = $('#user_placeholder');
            $('tr[data-toggle="ajax-admin"]').click(function () {
                var url = $(this).data('url');
                var ids = $(this).attr("id");
                    $.ajax({
                        type: "GET",
                        url: url   "&UserId="   ids,                       
                        success: function (res) {
                            placeholderElement.html(res); 
                        }
                });
                console.log(ids)
            }); 
        })
    </script>
}

PageModel:

public class AdminPageModel : PageModel
{
    public List<User> UserList { get; set; }
    public void OnGet()
    {
        UserList = _context.Users.ToList();
    }
    public PartialViewResult OnGetUserInfo_AdminPartial(string UserId)
    {
        UserList = _context.Users.ToList();

        var user = UserList.Where(a => a.Id == UserId).FirstOrDefault();

        return new PartialViewResult
        {
            ViewName = "_UserInfo_AdminPartial",
            ViewData = new ViewDataDictionary<User>(ViewData, user)
            //ViewData = new ViewDataDictionary<User>(ViewData, _context.Users.FirstOrDefault(p=>p.Id== UserId))
        };
    }