Question

我有一个带有select事件的Kendo UI下拉列表，该事件由JavaScript函数处理。

我需要从运行LINQ查询的控制器调用操作结果，以在我的页面上填充Kendo UI网格。我的问题是我能找到处理这个问题的唯一方法，即使是使用JavaScript，我也无法弄清楚如何从JavaScript事件函数中调用我的控制器的动作结果。

这就是DropDownList的样子......

@(Html.Kendo().DropDownList()
    .Name("Options")
    .DataTextField("Text")
    .DataValueField("Value")
        .BindTo(new List<SelectListItem>() {
        new SelectListItem() {
            Text = "Policies Not Archived",
            Value = "1"
        },
        new SelectListItem() {
            Text = "View All Policies",
            Value = "2"
        },
        new SelectListItem() {
            Text = "Filter Policies",
            Value = "3"   
        }
    })
    .Events(e => 
    {
        e.Select("select");
    })
)

和我需要调用操作结果的JavaScript事件处理程序

function select(e) {

}

并根据选择ActionResult这样，

public ActionResult ViewAllPolicies()
{
    //mycode
}

Answer 1

请参阅此post

var url = '@Url.Action("ViewAllPolicies","YourController")';
    $.ajax({ url: url, success: DataRetrieved, type: 'POST', dataType: 'json' });

控制器中的

public ActionResult ViewAllPolicies()
{
    //Should return json format
}

url - 这是发送请求的网址。在我的情况下有控制器称为联系人，它有动作calles ListPartiesByNameStart（）。此操作方法采用参数 nameStart（人或公司的第一个字母）。成功 - 这是处理检索数据的JavaScript函数。你可以写在那里也是匿名函数，但我建议你使用带名字的函数因为否则你的代码可能会在函数增长时变得混乱。类型 - 这是请求的类型。它是GET或POST。我建议你使用POST是因为禁止使用JSON格式的GET请求默认情况下是ASP.NET MVC（我稍后会告诉你如何打开GET 请求JSON返回操作）。 dataType - 这是数据预期由服务器返回的格式。如果你不指定它返回值然后返回结果作为字符串处理。如果你设置它到json然后jQuery构造你的JavaScript对象树对应于从服务器检索的JSON。

Answer 2

您可以返回一个PartialView而不是返回json，而在.done函数中抓取一个元素并将其替换为部分视图的结果。 PartialView操作基本上返回HTML的一个片段，因此您可以在页面上的任何位置填充：

$.ajax({
        url: urlToPartialViewAction,
        type: 'POST',
        dataType: 'JSON',
        data: '123'
    })
    .done(function (result) {
       $('#someDivPlaceholder').replaceWith(result);        
    });

您可以使用类似链接或灰色div的内容并连接到它的点击事件，然后调用此链接可能会显示“查看收据”，当您单击它时，您将调用一个操作，该操作将返回带有收据的部分视图，所以当他们点击它时，div / link将替换为结果。有点像你在社交网站上看到的“查看更多评论”链接。

请注意，您不能单独拥有局部视图，必须通过操作

调用它

public PartialViewResult _GetReceipt(string id)
{
   ReceiptViewModel vm = //query for receipt data
   return PartialView(vm);//render partial view and return html fragment
}

Answer 3

执行select函数后，您需要向Controller发出AJAX回调。您可以在jQuery.ajax()函数中使用select（最常见AJAX operations的包装器），

function select(e) {
    var url = '@Url.Action("ViewAllPolicies", "PolicyController")';
    var selectedPolicy = $('#Options').val(); // The option selected

    $.ajax({
        url: url,
        type: 'POST',
        dataType: 'JSON',
        data: selectedPolicy
    })
    .done(function (data) {
        // Display the data back from you Controller
    });
}

您可以查看Kendo site了解DropDownList如何运作的详细信息。

如何仅使用JavaScript调用MVC Action？

3 个答案: