Как передать входные данные из компонента Blazor в контроллер Core MVC? - PullRequest
Новая
       33

Как передать входные данные из компонента Blazor в контроллер Core MVC?

0 голосов
/ 01 февраля 2020

Учитывая это Edit.cshtml: 

@model User

<form asp-action="Edit">
    <component type="typeof(EditUser)" render-mode="ServerPrerendered" param-User="Model" />
    <input type="submit" value="Save" />
</form>

и это EditUser.razor: 

<input class="form-control" type="text" @bind-value="User.Name" />

@code {
    [Parameter]
    public User User { get; set; }
}

с этой User.cs моделью: 

public class User 
{
    public int Id { get; set; }
    public string Name { get; set; }
}

и this UserController.cs: 

// GET
public async Task<IActionResult> Edit(int id)
{
    var user = await _context.Users.FindAsync(id);
    if (user == null)
    {
        return NotFound();
    }

    return View(user);
}

[HttpPost]
public async Task<IActionResult> Edit(int id, [Bind("Id,Name")] User user)
{
    if (ModelState.IsValid) 
    {
        _context.Update(user);
        await _context.SaveChangesAsync();
        return RedirectToAction(nameof(Index));
    }

    return View(user);
}

Но, похоже, это не работает, поскольку пользователь, переданный в метод Edit, пуст. Как передать пользователя с введенными значениями в компоненте Blazor в UserController? Есть ли способ получить входные значения из компонента Blazor в контроллер вообще?

1 Ответ

0 голосов
/ 13 апреля 2020

Вы должны помочь себе с небольшим JavaScript. По сути, он будет использовать JSRuntime (правильный способ связи между Blazor и JS) для отправки измененных данных обратно в представление. Возможно, это не совсем то, как это работает под капотом, но вы должны понять: -)

  1. Edit.cs html:

a) Добавить скрытый элемент где-то в разделе формы: 

<input type="hidden" asp-for="Name" id="Name" />

b) Добавьте немного JS внизу Edit.cs html. Эта функция будет получать данные из компонента Blazor и передавать их элементу ввода. 

<script>
    window.updateUserName = function (userName) {
        document.getElementById('Name').value = userName;
        }
</script>
В EditUser.razor:

a) Некоторые изменения в элементе ввода - должны выглядеть следующим образом: 

<input class="form-control" @onchange="async (e) => { User.Name = e.Value.ToString(); await UpdateUserName(); }" value="@User.Name"  />

Это позволяет вызывать пользовательский код для отправки измененных данных обратно. для просмотра, используя метод, упомянутый ниже.

б) В разделе @code: 

public async Task UpdateUserName()
{
    await JSRuntime.InvokeVoidAsync("updateUserName", User.Name);
}

И это все. Надеюсь, это поможет.

...