如何仅使用 JavaScript 调用 MVC 操作？答案

【问题标题】：How to call an MVC Action using only JavaScript?如何仅使用 JavaScript 调用 MVC 操作？
【发布时间】：2013-03-01 16:51:09
【问题描述】：

我有一个带有 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
}

【问题讨论】：

你需要使用AJAX。

标签： c# javascript asp.net-mvc

【解决方案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 - 这是发送请求的 URL。就我而言，有控制器称为联系人，它有动作调用 ListPartiesByNameStart()。此操作方法需要参数 nameStart（个人或公司的第一个字母）。成功——这就是处理检索到的数据的 JavaScript 函数。你可以在那里写也是匿名函数，但我建议您使用带名称的函数因为否则当函数增长时你的代码可能会变得混乱。类型 - 这是请求的类型。它是 GET 或 POST。我建议你使用 POST 因为 JSON 格式的 GET 请求被禁止默认为 ASP.NET MVC（稍后我将向您展示如何打开 GET 对 JSON 返回操作的请求）。 dataType – 这是数据期望由服务器返回的格式。如果你不分配它值然后返回的结果作为字符串处理。如果你设置它到 json 然后 jQuery 构造你的 JavaScript 对象树对应于从服务器检索到的 JSON。

【讨论】：

@rae1n 确实如此，而且效果很好。 *.cshtml 文件将执行@Url.Action，然后该行变为var url = '/YourControllerController/ViewAllPolicies/'，因此当页面在服务器端呈现并交付给客户端时，C# 已被解析，剩下的就是一个字符串。请注意，当您命名控制器时，通常不会将“控制器”放在 Url.Action 调用中，因此它会是“您的”而不是“您的控制器”。
@AaronLS 我不是指那个（因为我在回答中使用了相同的语法）。我的意思是他在定义 URL 的 JavaScript 代码和服务器端的 Controller 定义之间没有分离，他通过在它之前包含“in controller”提示来解决这个问题。
这正是我所需要的，谢谢..所有好的答案，我现在可以使用了。

【解决方案2】：

除了返回 json，您还可以返回 PartialView 并在 .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
}

【讨论】：

【解决方案3】：

select 函数执行后，您需要对控制器进行 AJAX 回调。您可以在select 函数中使用jQuery.ajax()（最常见的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 工作原理的更多信息。

【讨论】：