Трабл с автозаполнением - PullRequest
0 голосов
/ 12 марта 2019

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

Например, я выбрал имя,но он показывает мне идентификатор, а не имя, как показано на рисунке.Возможно ли, что он показывает мне имя и просто хранит удостоверение личности?

image

Модель

public partial class Filho
    {
        public int ID_Filho { get; set; }
        public int ID_Utilizador { get; set; }
        public string Nome { get; set; }
        public string Morada { get; set; }
        public System.DateTime DataNascimento { get; set; }
        public System.DateTime DataRegisto { get; set; }
        public int ID_Sala { get; set; }

        public virtual Utilizador Utilizador { get; set; }
        public virtual Sala Sala { get; set; }
    }

Контроллер

public JsonResult AutoComplete(string prefix)
 {
     ClassEntities entities = new ClassEntities();
     var pais = (from Utilizador in entities.Utilizador
                     where Utilizador.NomeUtilizador.StartsWith(prefix)
                     select new
                     {
                         label = Utilizador.NomeUtilizador,
                         val = Utilizador.ID_Utilizador
                     }).ToList();   
     return Json(pais);
 }

HTML

<div class="wrap-input100 rs1-wrap-input100 validate-input">
    <span class="label-input100">NAME</span>
    <input class="input100" type="text" id="txtUtilizador" name="ID_Utilizador">
    <span class="focus-input100"></span>
</div>

JavaScript

<script type="text/javascript">    
    $("#txtUtilizador").autocomplete({
        source: function (request, response) {
            $.ajax(
                {
                    url: '/Filhos/AutoComplete/',
                    data: "{ 'prefix': '" + request.term + "'}",
                    dataType: "json",
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    cache: false,
                    success: function (data) {
                        response($.map(data, function (item) {
                            return {
                                label: item.label,
                                value: item.val,
                            };
                        }))
                    }
                })
        },
        error: function (error) {
            alert(error);
        }
    });
</script>

Метод

public ActionResult Create()
{
    ViewBag.ID_Utilizador = new SelectList(db.Utilizador, "ID_Utilizador", "NomeUtilizador");
    ViewBag.ID_Sala = new SelectList(db.Sala, "ID_Sala", "NomeSala");
    return View();
}

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Create([Bind(Include = "ID_Filho,ID_Utilizador,Nome,Morada,DataNascimento,DataRegisto,ID_Sala")] Filho filho)
{
    if (ModelState.IsValid)
    {
        db.Filho.Add(filho);
        db.SaveChanges();
        return RedirectToAction("Index");
    }

    ViewBag.ID_Utilizador = new SelectList(db.Utilizador, "ID_Utilizador", "NomeUtilizador", filho.ID_Utilizador);
    ViewBag.ID_Sala = new SelectList(db.Sala, "ID_Sala", "NomeSala", filho.ID_Sala);
    return View(filho);
}

1 Ответ

1 голос
/ 12 марта 2019

Вам нужно добавить скрытое поле с именем, чтобы сохранить значение при отправке формы.

<input type="hidden" name="ID_Utilizador"/>

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

select: function (event, ui) {
            event.preventDefault();
            $(this).val(ui.item.label);
            $("[name='ID_Utilizador']").val(ui.item.value);

        }

Это HTML для страницы

<div class="wrap-input100 rs1-wrap-input100 validate-input">
    <span class="label-input100">NAME</span>
    <input class="input100" type="text" id="txtUtilizador">
    <input type="hidden" name="ID_Utilizador"/>
    <span class="focus-input100"></span>
</div>


<script type="text/javascript">

    $("#txtUtilizador").autocomplete({
        source: function (request, response) {
            $.ajax(
                {
                    url: '/Filhos/AutoComplete/',
                    data: "{ 'prefix': '" + request.term + "'}",
                    dataType: "json",
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    cache: false,
                    success: function (data) {
                        //response($.map(data, function (item) {
                        //    return {
                        //        label: item.label,
                        //        value: item.val,
                        //        id : item.val
                        //    };
                        //}))
                        response(data);
                    }
                })
        },
        select: function (event, ui) {
            event.preventDefault();
            $(this).val(ui.item.label);
            $("[name='ID_Utilizador']").val(ui.item.value);

        },
        error: function (error) {
            alert(error);
        }
    });
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...