Передача текущей модели в частичное представление, обработка больших данных с сервера клиентам

Question

Я хочу передать все входные значения View в мой частичный просмотр (передача пользовательского заказа для показа сводки заказа), но все значения частично обнулились при просмотре. Ниже приведен мой код.

 <a href="#/" data-toggle="modal" data-target="#myModal_@Model.CustRef" style="border-radius: 1.5rem;  margin-right:8%; margin-top: 1%; border: none;  padding:10px 2%; background: #0062cc; color: #fff; font-weight: 600; width:20%; cursor: pointer; text-align:center; font-weight:bolder;"> Submit</a>

<div id="myModal_@Model.CustRef" class="modal fade" role="dialog">
    <div class="modal-dialog" style="position:absolute; left:10%;">
        <!-- Modal content-->
        <div class="modal-content" style="width:80vw;">
            <div class="modal-header ">
                <h4 class="modal-title"><i class="fas fa-shopping-cart"></i> Order Summary</h4>
                <button type="button" class="close" data-dismiss="modal">Back</button>
            </div>
            <div class="modal-body">
                ...Disabled Inputs...
            </div>
        </div>
    </div>
</div>

My Create Order Представление

 <form asp-action="Create">
      ....
      @*<partial name="~/Views/Order/OrderSummary.cshtml" model="Model" />*@
      @await Html.PartialAsync("~/Views/Order/OrderSummary.cshtml", new OrderViewModel() { cus_name = Model.cus_name, cus_phone = Model.cus_phone, CustRef = Model.CustRef, Phoneid = Model.Phoneid, modelId = Model.modelId, Quantity = Model.Quantity, Address = Model.Address, CityId = Model.CityId, Date = Model.Date, store_id = Model.store_id })

    </form>

Второй вопрос

Мой второй вопрос: у меня есть большие данные для передачи в View (панель администратора) для полной статистики, но это занимает слишком много времени. Пожалуйста, скажите мне любой другой эффективный способ повышения производительности.

Answer 1

Вам необходимо передать текущую модель ввода в контроллер через ajax и вернуться для визуализации нового частичного представления.

Пожалуйста, обратитесь к следующему коду:

Контроллер:

 public class OrderController : Controller
    {
        public IActionResult Index()
        {
            OrderViewModel orderView = new OrderViewModel();
            return View(orderView);
        }
        public PartialViewResult ShowParitalView(OrderViewModel orderView)
        {
            return  PartialView("OrderSummary", orderView);
        }
    }

Индекс:

@using WebApplication_core_mvc.Models;
@model OrderViewModel
@{
    ViewData["Title"] = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}  
