javascript - 将值从 javascript 传递到 Action Result

Question

我试图将变量形式的 javascript 传递给操作结果，我没有收到任何错误，但我也无法让它工作。

我有以下 JavaScript，当用户选择一个项目时，他们选择的项目应传递到操作结果中。

.on('select_node.jstree', function (e, data) {
//alert('You selected node: ' + data.node.text);
url.actionURL("/SinqLaison/UpdateItemData", data.node.text);
$.ajax({
    url: '@Url.Action("UpdateItemData", "SinqLaison")',
    type: 'POST',
    data: { query: data.node.text }
});

我尝试将查询传递给的操作结果是

public ActionResult UpdateItemData(string query)
    {
        List<MarketItem> items = new List<MarketItem>();

        SqlConnection connection = new SqlConnection();
        connection.ConnectionString = connString;
        SqlCommand sqlCom = new SqlCommand("SELECT * FROM Items where Id =" + query , connection);
        connection.Open();
        SqlDataReader reader = sqlCom.ExecuteReader();
        while (reader.Read())
        {
            var item = new MarketItem()
            {
                id = Convert.ToInt32(reader["Id"]),
                name = reader["Name"].ToString(),
                marketParentGroup = Convert.ToInt32(reader["MarketGroup"] == DBNull.Value ? 0 : Convert.ToInt32(reader["MarketGroup"])),
                icon = reader["Icon"].ToString()
            };
            items.Add(item);
        }
        connection.Close();

        return View();

我在 FireFox 调试器中收到以下 404 错误。我确信操作和 Controller 是正确的。我的 javascript sysntax 错误吗？

Answer 1

从屏幕截图来看，您的代码似乎放置在外部 javascript 文件中。 @Url.Action 辅助方法是一个 C# 方法，需要将其放置在服务器执行的文件中。 View 文件就是执行此操作的地方。服务器无法执行放置在 javascript 文件中的 C# 方法调用。

您需要在 View 中执行Url.Action方法并将其传递给外部js文件。

因此，在您的 View 文件中，执行 Url.Action 辅助方法并将该值(相对 URL)存储到 JavaScript 变量中。您需要确保在加载具有 ajax 调用的脚本之前执行此操作。还要确保使用 JavaScript 命名空间以避免覆盖邪恶的全局变量。

<script>
    var myProj = myProj || {};
    myProj.urls = myProj.urls || {};
    myProj.urls.updateItemDataUrl='@Url.Action("UpdateItemData", "Home")';    
</script>
<script src="~/Scripts/MyExternalJsFileWhichHasAjaxCode.js"></script>

现在在您的外部 javascript 文件中，您可以像这样访问它

$.ajax({
    url: myProj.urls.updateItemDataUrl,
    type: 'POST',
    data: { query: 'myTest' }
});