如何仅使用JavaScript调用MVC动作

本文关键字：MVC 动作 调用 JavaScript 何仅使 | 更新日期: 2023-09-27 18:01:41

我有这个剑道UI下拉列表与select事件是由JavaScript函数处理。

我需要从运行LINQ查询的控制器调用一个操作结果来填充我的页面上的剑道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
}

如何仅使用JavaScript调用MVC动作

看这篇文章

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

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

url -这是发送请求的url。对我来说是有的控制器叫contacts，它有动作调用ListPartiesByNameStart()。这个动作方法接受参数姓名起始(个人或公司的首字母)。成功——这就是成功处理检索数据的JavaScript函数。你可以在这里写也是匿名函数，但我建议你使用有名称的函数否则，当函数增长时，代码可能会变得混乱。类型,这是请求的类型。它不是GET就是POST。我建议你使用POST，因为JSON格式的GET请求被禁止ASP。. NET MVC(稍后我将向您展示如何打开GET)请求到JSON返回操作)。dataType——这是数据服务器期望返回的格式。如果你不分配它的值，然后返回的结果作为字符串处理。如果你设置它然后jQuery构建JavaScript对象树对应于从服务器检索到的JSON。

除了返回json，您还可以返回一个PartialView，并在.done函数中获取一个元素，并用部分视图的结果替换它。PartialView操作基本上返回一个HTML片段，所以你可以把它放在页面上任何你想要的地方:

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

你可以有一个链接或灰色div连接到它的click事件然后调用这个，链接可能会说"View Receipt"当你点击它时你调用一个返回带有收据的部分视图的动作，当他们点击它div/链接被结果取代。有点像你在社交网站上看到的"查看更多评论"链接。

注意你不能单独拥有一个局部视图，它必须通过一个动作

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

执行select函数后，需要对控制器进行AJAX回调。您可以在select函数

中使用jQuery.ajax()(用于最常见AJAX操作的包装器)。
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
    });
}

您可以查看剑道网站了解更多关于DropDownList如何工作的信息

相关文章：