使用 jQuery Ajax MVC4 将下拉列表的选定值发送回控制器操作

Question

我正在尝试使用 MVC4 Web 应用程序中的 jQuery Ajax 将下拉列表中选定项目的值发送回控制器中的 Action 方法。我有一个名为 MeditechDropDown 的下拉列表，这是我的 jQuery 函数，它不太工作。我设法达到我的 Action 方法，但传入的值为 null。

jQuery(document).ready(function () {
    $("#MeditechDropDown").change(function () {
        $.ajax({
            url: "/Home/PopulateEmailAddressUI",
            data: JSON.stringify('id=' + $(this).val()), // Send value of the drop down change of option
            type: 'POST',
            contentType: 'application/json; charset=utf-8',
            success: function (data) {
                // Variable data contains the data you get from the action method
            }
        });
    });
});

动作名称是 PopulateEmailAddressUI。有人会善意地阐明我做错了什么吗？我知道我没有正确编写我的 jQuery 函数。非常感谢。

Answer 1

我在 .NET MVC4 中编写了一些成功的 jQuery ajax 调用。这就是他们的样子：

$('#projectList').on('click', 'li', function () {
        pid = $(this).data('id');

        $.ajax({
            type: 'POST',
            url: '/Admin/GetProject',
            data: '{ id: ' + pid + ' }',
            contentType: 'application/json; charset=utf-8',
            dataType: 'json',
            success: function (data) {
                projectRetrieved(data);
            }
        });

    });

控制器：

        [HttpPost]
        public ActionResult GetProject(int id) {
            string connStr = ConfigurationManager.ConnectionStrings["Conn"].ConnectionString;
            SqlConnection conn = new SqlConnection(connStr);

            string sql = "SELECT * FROM [Portfolio] WHERE [id] = @id";
            SqlDataAdapter da = new SqlDataAdapter(sql, conn);
            da.SelectCommand.Parameters.Add(new SqlParameter("@id", id));
            DataTable dt = new DataTable();

            conn.Open();
            da.Fill(dt);
            da.Dispose();
            conn.Close();

            return Json(objConv.DataTableToArrayList(dt), JsonRequestBehavior.AllowGet);
        }

Answer 2

你可以这样写：

     jQuery(document).ready(function () {
    $("#MeditechDropDown").change(function () {
        var id=$(this).val();
        $.ajax({
            url: "/Home/PopulateEmailAddressUI",
            data: {clientID:id},
            type: 'POST',
            contentType: 'application/json; charset=utf-8',
            success: function (data) {
                // Variable data contains the data you get from the action method
            }
        });
    });})

数据中的参数名称应如控制器参数名称

Answer 3

这是完整的 WORKING jQuery 脚本：

jQuery(document).ready(function () {
    $("#MeditechDropDown").change(function () {
        var id = $(this).find(":selected").val()
        var clientID = { "clientID" : id }
        console.log(id)
        $.ajax({
            url: "/Home/PopulateEmailAddressUI",
            data: JSON.stringify(clientID),
            type: 'POST',
            contentType: 'application/json; charset=utf-8',
            success: function (data) {
                // Variable data contains the data you get from the action method
            }
        });
    });
});

谢谢大家，特别感谢zgood :)