У меня есть выпадающий список для набора предметов. Элементы имеют несколько свойств, включая «ModifiedDate», «CreatedDate», «Id» и «Name». Раскрывающийся список привязан к идентификатору и имени и отсортирован по имени.
Однако я хотел бы предоставить пользователю возможность изменить столбец сортировки на «ModifiedDate», «CreatedDate» или «Id ". У пользователя также будет возможность сортировать порядок" По возрастанию "или" По убыванию ".
Я могу сделать это, используя ASP.NET MVC с обратной передачей.
Class definitions
public class ItemList
{
[JsonProperty("id")]
public string Id { get; set; }
[JsonProperty("name")]
public string Name { get; set; }
[JsonProperty("createdDate")]
public DateTime CreatedDate { get; set; }
[JsonProperty("lastModifiedDate")]
public DateTime LastModifiedDate { get; set; }
}
public class Item
{
public string Id { get; set; }
public string Name { get; set; }
}
public class MainViewModel
{
[DisplayName("List of Items")]
public List<Item> Items { get; set; }
public string Id { get; set; }
public string SortBy { get; set; }
public string SortOrder { get; set; }
}
C # codeдля визуализации представления
using Newtonsoft.Json;
public ActionResult Index()
{
//Json array
string s = "[
{\"id\": 1, name: \"A\", \"createdDate\": \"2019-01-16T14:07:11.01Z\", \"lastModifiedDate\": \"2019-01-31T22:45:33.33Z\"},
{\"id\": 2, name: \"B\", \"createdDate\": \"2019-10-02T18:55:53.24Z\", \"lastModifiedDate\": \"2019-10-16T19:47:32.407Z\"},
{\"id\": 3, name: \"C\", \"createdDate\": \"2015-12-31T16:15:46.94Z\", \"lastModifiedDate\": \"2018-08-08T14:03:02.773Z\"},
{\"id\": 4, name: \"D\", \"createdDate\": \"2016-10-21T20:56:55.553Z\", \"lastModifiedDate\": \"2016-10-21T21:00:29.323Z\"},
{\"id\": 5, name: \"E\", \"createdDate\": \"2018-08-10T18:51:30.907Z\", \"lastModifiedDate\": \"2018-08-10T18:51:30.907Z\"}
]";
List<ItemList> list = JsonConvert.DeserializeObject<ItemList>(s);
List<Item> items = list.OrderByDescending(k => k.LastModifiedDate).Select(k => new Item { Id = k.Id, Name = k.Name }).ToList();
MainViewModel model = new MainViewModel();
model.Items = items;
return View(model);
}
Извлечение представления - Index.cshtml
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="col-md-6 control-label">@Html.LabelFor(m => m.Items)</label>
<div class="col-md-6">
@Html.DropDownListFor(x => x.Id, new SelectList(Model.Items , "Id", "Name"), "Select item", new { @class = "form-control" })
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<div class="col-md-2">
<label class="control-label">Sort on:</label>
</div>
<div class="col-md-2">
@Html.DropDownList("SortBy", new SelectList(new List<SelectListItem>() {
new SelectListItem(){Text="Created Date", Value="CreatedDate"},
new SelectListItem(){Text="Modified Date", Value="ModifiedDate"},
new SelectListItem(){Text="Query Name", Value="QueryName"}
}, "Value", "Text", "..Select.."))
</div>
<div class="col-md-2">
<label class="control-label">Sort Order:</label>
</div>
<div class="col-md-2">
@Html.DropDownList("SortBy", new SelectList(new List<SelectListItem>() {
new SelectListItem(){Text="Descending", Value="D"},
new SelectListItem(){Text="Ascending", Value="A"}
}, "Value", "Text", "..Select.."))
</div>
<div class="col-md-2">
<input class="btn btn-default" value="Reload Item List" />
</div>
</div>
</div>
</div>
Можно ли обновить раскрывающийся список без обновления страницы? Можно ли добиться этого с помощью частичногоотправить обратно с помощью jQuery?