表单上的 ASP.NET MVC 4 部分视图发布方法

Question

我有一个名为 _GetForfaitDashBoard.cshtml 的局部视图 这是代码

@model WebAppComp.Areas.Admin.Models.StatsForfaitDashBoard


<table class ="table table-bordered">
<tr>
<th>Nombre total de Forfaits</th>
<th>Moyenne des forfaits par Agence</th>
<th>Forfait Ayant le prix le plus haut</th>
<th>Forfait Ayant le prix le plus bas</th>
<th>Le forfait le plus visité</th>
<th>Le forfait le mieux noté par les membres</th>
<th>le forfait ayant le plus de réservations</th>
<th>le forfait le plus récent</th>
</tr>
<tr>
<td>@Model.CountForfaits</td>
<td>@Model.AverageCountForfaitPerAgence</td>
<td>@Html.ActionLink("Ici", "GetById", "Agence", new { numSiretAgence = Model.IdHighestPriceForfait }, null)</td>
<td>@Html.ActionLink("Ici", "GetById", "Agence", new { numSiretAgence = Model.IdLowestPriceForfait }, null)</td>
<td>@Html.ActionLink("Ici", "GetById", "Agence", new { numSiretAgence = Model.IdMostVisitedForfait }, null)</td>
<td>@Html.ActionLink("Ici", "GetById", "Agence", new { numSiretAgence = Model.IdBestRatedForfait }, null)</td>
<td>@Html.ActionLink("Ici", "GetById", "Agence", new { numSiretAgence = Model.IdMostBookedForfait}, null)</td>
<td>@Html.ActionLink("Ici", "GetById", "Agence", new { numSiretAgence = Model.IdMostRecentForfait}, null)</td>
</tr>

</table>

这是我在其中放置统计数据的表格。 我想要做的是将这些统计数据加载到基于Form的网页中，该表单将包含一个简单的下拉列表，用户可以在其中选择他想要的统计类型。 这是部分视图操作的代码：

[HttpPost]
        public PartialViewResult _GetForfaitDashBoard (TypeForfait typeForfait)
        {
            .....
        }

现在我不知道该怎么做才能将我所说的付诸行动。 在基本视图中放置一个表单来发布到部分视图的操作是一个好方法吗？ 或者有没有其他解决方案可以根据表单调用局部视图？

Answer 1

由于您要返回 PartialView，因此我的建议是：

使用jQuery Change 事件从下拉列表中获取选定的值并将其发布到服务器。

$("#yourdropdownid").change(function(e){}

然后将您的数据（我的个人偏好是通过Ajax 请求，但您也可以使用Post 函数）发布到您的_GetForfaitDashBoard操作并在您的 javascript 中处理响应：

$("#yourdropdownid").change(function(e){
    var selectedValue = this.val();

    $.ajax({
       url: $("#yourFormId").attr("action"),
       type: "POST",
       data: { typeForfait: selectedValue }, 
       success: function(response){ $('#IdOfTheElementWhereYouWantToInsert').html(response) },
       error: function(){ // handle your error }
    });
}

成功函数中的response参数是partialView 渲染出来的html。

假设您仅将统计类型基于选定的值，我建议您在操作中将参数类型从 TypeForfait 更改为 string（或 int）。

    [HttpPost]
    public PartialViewResult _GetForfaitDashBoard (string typeForfait)
    {

    }