@section Scripts{
    <script>
        $(function () {
            $("a").click(function () {
                event.preventDefault();
                $("div .modal").attr("id", "myModal_" + $("#cus_name").val());
                $("a").attr("data-target", "#myModal_" + $("#cus_name").val());
                $.ajax({
                    type: "POST",
                    url: "/Order/ShowParitalView",
                    data: $("form").serialize(),
                    success: function (data) {
                        $('#partial').html(data);
                        $("#myModal_" + $("#cus_name").val()).modal('show');
                    }
                })
            })
        });
    </script>
}
<form asp-action="Create">
    <div class="form-group">
        <label asp-for="cus_name" class="control-label"></label>
        <input asp-for="cus_name" class="form-control" />
        <span asp-validation-for="cus_name" class="text-danger"></span>
    </div>
    <div class="form-group">
        <label asp-for="cus_phone" class="control-label"></label>
        <input asp-for="cus_phone" class="form-control" />
        <span asp-validation-for="cus_phone" class="text-danger"></span>
    </div>
    <div class="form-group">
        <label asp-for="CustRef" class="control-label"></label>
        <input asp-for="CustRef" class="form-control" />
        <span asp-validation-for="CustRef" class="text-danger"></span>
    </div>
    <div class="form-group">
        <label asp-for="Phoneid" class="control-label"></label>
        <input asp-for="Phoneid" class="form-control" />
        <span asp-validation-for="Phoneid" class="text-danger"></span>
    </div>
    <div class="form-group">
        <label asp-for="modelId" class="control-label"></label>
        <input asp-for="modelId" class="form-control" />
        <span asp-validation-for="modelId" class="text-danger"></span>
    </div>
    <div class="form-group">
        <label asp-for="Quantity" class="control-label"></label>
        <input asp-for="Quantity" class="form-control" />
        <span asp-validation-for="Quantity" class="text-danger"></span>
    </div>
    <div class="form-group">
        <label asp-for="Address" class="control-label"></label>
        <input asp-for="Address" class="form-control" />
        <span asp-validation-for="Address" class="text-danger"></span>
    </div>
    <div class="form-group">
        <label asp-for="CityId" class="control-label"></label>
        <input asp-for="CityId" class="form-control" />
        <span asp-validation-for="CityId" class="text-danger"></span>
    </div>
    <div class="form-group">
        <label asp-for="Date" class="control-label"></label>
        <input asp-for="Date" class="form-control" />
        <span asp-validation-for="Date" class="text-danger"></span>
    </div>
    <div class="form-group">
        <label asp-for="store_id" class="control-label"></label>
        <input asp-for="store_id" class="form-control" />
        <span asp-validation-for="store_id" class="text-danger"></span>
    </div>


    <a href="#" data-toggle="modal" data-target="#myModal_@Model.CustRef"
       style="border-radius: 1.5rem;  margin-right:8%; margin-top: 1%; border: none;
padding:10px 2%; background: #0062cc; color: #fff; font-weight: 600; width:20%;
cursor: pointer; text-align:center; font-weight:bolder;">
        Submit
    </a>
    <div id="myModal_@Model.CustRef" class="modal" role="dialog">
        <div class="modal-dialog" style="position:absolute; left:10%;">
            <!-- Modal content-->
            <div class="modal-content" style="width:80vw;">
                <div class="modal-header ">
                    <h4 class="modal-title"><i class="fas fa-shopping-cart"></i> Order Summary</h4>
                    <button type="button" class="close" data-dismiss="modal">Back</button>
                </div>
                <div class="modal-body">
                    <div id="partial">
                    </div>
                </div>
            </div>
        </div>
    </div> 

</form>

OrderSummary Partial View:

@using WebApplication_core_mvc.Models;
@model OrderViewModel

<div class="form-group">
    <label asp-for="cus_name" class="control-label"></label>
    <input asp-for="cus_name" class="form-control"  disabled/> 
</div>
<div class="form-group">
    <label asp-for="cus_phone" class="control-label"></label>
    <input asp-for="cus_phone" class="form-control" disabled/> 
</div>
<div class="form-group">
    <label asp-for="CustRef" class="control-label"></label>
    <input asp-for="CustRef" class="form-control" disabled/> 
</div>
<div class="form-group">
    <label asp-for="Phoneid" class="control-label"></label>
    <input asp-for="Phoneid" class="form-control" disabled/> 
</div>
<div class="form-group">
    <label asp-for="modelId" class="control-label"></label>
    <input asp-for="modelId" class="form-control" disabled/> 
</div>
<div class="form-group">
    <label asp-for="Quantity" class="control-label"></label>
    <input asp-for="Quantity" class="form-control" disabled/> 
</div>
<div class="form-group">
    <label asp-for="Address" class="control-label"></label>
    <input asp-for="Address" class="form-control" disabled/> 
</div>
<div class="form-group">
    <label asp-for="CityId" class="control-label"></label>
    <input asp-for="CityId" class="form-control" disabled/> 
</div>
<div class="form-group">
    <label asp-for="Date" class="control-label"></label>
    <input asp-for="Date" class="form-control" disabled/> 
</div>
<div class="form-group">
    <label asp-for="store_id" class="control-label"></label>
    <input asp-for="store_id" class="form-control" disabled/> 
</div>

Вот результат:

По второму вопросу в вашем коде слишком много SQL операторов запросов, вы можете попытаться повысить производительность, обратившись к this .