将当前模型传递到局部视图，从服务器到客户端处理大量模型

Question

我想将视图的所有输入值传递给我的局部视图（传递用户订单以显示订单摘要），但是部分视图中的所有值都为空，这是我的代码。

 <a href="#/" data-toggle="modal" data-target="#[email protected]" 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="[email protected]" 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>

我的创建订单视图

 <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="#[email protected]"
       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="[email protected]" 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部分视图：

@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来提高性能。