Поле автозаполнения в форме? []

Question

Я работаю с C# MVC3 & бритвой, Entity Framework и Linq.

У меня есть форма, с двумя области, первый ID клиента и второй Название магазина. Я хотел бы, когда пользователь вводит идентификатор, тогда мое поле StoreName заполняется автоматически ... Данные будут поступать из базы данных, в которой хранятся эти два данных.

Answer 1

Вы можете использовать AJAX. Поэтому настройте действие контроллера, используя идентификатор клиента как параметр, и который будет запрашивать вашу базу данных и возвращать соответствующее имя магазина как результат JSON. Затем подпишитесь на событие .blur текстового ввода, содержащего идентификатор магазина, и отправьте вызов AJAX на действие контроллера, чтобы заполнить второе поле ввода.

Да, я знаю, бессмысленный jibber-jabber, дайте код.

Здесь:

public ActionResult GetStoreName(int clientId) 
{ 
    // of course thath's just an example here. I have strictly no idea 
    // what database access technology you are using, how your models look like 
    // and so on. Obviously you will have to adapt this query to your data model. 
    var client = db.Clients.FirstOrDefault(x => x.Id == clientId); 
    if (client == null) 
    { 
     return HttpNotFound(); 
    } 

    return Json(new { storeName = client.Store.Name }, JsonRequestBehavior.AllowGet); 
} 

Теперь предполагая следующий вид:

<div> 
    @Html.LabelFor(x => x.ClientId) 
    @Html.TextBoxFor(x => x.ClientId, new { id = "clientId", data-url = Url.Action("GetStoreName") }) 
</div> 
<div> 
    @Html.LabelFor(x => x.Store.Name) 
    @Html.TextBoxFor(x => x.Store.Name, new { id = "storeName" }) 
</div> 

в отдельном файла JavaScript вы можете подписаться на .blur события первого текстового поля, и вызвать запрос AJAX к контроллер отправляет ему идентификатор клиента, который был введен пользователем. В обратном вызове успеха вы должны обновить второе текстовое поле с результатом вызова AJAX:

$(function() { 
    $('#clientId').blur(function() { 
     var clientId = $(this).val(); 
     $.ajax({ 
      url: $(this).data('url'), 
      type: 'GET', 
      cache: false, 
      data: { clientId: clientId }, 
      success: function(result) { 
       $('#storeName').val(result.storeName); 
      } 
     }); 
    }); 
});