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

Question

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

 <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>

我的创建订单视图

 <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>

Second Question

我的第二个问题是我有大量数据要传递给查看（管理仪表板）以完成统计，但它花费了太多时间。请告诉我任何其他提高性能的有效方法。

Answer 1

需要通过ajax和return将当前输入模型传递给控制器呈现新的局部视图。

请参考以下代码：

控制器：

 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 部分视图：

@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.

尝试提高性能

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

Passing Current Model to partial View, Handling Large from Server To Clients

model-view-controller

asp.net-mvc

twitter-bootstrap

razorengine

asp.net-core