Как сделать раскрывающийся список в MVC, заполненный различными значениями в базе данных, который будет отображать все строки, содержащие значение?

Question

У меня есть таблица, настроенная так:

AuditInfo

ID (PK,int)
AuditWeek
LogType(nvarchar(50))
DateUploaded(nvarchar(50))
UploadedBy(nvarchar(50))

Вот некоторые примеры данных, связанных с этой таблицей:

ID     AuditWeek   LogType   DateUploaded   UploadedBy
1 --- 19 May 2019 --- OS --- 23 May 2019 --- john.doe
2 --- 19 May 2019 --- DB --- 24 May 2019 --- john.doe
3 --- 26 May 2019 --- DB --- 25 May 2019 --- bill.doe
4 --- 26 May 2019 --- OS --- 27 May 2019 --- john.doe
5 --- 26 May 2019 --- AP --- 27 May 2019 --- jake.thorn
6 --- 26 May 2019 --- AP --- 28 May 2019 --- sall.nye
7 --- 02 Jun 2019 --- OS --- 03 Jun 2019 --- jaye.blake

Я пытаюсь получить раскрывающийся список, основанный на отдельной неделе аудита, который будет отображать все данные за эту неделю, связанные с выбором. Таким образом, для этих данных раскрывающееся меню может выглядеть следующим образом:

--Select Date--
02 Jun 2019
26 May 2019
19 May 2019

Если пользователь выберет 26 мая 2019 года, на странице появится следующий результат:

ID     AuditWeek   LogType   DateUploaded   UploadedBy
3 --- 26 May 2019 --- DB --- 25 May 2019 --- bill.doe
4 --- 26 May 2019 --- OS --- 27 May 2019 --- john.doe
5 --- 26 May 2019 --- AP --- 27 May 2019 --- jake.thorn
6 --- 26 May 2019 --- AP --- 28 May 2019 --- sall.nye

С этой информацией, как я могу выполнить то, что мне нужно сделать в ASP.NET MVC?

Моя текущая идея - иметь частичное представление, которое я загружаю на своей странице. Затем я мог бы сделать так, чтобы вызов AJAX обновлял это частичное представление на основе сделанного выбора. С этой идеей я провел небольшое исследование и обнаружил, что учебник делает нечто похожее на то, что я хочу: https://www.c -sharpcorner.com / article / частичное представление в Asp-Net-mvc /

Я следую за этим в разделе «Визуализация частичного представления с помощью Ajax». Тем не менее, я только что потерял в соусе здесь, что мне нужно сделать, чтобы сделать эту работу. В настоящее время у меня есть следующее:

Модель

AuditDataModel.edmx

namespace AuditLogReview.Models
{
    using System;
    using System.Collections.Generic;

    public partial class AuditData
    {
        public int ID { get; set; }
        public string AuditWeek { get; set; }
        public string LogType { get; set; }
        public string DateUploaded { get; set; }
        public string UploadedBy { get; set; }
    }
}

Просмотр модели

AuditDataWeekVM.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web.Mvc;
using AuditLogReview.Models;

namespace AuditLogReview.ViewModels
{
    public class AuditDataWeekVM
    {
        public AuditDataWeekVM()
        {
           AuditWeek  = new List<SelectListItem>();
        }
        public List <SelectListItem> AuditWeek
        {
            get;
            set;
        }
    }
}

View

Index.cshtml

@model IEnumerable<AuditLogReview.Models.AuditData>

<h2>Audit Data For This Week</h2>
Need a different week? @Html.DropDownList("AuditWeek", new SelectList(ViewBag.Dates, "AuditWeekDate"))
<table class="table">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.AuditWeek)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.LogType)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.DateUploaded)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.UploadedBy)
        </th>
    </tr>

    @foreach (var item in Model)
    {
        <tr>
            <td>
                @item.AuditWeek
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.LogType)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.DateUploaded)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.UploadedBy)
            </td>
        </tr>
    }

</table>

Контроллер

HomeController.cs

using System;
using System.Data;
using System.Data.Entity;
using System.Linq;
using System.Net;
using System.Web;
using System.Web.Mvc;
using AuditLogReview.Models;
using AuditLogReview.ViewModels;

namespace AuditLogReview.Controllers
{
    public class HomeController : Controller
    {
        private Entities db = new Entities();

        public ActionResult Index()
        {
            DayOfWeek today = DateTime.Today.DayOfWeek;
            int diff = ((7 + (today - DayOfWeek.Sunday)) % 7)+1;
            DateTime date = DateTime.Now.AddDays(diff*-1);
            ViewBag.Dates = db.AuditData.OrderBy(m => m.ID).Select(m => m.AuditWeek).Distinct().ToList();
            return View(db.AuditData.ToList().Where(x => Convert.ToDateTime(x.AuditWeek) >= date));
        }
    }
}

