MVC Как загрузить представление и частичное представление из одного контроллера

Question

У меня есть контроллер, который возвращает представление с таблицей в этом представлении, заполненной информацией о заказах

public class HomeController : Controller 
{
        public IActionResult OrderTracking()
        {
            List<WebOrder> orderList = SuperDAL.GetWebOrders();
            foreach(WebOrder order in orderList)
            {
                order.Parts = SuperDAL.GetPartsForWebOrder(order.ID);
            }

            return View(orderList);
        }
}

Представление OrderTracking

@model List<WebOrder>

        <table id="orderTable" class="orderTable">
            <thead>
                <tr>
                    <th>Priority</th>
                    <th>Web Order Number</th>
                    <th>Order Number</th>
                    <th>Company</th>
                    <th>Status</th>
                    <th>Due Date</th>
                    <th>Date Received</th>
                    <th>Customer</th>
                    <th>Order Cost</th>
                </tr>
            </thead>
            <tbody>
                @foreach (var webOrder in Model)
                {
                    <tr data-ID="@webOrder.ID">
                        @*The tds with data-date are storing the date contained
                            within the tds in ISO date format. This value is
                            being pulled in JavaScript to avoid having
                            messy string formating in JS for date comparisons*@
                        <td class="@webOrder.getPriority().ToLower()">@webOrder.getPriority()</td>
                        <td>@webOrder.WebOrderNumber</td>
                        <td>@webOrder.ExternalOrderNumber</td>
                        <td>@webOrder.CompanyName</td>
                        <td>@webOrder.getOverallStatus()</td>
                        <td data-date="@webOrder.dueDateISOFormat()">@webOrder.getDueDate()</td>
                        <td data-date="@webOrder.dateReceivedISOFormat()">@webOrder.DateReceived</td>
                        <td>@webOrder.CustomerName</td>
                        <td>@webOrder.OrderCost</td>
                    </tr>
                }
            </tbody>
    @*The Order Modal*@
    <div id="orderModal" class="modal">
        @*Modal Content*@
    </div>

Каждая строка в таблице имеет обработчик события щелчка, который при запуске отправляет вызов ajax контроллеру для возврата частичного представления с подробной информацией о порядке.

$.ajax({
            type: "POST",
            url: "/WebOrder/Details/",
            data: { 'id': orderID },
            dataType: "html",
            success: function (response) {

                $("#orderModal").html(response);

                //modal.style.display = "block";
                //Does more stuff

            },
            failure: function (response) {
                alert(response.responseText);
            },
            error: function (response) {
                alert(response.responseText);
            }
        });

public class WebOrderController : Controller
    {
        [HttpPost]
        public IActionResult Details(int id)
        {
            WebOrder webOrder = SuperDAL.GetWebOrder(id);
            webOrder.Parts = SuperDAL.GetPartsForWebOrder(webOrder.ID);
            return PartialView("ModalPartial", webOrder);
        }

    }

Частичное представление возвращенный контроллером Details помещается в div orderModal в представлении OrderTracking.

По умолчанию в моем CSS этот div скрыт. Когда в таблице щелкают строку, в успешной части вызова ajax я показываю div, оформленный как модальный, который всплывает на текущей странице и отображает дополнительную информацию о выбранном порядке. Раздел успеха также применяет другие события к модальному.

Теперь проблема, которую я пытаюсь решить, заключается в том, что я хотел бы иметь возможность отображать модальное окно с частичным представлением, просто перейдя в строке URL-адреса к Контроллер OrderTracking и попросите его открыть вид OrderTracking, а также модальный и частичный вид. URL-адрес будет примерно таким, как domain / Home / OrderTracking / 5, где 5 будет идентификатором заказа.

Причина в том, что конечная цель - иметь qr-код. который будет подтягивать заказ при сканировании qr-ридером, поэтому qr-код будет содержать URL-адрес с номером заказа.

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

Один из способов, которым я думал о достижении этого, - иметь перегруженный контроллер OrderTracking, который использует запрос GET. Этот контроллер будет вызывать контроллер Details, а также возвращать представление OrderTracking, но, хотя, возможно, выполнимо, это, скорее всего, неправильный способ сделать это.

Другая проблема заключается в том, что с Подход с использованием URL. Я не могу запустить jQuery или JavaScript с контроллера, как я могу в вызове ajax, который устанавливает обработчики событий и другие вещи. Один из способов решения этой проблемы - включить функцию $ (document) .ready в частичное представление.

Дайте мне знать, если мне нужно что-то уточнить.

Answer 1

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

Создайте ViewModel:

public class OrderViewModel{
   public int? OrderID { get; set; }
   public List<WebOrder> Orders { get; set; }
}

Измените действие:

public class HomeController : Controller 
{
        public IActionResult OrderTracking(int? orderID)
        {
            List<WebOrder> orderList = SuperDAL.GetWebOrders();
            foreach(WebOrder order in orderList)
            {
                order.Parts = SuperDAL.GetPartsForWebOrder(order.ID);
            }

            return View(new OrderViewModel(){ OrderID = orderID, Orders = orderList});
        }
}

Событие нажатия триггера:

<script>
   $(function(){
       if(@Model.OrderID !=null){
           //trigger click event
       }
   })
</script>

Answer 2

Если вы хотите сделать это, вы можете добавить частичное представление прямо в представление. И, как говорит Siddanth, передайте OrderId в ваше представление. Так что вам даже не нужно нажимать кнопку, чтобы добавить частичное представление. Вы можете изменить так: OrderModel:

public class OrderModel
    {
        public WebOrder SelectedOrder { get; set; }
        public List<WebOrder> Orders { get; set; }
    }

Контроллер:

public IActionResult OrderTracking(int? orderId)
    {
        OrderModel orderModel = new OrderModel();
        List<WebOrder> orderList = SuperDAL.GetWebOrders();
        foreach (WebOrder order in orderList)
        {
            order.Parts = SuperDAL.GetPartsForWebOrder(order.ID);
        }
        orderModel.Orders = orderList;
        orderModel.SelectedOrder = new WebOrder();
        if (orderId != null)
        {
            WebOrder webOrder = SuperDAL.GetWebOrder(id);
            orderModel.SelectedOrder = webOrder;
            
        }
        return View(orderModel);
    }

изменить Web

Заказ:

public int? ID { get; set; }

Просмотр:

<div id="orderModal" class="modal" >
    @await Html.PartialAsync("ModalPartial", @Model)
</div>
<script type="text/javascript">
        $(function () {

            if (@Model.SelectedOrder.ID!=null) {
                $("#orderModal").modal("show");
            }
        })
    </script>