Jquery inputpicker插件调用mvc控制器

我正在使用这个jquery plugin（），我陷入了下面的代码中，我不知道如何调用mvc控制器并用数据填充下拉列表

<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>

$（“#测试”）.inputpicker({
url:“./example json.php”，
字段：['id'，'name'，'hasc']，
fieldText:“名称”，
字段值：'id'，
分页：正确，
页面模式：“”，
pageField:'p'，
pageLimitField:“每页”，
限额：5，
页面当前：1，
});

以下是可以帮助您实施的步骤。首先，在控制器中创建一个操作方法，该方法将检索InputPicker的数据。请参见下面的示例操作方法

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);
    }
}

然后在您的视图中放置以下代码

<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,
    });
}

$（“#测试”）.inputpicker({
url:'@url.Action（“获取联系人”、“主页”），
字段：['Id'，'Name'，'Email']，
fieldText:'名称'，
fieldValue:'Id'，
过滤器打开：是的，
分页：正确，
页面模式：“”，
pageField:'p'，
pageLimitField:“每页”，
限额：5，
页面当前：1，
});
}

---

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

您需要设置

数据

属性，如链接到的示例所示。将模型传递到

IEnumerable

视图，其中

T

包含属性

id

、

name

和

hasc

，然后使用

数据：@Html.Raw（Json.Encode（model.YourCollectionProperty）），将其转换为javascript数组，

或使用远程数据部分中显示的示例，该示例使用ajax调用服务器方法，该方法返回数据的

JsonResult

。非常感谢Nitesh，您真是棒极了。

<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,
    });
}