Вызов метода действия из представления для автоматического заполнения значения формы - PullRequest
Новая
       52

Вызов метода действия из представления для автоматического заполнения значения формы

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

У меня есть форма, которая используется для создания ресурса, и она имеет два поля для заполнения. Когда пользователь вводит значение в первое поле, я хочу автоматически перезвонить методу действия на сервере, который определит значение для использования во втором поле, при этом пользователю не нужно отправлять форму.

Например:

  • Полное имя - пользователь вводит это значение
  • Имя пользователя - просматривает сервер вызовов со значением, указанным в полном имени, сервер вычисляет значение, которое необходимо использовать, сервер передает значение обратно для просмотра, представление представляет значение.

Возможно ли это сделать в MVC ядре, и если да, то можете ли вы указать правильное направление?

Я читал об удаленной проверке и чувствую, что, возможно, смогу использовать (или злоупотребить) ею для достижения требуемой функциональности, но я бы подумал, что для этого есть свой способ.

Любые указатели приветствуются.

Ответы [ 2 ]

1 голос
/ 22 апреля 2020

Удаленная проверка может выполнять проверку только без отправки формы, но не может присвоить значение другому полю. В твоем случае. Это на самом деле очень просто. Вы можете использовать событие js onchange для прослушивания первого поля, в этом случае используйте ajax для доступа к фону. а затем заполните возвращенное значение во втором поле в функции обратного вызова. Ниже приведен простой тест

Вид: 

<span>Full Name</span>
<input type="text" id="FullName" name="FullName" />

<span>User Name</span>
<input type="text" id="UserName" name="UserName" />

@section scripts{
<script>
    $("#FullName").on("change", function () {
        $.ajax({
            type: "post",
            url: "/User/GetUserName",
            data: {
                fullname: $("#FullName").val()
            },
            success: function (result) {
                $("#UserName").val(result);
            }
        })
    })
</script>
}

Контроллер: 

[HttpPost]
public string GetUserName(string fullname)
{
    var username = fullname.Split(" ");

    return username.First();
}

Результат:

enter image description here

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

@ mj1313's answer был чрезвычайно полезен, но мне не понравилась идея, что в моих представлениях есть некоторая потеря Javascript, тем более что мне может понадобиться использовать эту же функциональность в нескольких представлениях.

В итоге я преобразовал скрипт в глобальную функцию и вызвал его из события onchange следующим образом.

JS Функция (в site.js) 

function fullNameToUserName (fullNameId, usernameId) {
    $.ajax({
        type: "get", // GET rather than POST
        url: "/User/GetUserNameFromFullName",
        data: {
            fullname: $(fullNameId).val()
        },
        success: function (result) {
            $(usernameId).val(result);
        }
    })
}

Метод действия 

[HttpGet("GetUserNameFromFullName")] // GET rather than POST
public IActionResult GetUserNameFromFullName(string fullName)
{
    var username = fullName.Split(" ");

    return Ok(username.First());
}

Модель 

public class UserModel
{
    public string FullName { get; set; }
    public string Username { get; set; }
}

Просмотр 

@model MvcApp.Models.UserModel

@Html.DisplayNameFor(m => m.FullName)
@Html.TextBoxFor(m => m.FullName, new
{ 
    onchange = $"fullNameToUserName({@Html.IdFor(m => m.FullName)}, {@Html.IdFor(m => m.Username)});"
})

@Html.DisplayNameFor(m => m.Username)
@Html.TextBoxFor(m => m.Username)

Единственная проблема, с которой я столкнулся при таком подходе, заключается в том, что вызов fullNameToUserName(fullNameId, usernameId) не является строго типизированным, и если эта функция вызывается из нескольких представлений, она, вероятно, будет неправильно напечатана в какой-то момент.

Хотя ответ @ mj1313 был замечательным и направил меня в правильном направлении, я не был полностью удовлетворен подходом. Лично я предпочитаю этот подход, так как он немного более пригоден для повторного использования и делает мой взгляд более скудным.

...