Jquery inputpicker插件调用mvc Controller

Question

我正在使用这个 jquery 插件( Link )，但我被困在下面的代码中，我不确定如何调用 mvc Controller 并用数据填充下拉列表。

<input class="form-control" id="test" value="" />
<script>
$('#test').inputpicker({
    url: './example-json.php',
    fields:['id','name','hasc'],
    fieldText:'name',
    fieldValue:'id',
    pagination: true,
    pageMode: '',
    pageField: 'p',
    pageLimitField: 'per_page',
    limit: 5,
    pageCurrent: 1,
});
</script>

Answer 1

以下是可以帮助您实现的步骤。首先在 Controller 中创建一个操作方法，它将检索输入选择器的数据。请参阅下面的示例操作方法。

public class HomeController : Controller
{
    public ActionResult GetContacts(string q, int limit = 5, int p = 1, int per_page = 5)
    {
        var result = new List<ContactModel>();
        result.Add(new ContactModel { Id = 1, Name = "Name1", Address = "Address1", Email = "email1@email.com", Phone = "1234567899" });
        result.Add(new ContactModel { Id = 2, Name = "Name2", Address = "Address2", Email = "email2@email.com", Phone = "1234545439" });
        result.Add(new ContactModel { Id = 3, Name = "Name3", Address = "Address3", Email = "email3@email.com", Phone = "1234543349" });
        result.Add(new ContactModel { Id = 4, Name = "Name4", Address = "Address4", Email = "email4@email.com", Phone = "1253567899" });
        result.Add(new ContactModel { Id = 5, Name = "Name5", Address = "Address5", Email = "email5@email.com", Phone = "1234566755" });
        result.Add(new ContactModel { Id = 11, Name = "Name11", Address = "Address11", Email = "email11@email.com", Phone = "1234567899" });
        result.Add(new ContactModel { Id = 12, Name = "Name12", Address = "Address12", Email = "email12@email.com", Phone = "1234545439" });
        result.Add(new ContactModel { Id = 13, Name = "Name13", Address = "Address13", Email = "email13@email.com", Phone = "1234543349" });
        result.Add(new ContactModel { Id = 14, Name = "Name14", Address = "Address14", Email = "email14@email.com", Phone = "1253567899" });
        result.Add(new ContactModel { Id = 15, Name = "Name15", Address = "Address15", Email = "email15@email.com", Phone = "1234566755" });

        return Json(new { msg = "", count = result.Count, data = result.Skip((p - 1) * per_page).Take(per_page) }, JsonRequestBehavior.AllowGet);
    }
}

示例 ContactModel 如下

public class ContactModel
{
    public int Id { get; set; }
    public string Name { get; set; }
    public string Address { get; set; }
    public string Email { get; set; }
    public string Phone { get; set; }
}

然后在你的 View 中输入以下代码

<input class="form-control" id="test" value="Text 2" />
<script>
    $('#test').inputpicker({
        url: '@Url.Action("GetContacts", "Home")',
        fields: ['Id', 'Name', 'Email'],
        fieldText: 'Name',
        fieldValue: 'Id',
        filterOpen: true,
        pagination: true,
        pageMode: '',
        pageField: 'p',
        pageLimitField: 'per_page',
        limit: 5,
        pageCurrent: 1,
    });
}

您的输入选择器现在应该可以工作了。