Rajeshyadav12 Ответов: 2

Хотите проверить, есть ли у jquery autocomplete действительные данные или нет при нажатии кнопки submit в MVC

Я хочу проверить ввод данных Пользователем в функции автозаполнения при нажатии кнопки. Если пользователь выбирает правильные данные из базы данных, то он отображает успешное сообщение, иначе он должен показать, что, Пожалуйста, выберите правильные данные. В настоящее время та же функциональность работает над 
response
но я хочу такую же функциональность на 
Produce Page
нажатие кнопки. Кто-нибудь, пожалуйста, направьте меня.

Что я уже пробовал:

<pre>$("#txtemployee").autocomplete({
        source: function (request, response) {
           $.ajax({
                url: '/Home/AutoComplete/',
                data: "{ 'prefix': '" + request.term + "'}",
                dataType: "json",
                type: "Post",
                contentType: "application/json; charset=utf-8",
                success: function (data) {
                    response($.map(data, function (item) {
                  return {
                            value: item.empName,
                            id: item.empId
                        };
                    }))
                },
                error: function (response) {
                    alert(response.responseText);
                },
                failure: function (response) {
                    alert(response.responseText);
                }
            });
        },
        select: function (event, ui) {
             $("#hiddenempId").val(ui.item.value);
             $("#hiddenempId").val(ui.item.id);

        },
        response: function (event, ui) {
        if (!ui.content.length) {
             $("#message").text("No results found");               
        }
        else {
            $("#message").empty();
        }
    },
        minLength: 3
    });
});


My .cshtml looks:


@using (Html.BeginForm("Index", "Home", FormMethod.Post))
 {
     @Html.TextBoxFor(m => m.txtName)
     @Html.HiddenFor(m => m.hiddenFId)
     @Html.ValidationMessageFor(m => m.txtName, "", new { @class = "error" })                      
     <span id="message"></span>                                    
     <button type="submit" id="submit">Produce Page</button>

 }


[HttpPost] 
public ActionResult Index(ClsHome clshome) 
{ 
return View(clshome.produceData());
 }


Я хочу ограничить пользователя, чтобы нажать на кнопку Product page, так как введенные данные недействительны. Как этого добиться. Пожалуйста, помогите мне. Спасибо.

2 Ответов

Рейтинг:
13

Karthik_Mahalingam

написать javascript функция для проверки значения текстового поля с сервера с помощью ajax позвоните , обратитесь к следующему коду и измените его соответственно вашим потребностям. 

@using (Html.BeginForm("Index", "Home", FormMethod.Post))
{
    @Html.TextBoxFor(m => m.txtName)
    @Html.HiddenFor(m => m.hiddenFId)
    @Html.ValidationMessageFor(m => m.txtName, "", new { @class = "error" })
    <span id="message"></span>
    <button onclick="Validate()"> Produce Page </button>
    <button style="display:none" type="submit" id="submit"></button>

}


function Validate() {
       var val = $('#txtemployee').val();
       var obj = { name: val };
       $.ajax({
           url: '/Home/CheckValidEmp/',
           data: obj,
           dataType: "json",
           type: "Post",
           contentType: "application/json; charset=utf-8",
           success: function (data) {
               if (data && data.empId) {
                   $("#hiddenempId").val(data.empId);
                   // success
                   $('#submit').click();

               }
               else {
                   alert('Not a valid Employee ');
               }


           },
           error: function (response) {
               alert(response.responseText);
           },
           failure: function (response) {
               alert(response.responseText);
           }
       });
   }



[HttpPost]
      public JsonResult CheckValidEmp(string name)
      {
           // find the employee based on the name
          EmployeeClass emp = getEmployee(name);
          return Json(emp);
      }

Рейтинг:
1

debasish mishra

Привет Раджеш,

Я реализовал нечто подобное в JS Fiddle.Пожалуйста, проверьте, как я это сделал.Но, пожалуйста, не копируйте и не вставляйте весь код целиком, так как он будет неуместен для вас.В вашем случае когда вы нажимаете на кнопку вам нужно поставить 

ui.content.length
этот код находится в переменной и на основе этой переменной вам нужно ответить обратно на сервер с возвращением true;

Edit fiddle - JSFiddle[^]

Rajeshyadav12

@debasish, это решение не работает. Если я ставлю Apple1, то и он показывает успешный результат. Не могли бы вы дать мне решение, относящееся к моему вопросу? Это будет очень ценно. Спасибо.