Question

我有一组项目的下拉列表。这些项目具有几个属性，包括“ ModifiedDate”，“ CreatedDate”，“ Id”和“ Name”。下拉列表绑定到ID和Name，并按Name排序。

但是，我想向用户提供一个选项，以将排序列更改为“ ModifiedDate”，“ CreatedDate”或“ Id”。用户还可以选择对“ Ascending”或“降序”。

我可以将ASP.NET MVC与Postback一起使用。

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＃代码呈现视图

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的部分回发实现吗？

更新下拉列表的排序顺序

0 个答案: