从 index.html 中的控制器调用函数答案

【问题标题】：call to function from the controller in index.html从 index.html 中的控制器调用函数
【发布时间】：2018-07-19 22:20:47
【问题描述】：

在我的 mvc 应用程序中，我有组合框，我正在尝试执行以下操作：当用户选择一些将从控制器调用某些功能的项目时。

Index.html：

 @using (Ajax.BeginForm("dor", "Home", new AjaxOptions
                    {
                        HttpMethod = "Get",
                        //UpdateTargetId = "myPic",
                        InsertionMode = System.Web.Mvc.Ajax.InsertionMode.Replace
                    }))
                    {
                        @Html.DropDownListFor(x => x.SelectedFileName, Model.Files, new { Name = "map", @class = "form-control", onchange = "CallChangefunc()" })
                    }

.
.
.

 <script type="text/javascript">
    function CallChangefunc() {
     window.location.href = '@Url.Action("dor","Home")';
 }
 </script>

HomeVM：

public class HomeVM
{
    public List<SelectListItem> Files { get; set; }
    public string SelectedFileName { get; internal set; }
    public List<string> DynamicAlgorithems { get; set; }
}

家庭控制器：

public void dor()
{
       //some code    
}

问题：当用户从组合框中选择某些项目时，它会将我重定向到空白页，即http://localhost:55354/Home/dor，但我只想调用名为dor 的函数，而不是转到空白页！。

我错过了什么？

【问题讨论】：

然后进行 ajax 调用，而不是使用 location.href 重定向到它。

标签： ajax asp.net-mvc

【解决方案1】：

window.location.href 始终重定向到分配给它的新页面 URL。当onchange 方法触发并返回所需结果时，您应该使用jQuery.ajax() 调用action 方法：

jQuery（在$(document).ready()内）

$('#SelectedFileName').change(function() {
    var selectedFileName = $(this).val();

    $.ajax({
        type: 'GET',
        url: '@Url.Action("Dor", "Home")',
        data: { fileName: selectedFileName },
        success: function (result) {
            // do something
        }
    });
});

控制器

[HttpGet]
public ActionResult Dor(string fileName)
{
    // do something
}

注意：确保操作方法参数与从 AJAX 回调传递的分配的 data 具有相同的名称。

【讨论】：