Question

我正在构建一个 MVC 5 Web应用程序，其中包含布局模板中包含的下拉列表。我已经在 stackoverflow 上按照了这个答案，它运行良好MVC 3 Layout Page, Razor Template, and DropdownList

我需要的是让用户从下拉列表中选择一个项目（人名），然后进行JQuery调用，然后将选定的下拉列表ID传递给Controller中的方法。

我有一个如下所示的下拉列表

@Html.DropDownListFor(x => x.SelectedUserID, Model.UserList, "Select", new { @class = "form-control" })

选择项目时，将调用以下JQuery代码

$(document).ready(function () {

$("#SelectedUserID").change(ChangeEventOfDDL);

function ChangeEventOfDDL() {

    alert("test val" + $(this).val());

    $.ajax({
        type: "POST",
        url: '/Dashboard/Index/' + $(this).val(),
        data: { id: $(this).val() },
        dataType: "json",
        error: function () {
            alert("An error occurred.");
        },
        success: function (data) {

        }

    });
}

});

然后将选定的ID传递给Controller中的Index方法

public ActionResult Index(int? id)
    {
        DashboardViewModel model = new DashboardViewModel();

        if(id == null || id == 0)
        {
            User user = _userService.GetUserByID(Convert.ToInt32(User.Identity.GetUserId()));
            model.SelectedUser = user;
        }
        else
        {
            model.SelectedUser = _userService.GetUserByID(id.Value);
        }

        return View(model);
    }

这一切似乎都很好。当我通过我的代码调试时，我可以看到所选的下拉列表ID按预期一直传递到我的Controller中的Index方法。问题是，当我完成单步执行代码并返回到UI时，会出现一个JQuery错误，提示声明＆＃34;发生错误。＆＃34;。这是我在JQuery函数中设置的默认错误消息。

因为发生此错误，我的代码无法正常运行。

我不知道为什么会这样，有人可以帮忙吗？

感谢。

更新

在使用ChangeEventOfDLL函数内部的Ajax调用之前，我曾使用过以下代码，但实际上它从未实际触及仪表板中的Index方法。

$.post('@Url.Action("Dashboard", "Index")', { id: $(this).val() }, function (result) {
});

更新

我将我的JQuery更改为

$(document).ready(function () {

$("#SelectedUserID").change(ChangeEventOfDDL);

function ChangeEventOfDDL() {

    alert("test val" + $(this).val());

    $.post('@Url.Action("Index", "Dashboard")', { id: $(this).val() }, function (result) {
    });
}

});

但是仍然没有在Controller中调用Index方法。

接下来，我将JQuery代码更新为此

$(document).ready(function () {

$("#SelectedUserID").change(ChangeEventOfDDL);

function ChangeEventOfDDL() {

    alert("test val" + $(this).val());

    $.ajax({
        type: "POST",
        url: '@Url.Action("Index","Dashboard")',
        data: { id: $(this).val() },
        error: function () {
            alert("An error occurred.");
        },
        success: function (data) {

        }

    });

}

});

但是仍然没有在Controller中调用Index方法，我仍然得到错误提示。

Answer 1

您在从操作返回视图时传递datatype:json，而另一个错误是您在数据属性中传递id以及在url中传递id，这也是错误的：这应该是：

$.ajax({
    type: "POST",
    url: '/Dashboard/Index/' + $(this).val(),
    data: { id: $(this).val() },
    dataType: "json",
    error: function () {
        alert("An error occurred.");
    },
    success: function (data) {

    }

});

像这样：

var id = $(this).val();
$.ajax({
    type: "POST",
    url: '@Url.Action("Index","Dashboard")',
    data: { id: id  },
    error: function () {
        alert("An error occurred.");
    },
    success: function (data) {

    }

});

注意：始终使用 Url.Action 帮助程序创建操作网址，以便在实时部署时不会产生问题。

如果你想只返回不是视图的对象，那么这样做：

public ActionResult Index(int? id)
    {
        DashboardViewModel model = new DashboardViewModel();

        if(id == null || id == 0)
        {
            User user = _userService.GetUserByID(Convert.ToInt32(User.Identity.GetUserId()));
            model.SelectedUser = user;
        }
        else
        {
            model.SelectedUser = _userService.GetUserByID(id.Value);
        }

        return JsonResult(model,JsonRequestBehavior.AllowGet);
    }

然后你必须在ajax调用中加入 dataType：＆＃39; json＆＃39; 。

<强>更新

像这样制作ddl事件：

$("#SelectedUserID").change(function(){

ChangeEventOfDDL($(this).val());

});

你的职能：

function ChangeEventOfDDL(id)
{
 $.ajax({
        type: "POST",
        url: '@Url.Action("Index","Dashboard")',
        data: { id: id  },
        error: function () {
            alert("An error occurred.");
        },
        success: function (data) {

        }

    });
}

Answer 2

然后从您的ajax设置中删除dataType:"json"

在您的操作中，使用return PartialView("ViewName",model)代替return View("ViewName",model)

如果您返回部分视图，则返回视图（）

Answer 3

它将进入错误函数，因为您已将数据类型指定为JSON 因此dataType: 'json'但是你没有将JSON返回给你正在返回视图的函数，这就是抛出错误的原因。将您的操作结果更改为Json结果并执行此操作。

public JsonResult(int? id)
{
         // blah blah blah
       return Json(model.SelectedUser, JsonRequestBehavior.AllowGet);

}

Answer 4

* GT;只在你的Mvc控制器函数中写入这行

Configuration.ProxyCreationEnabled = fals *

电子;

JQuery Ajax Post不按预期工作

4 个答案: