Обновлен порядок сортировки выпадающего списка на месте - PullRequest
0 голосов
/ 01 ноября 2019

У меня есть выпадающий список для набора предметов. Элементы имеют несколько свойств, включая «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?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...