CODEWITHSUNDEEP
jqueryasp.net-mvc
PaTHP
PaTHP

Reputation: 335

Jquery inputpicker plugin calling mvc controller

I 'm using this jquery plugin(Link) and I 'm stuck in below code where I 'm not sure how to call the mvc controller and fill dropdown with data.

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

Upvotes: 3

Views: 1068

Answers (1)

Nitesh Kumar
Nitesh Kumar

Reputation: 1774

Here are the steps which can help you in implementation. First in your controller create an action method which will retrieve data for the imputpicker. See the below sample action method.

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 = "[email protected]", Phone = "1234567899" });
        result.Add(new ContactModel { Id = 2, Name = "Name2", Address = "Address2", Email = "[email protected]", Phone = "1234545439" });
        result.Add(new ContactModel { Id = 3, Name = "Name3", Address = "Address3", Email = "[email protected]", Phone = "1234543349" });
        result.Add(new ContactModel { Id = 4, Name = "Name4", Address = "Address4", Email = "[email protected]", Phone = "1253567899" });
        result.Add(new ContactModel { Id = 5, Name = "Name5", Address = "Address5", Email = "[email protected]", Phone = "1234566755" });
        result.Add(new ContactModel { Id = 11, Name = "Name11", Address = "Address11", Email = "[email protected]", Phone = "1234567899" });
        result.Add(new ContactModel { Id = 12, Name = "Name12", Address = "Address12", Email = "[email protected]", Phone = "1234545439" });
        result.Add(new ContactModel { Id = 13, Name = "Name13", Address = "Address13", Email = "[email protected]", Phone = "1234543349" });
        result.Add(new ContactModel { Id = 14, Name = "Name14", Address = "Address14", Email = "[email protected]", Phone = "1253567899" });
        result.Add(new ContactModel { Id = 15, Name = "Name15", Address = "Address15", Email = "[email protected]", Phone = "1234566755" });

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

Sample ContactModel is below

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

Then in your view put the following code

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

Your inputpicker should work now.

Upvotes: 3

Related Questions