Из кода у меня есть раскрывающийся список, по крайней мере, с различными датами. Но я не думаю, что это то, как учебник, который я нашел, делает это - фактически, я думаю, что я должен использовать модель представления для этого.

Я также совершенно заблудился о том, как именно я должен создать частичное представление ... Я думаю, что идея состоит в том, чтобы использовать представление, которое я уже опубликовал выше, для использования вместо него в качестве частичного представления, и передать его моей ViewModel. Я думаю, что я мог бы сохранить страницу и вырезать и вставить материал для AuditWeek в это частичное представление, а затем поместить @ Html.Partial или что-то на исходную страницу, которая ссылается на частичное представление.

Но как именно я могу справиться с этим в контроллере? Я использую два контроллера здесь, или делаю все в одном? Опять же, веб-сайт https://www.c -sharpcorner.com / article /partal-view-in-Asp-Net-mvc / , кажется, что-то вроде того, что мне нужно, у меня просто проблемы реализуя это. Кроме того, правильно ли я делаю свою модель просмотра?

Буду очень признателен за любую помощь в этом вопросе !!!

Answer 1

Создайте частичное представление в общей папке проекта в разделе Представления, установите привязку модели к типу модели, который вы передадите в частичное представление, используйте ajax, чтобы передать значение раскрывающегося списка контроллеру, вернутьчастичное представление, передаваемое в соответствующую модель, при успешном выполнении ajax заполняет контейнер

частичное представление:

//Bind Model Type to Partial View
@model YourModel

действие контроллера:

        //This can be just public IActionResult if you are not planning on 
        //using async methods inside of the controller action
        [HttpGet]
        public async Task<IActionResult> YourGetMethod(string dropDownChoice) 
        {
            //Handle logic of drop down choice and populate the model accordingly
            return PartialView(partialViewName, YourModel);
        }

Ajax:

    $.ajax({
        url: "/YourController/YourGetMethod,
        type: "GET",
        cache: false,
        data: {dropDownChoice: yourDropDownChoice },
        dataType: "html",
        success: function(data){
            //Clear your container
            //Append the data (partial view) to your container (div, etc.)
        },
        error: function(jqXHR, exception){

        }
    });

Добавьте onChange обратный вызов события в ваш раскрывающийся список после загрузки DOM:

     document.getElementById('yourDropDown').addEventListener("change", function() 
     { //Call your ajax
     });

     //JQuery
     $('#yourDropDown').on('change', function() { //Call your ajax}
     );

)

Answer 2

Я смог успешно решить ее без использования AJAX.Вот что я сделал, чтобы решить мою проблему:

Модель

Тот же код, что и раньше.

ПросмотрМодель

Тот же код, что и раньше.

Вид

Таблица перемещена в частичный вид

<h2>Audit Data For This Week</h2>
Need a different week? @Html.DropDownList("AuditWeek", new SelectList(ViewBag.Dates, "AuditWeekDate"), "--Select--")
<div id="AuditWeekPartial">
    @{Html.RenderPartial("_AuditWeekInfo", Model);}
</div>

<script>
    $(document).ready(function () {

        $('#AuditWeek').change(function () {
            var selectedcolor = $('#AuditWeek').val();
            var link = '@Url.Action("GetAuditWeek","Home", new { dropDownChoice = "replace" })';
            link = link.replace("replace", selectedcolor)
            $('#AuditWeekPartial').load(link);
        });
    });
</script>

Частичное представление

@model AuditLogReview.ViewModels.AuditDataWeekVM
<table class="table">
    <tr>
        <th>
            AuditWeek
        </th>
        <th>
            LogType
        </th>
        <th>
            DateUploaded
        </th>
        <th>
            UploadedBy
        </th>
    </tr>

    @foreach (var item in Model.AuditWeek)
    {
        <tr>
            <td>
                @item.AuditWeek
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.LogType)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.DateUploaded)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.UploadedBy)
            </td>
        </tr>
    }
</table>

Контроллер

    public ActionResult Index()
    {
        DayOfWeek today = DateTime.Today.DayOfWeek;
        int diff = ((7 + (today - DayOfWeek.Sunday)) % 7)+1+7;
        DateTime date = DateTime.Now.AddDays(diff*-1);             

        ViewBag.Dates = db.AuditData.OrderBy(m => m.ID).Select(m => m.AuditWeek).Distinct().ToList();
        AuditDataWeekVM adwvm = new AuditDataWeekVM();
        adwvm.AuditWeek = db.AuditData.ToList().Where(x => Convert.ToDateTime(x.AuditWeek) >= date);
        return View(adwvm);
    }

    public ActionResult GetAuditWeek(string dropDownChoice)
    {
        AuditDataWeekVM adwvm = new AuditDataWeekVM();
        adwvm.AuditWeek = db.AuditData.Where(x => x.AuditWeek == dropDownChoice).ToList();
        return View("~/Views/Home/_AuditWeekInfo.cshtml",adwvm);
    }