asp.net-mvc-4 - 通过 Html.UpshotContext 调用带参数的 Web api 方法

Question

我目前正在开发 MVC4 SinglePage 应用程序。

我有一个 Web Api 方法GetChartsByCategory(int catId) 所以在我看来 cshtml 页面我应该如何在这种情况下声明 Html.UpshotContext 。

我不想调用GetAllCharts()，然后使用敲除或结果在客户端进行过滤。

谢谢

Answer 1

无法使用 Html.UpshotContext 提供参数。您可以使用 $.ajax() 调用 GetChartsByCategory() 并将结果映射到您的模型。

例子：

$.ajax("GetChartsByCategory", true, {
    data: { id: catID },
    dataType: 'json',
    success: function (data) {
        // on success, data contains a list of charts
        self.charts(ko.utils.arrayMap(data, function (item) {
            return new Chart(item);
        }));
    }
});

模型：

Chart = function (initialData) {
    var self = this;

    // inject the initial data
    $.each(initialData, function (key, value) {
        self[key] = ko.observable(value);
    });

....
}

Answer 2

允许您坚持淘汰/结果框架的另一种选择是更改结果提供参数操作名称以将参数包含为路由和/或查询字符串的一部分。

以下示例使用从 HTML 收集的“ApplicationId”作为 WebAPI 调用的参数，该方法接受“id”参数作为路由的一部分（“/api/controller/action/id”）：

控制器方法：

public class ClientDetailsScreenController : DataController
{
    public ClientModel GetClient(int id)
    {
        var client = //Fetch client with id using your prefered method
        return client;
    }
}

查看 HTML 结果上下文：

@(Html.UpshotContext(true).DataSource<ClientDetailsScreenController>(ctr => ctr.GetClient(0))))

请注意，传递给 GetClient 方法的“0”会被 DataSource 方法忽略，因此可以是使方法签名有效的任何内容。

淘汰赛视图模型：

function ClientDetailsViewModel() {
    var self = this;

    //Store the operation name with a leading '/' for use later
    self.operationNameTemplate = upshot.dataSources.Client._providerParameters.operationName + "/";

    //Observable property for the ApplicationId enter via HTML
    self.selectedApplicationId = ko.observable("1");

    //Refresh Data Source Operation - Called in HTML when the ApplicaitonId changes
    self.refresh = function () {
        //Set the upshot operation name to include the id parameter value.
        upshot.dataSources.Client._providerParameters.operationName = self.operationNameTemplate + self.selectedApplicationId();
        //Refresh the data source causing the bound HTMl to be updated.
        self.dataSource = upshot.dataSources.Client.refresh(); 
    };

    //Data Source Setup
    self.refresh();
    self.clients = self.dataSource.getEntities();
}

希望这可以帮助其他试图通过结果传递给服务器的参数的人。如果有人有更好的方法，请告诉我们。