javascript - 如果用户存在，请使用数据库表中的数据填写表单文本框？

Question

我昨天问过这个问题。一位专家建议我使用 Ajax。

请在使用 MVC5 创建表单时，我需要在分机号旁边创建一个按钮链接。当用户输入分机号码并单击旁边的按钮时，分机号码将传递给 JasonResult 在表中搜索。如果扩展存在，那么创建 View 中的文本框表单将显示他的姓名、位置和徽章。

这是我的 Controller 。

  public JsonResult EmployeeInfo(string extension, Ticket ticket)
    {
        var result = from r in db.CUSTOMERS 
                     where r.BADGE_NUMBER == extension
                     select new { r.BADGE_NUMBER, r.LOCATION, r.NAME };

        return Json(result, JsonRequestBehavior.AllowGet);
    }

这是 View 中的代码。

    <div class="form-group">
        @Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger" })
        </div>
    </div>



    <div class="form-group">
        @Html.LabelFor(model => model.Phone, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.Phone, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.Phone, "", new { @class = "text-danger" })

            <input type="submit" id="GetInfo" value="search"/>


            <script type="text/jscript">
                $('#GetInfo').click(function () {
                    $.getJSON('/Tickets/EmployeeInfo/' + $('#Phone').val(), function (data) {

                        $('#rData').html(items);
                    });
                })
            </script>
         </div>
    </div>

有人可以帮助我吗？谢谢，

Answer 1

听起来您正在使用 MVC Controller ，它返回一个 View ，因此这不起作用。我建议您添加带有这样的路由的 e Web Api Controller (当然未经测试):

[Route("Tickets/EmployeeInfo/{extension}")]
public Task<IHttpActionResult> EmployeeInfo(string extension)
{
    var result = from r in db.CUSTOMERS 
                     where r.BADGE_NUMBER == extension
                     select new { r.BADGE_NUMBER, r.LOCATION, r.NAME };

    return result;
}

此 Web API 路由将以 JSON 形式提供您的结果。您可以像现在使用 javascript 一样调用此路由。您还应该将按钮类型更改为按钮:

<input type="submit" id="GetInfo" value="search"/>

至

<input type="button" id="GetInfo" value="search"/>