https://github.com/jrummell/jquery.dynamiclist
A set of jQuery plugins for MVC that support adding and removing items from a list with ajax.
https://github.com/jrummell/jquery.dynamiclist
ajax dynamiclist jquery jquery-plugin mvc
Last synced: about 2 months ago
JSON representation
A set of jQuery plugins for MVC that support adding and removing items from a list with ajax.
- Host: GitHub
- URL: https://github.com/jrummell/jquery.dynamiclist
- Owner: jrummell
- License: gpl-3.0
- Created: 2015-01-14T23:35:04.000Z (about 11 years ago)
- Default Branch: master
- Last Pushed: 2022-12-07T06:46:48.000Z (over 3 years ago)
- Last Synced: 2025-12-16T23:30:59.117Z (3 months ago)
- Topics: ajax, dynamiclist, jquery, jquery-plugin, mvc
- Language: JavaScript
- Homepage:
- Size: 14.3 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: license.txt
Awesome Lists containing this project
README
# jQuery Dynamiclist for MVC
A jQuery plugin for ASP.NET MVC that supports adding and removing items from a list with ajax.
## Installation
Install with npm:
```bash
> npm install jquery-dynamiclist
```
The npm version is a single package. Include the appropriate scripts based on your UI framework:
Base scripts for all frameworks:
- Unobtrusive validation with ajax support:
- [`jquery.validate.unobtrusive.dynamic.js`](./src/jquery.validate.unobtrusive.dynamic.js)
- jQuery plugin:
- [`jquery.dynamiclist.js`](./src/jquery.dynamiclist.js)
### Kendo UI
- Kendo UI templates:
- [`jquery.dynamiclist.templates.kendo.js`](./src/jquery.dynamiclist.templates.kendo.js)
Note: Kendo UI is no longer a package dependency. You should either install it separately, or use their CDN.
### Bootstrap
- Bootstrap templates:
- [`jquery.dynamiclist.templates.kendo.js`](./src/jquery.dynamiclist.templates.kendo.js)
[](https://dev.azure.com/jrummell/jquery.dynamiclist/_build/latest?definitionId=1&branchName=master)
Live example:
## New in version 2.0
- Removed support for jquery ui and jquery mobile
- Added templates
- newItemUrl option can now be a string or function
- Added add and remove methods
- Remove confirmation option that will display a confirm dialog if set
### Example Usage
```html
List Example
@Html.EditorFor(model => model.ListItems)
// Initialize
$("#listExample").dynamiclist(
{
// Selector for each item in the list
itemSelector: ".item",
// Label for the add button
addLabel: "Add",
// Label for the remove button
removeLabel: "Remove",
// ASP.NET MVC html field prefix
htmlFieldPrefix: "@ViewData.TemplateInfo.HtmlFieldPrefix",
// Model property that contains this list. Each item input is assumed to have a name of HtmlFieldPrefix.Property[index].BindingProperty
property: "@Html.NameFor(m => m.Items)",
// Action url for the new item partial view. This can be a string or function.
// The url should accept a htmlFieldPrefix parameter. E.g. Controller/Action?htmlFieldPrefix=Model.Property
newItemUrl: "@Url.Action("NewListItem")",
// list, table, or div
listType: "list",
// Triggered after an item is added to the list
itemAdded: function (item) { },
// Triggered after an item is removed from the list
itemRemoved: function (item) { },
// define custom templates if you need more control over the styling
templates : {
table: {
container: "<div class='dynamic-list-container'><\/div>",
addItem: "<div class=\"add-item-container\"><button class=\"add-item\">{addLabel}<\/button><\/div>",
removeItem: "<button type=\"button\" class=\"delete-item\">{removeLabel}</button>"
},
list: {
container: "<div class='dynamic-list-container'><\/div>",
addItem: "<li class=\"add-item-container\"><button class=\"add-item\">{addLabel}<\/button><\/li>",
removeItem: "<button type=\"button\" class=\"delete-item\">{removeLabel}</button>"
},
div: {
container: "<div class='dynamic-list-container'><\/div>",
addItem: "<div class=\"add-item-container\"><button class=\"add-item\">{addLabel}<\/button><\/div>",
removeItem: "<button type=\"button\" class=\"delete-item\">{removeLabel}</button>"
}
}
});
// Methods
// add
$("#listExample").dynamiclist("add");
// remove
var $firstItem = $("#listExample .item:first");
$("#listExample").dynamiclist("remove", $firstItem);
```