Javascript 视图中的jquery未触发MVC控制器方法

我在名为ProductController的控制器中有以下方法：

public ActionResult LoadProducts(int prodID)
{
    return View();
}

我试图通过以下方式从查看cshtml页面触发它：

@section Scripts {
<script type="text/jscript">
    $('#MyProducts').change(function () {
        var selectedID = $(this).val();
        $.get('/Product/LoadProducts/' + selectedID, function (data) {
            window.alert(selectedID);
        });
    });
</script>
}

<div>
    @using (Html.BeginForm("Update", "Product", FormMethod.Post, new
    { enctype = "multipart/form-data" }))
    {
       @Html.DropDownList("MyProducts", 
       (IEnumerable<SelectListItem>)ViewBag.MyProducts as 
           IEnumerable<SelectListItem>, "Select")
    }
</div>

当我更改下拉列表中的值时，对jquery的调用会起作用，因为我通过弹出框对它进行了测试，但是让它触发控制器中的操作方法是不起作用的

谢谢。

按Url设置Url。操作

并将发送的变量名与接收的变量名放在一起

选择edid到ProdID

按Url设置Url。操作

并将发送的变量名与接收的变量名放在一起

选择edid到ProdID

---

在控制器中，可以使用HttpGetArribute定义路由。在不指定路线的情况下，该参数被视为可选参数，应称为Product/LoadProducts？prodId=1。HttpGetAttribute的示例：

---

在控制器中，可以使用HttpGetArribute定义路由。在不指定路线的情况下，该参数被视为可选参数，应称为Product/LoadProducts？prodId=1。HttpGetAttribute的示例：

---

建议：使用scripttype=text/javascript。我不是哪种浏览器支持jscript的专家，但经过20年的开发，我可以向您保证，所有浏览器都支持javascript

另外，我不鼓励您使用Farhad Bagherlo发布的代码。如果可能的话，您应该避免在脚本标记中使用razor代码，因为您可能希望将此代码移动到单独的JS文件中，或者稍后重构以使用TypeScript。另外，如果您已经知道所需的路径，为什么要调用服务器上的方法来获取端点/url呢。看起来很浪费。但是，您可以使用他概述的方法来确保您实际提供了正确的URL。如果他的代码有效，那么Url的值是多少？此外，命名变量的客户端标准是camelCase，所以url应该更低

如果正在调试代码并在控制器中设置断点。然后，您应该能够通过简单地导航到该路线，使其在该线路上中断

如果您转到Visual Studio，它是否真的在该行中断

---

编辑：@supernation是正确的，将获得我的投票，需要了解路由是如何定义的，以及传递给操作方法的参数/参数。很好的呼叫超越

建议：使用scripttype=text/javascript。我不是哪种浏览器支持jscript的专家，但经过20年的开发，我可以向您保证，所有浏览器都支持javascript

另外，我不鼓励您使用Farhad Bagherlo发布的代码。如果可能的话，您应该避免在脚本标记中使用razor代码，因为您可能希望将此代码移动到单独的JS文件中，或者稍后重构以使用TypeScript。另外，如果您已经知道所需的路径，为什么要调用服务器上的方法来获取端点/url呢。看起来很浪费。但是，您可以使用他概述的方法来确保您实际提供了正确的URL。如果他的代码有效，那么Url的值是多少？此外，命名变量的客户端标准是camelCase，所以url应该更低

如果正在调试代码并在控制器中设置断点。然后，您应该能够通过简单地导航到该路线，使其在该线路上中断

如果您转到Visual Studio，它是否真的在该行中断

---

编辑：@supernation是正确的，将获得我的投票，需要了解路由是如何定义的，以及传递给操作方法的参数/参数。很好的呼叫超越

我同意Collin的观点，在javascript中使用razor会让他们结婚，如果你试图将js拆分成自己的文件，那可能会很痛苦。我最近不得不经历它

编辑：这只是为了展示如何使用Url.Action，并且仍然能够通过使用div中的data属性将js分离到一个单独的文件中

我的建议是这样做：

@section Scripts {
<script type="text/javascript">
    $('#MyProducts').change(function () {
        var url = $('#mydiv').data('url') + '?prodId=' + selectedID;

        var selectedID = $(this).val();
        $.get(url, function (data) {
            window.alert(selectedID);
        });
    });
</script>
}

<div id="mydiv" data-url="@(Url.Action("ActionName","ConttrolerName"))">
    @using (Html.BeginForm("Update", "Product", FormMethod.Post, new
    { enctype = "multipart/form-data" }))
    {
       @Html.DropDownList("MyProducts", 
       (IEnumerable<SelectListItem>)ViewBag.MyProducts as 
           IEnumerable<SelectListItem>, "Select")
    }
</div>

---

我同意Collin的观点，在javascript中使用razor会使它们结合在一起，如果您试图将js拆分为自己的文件，这可能是一种痛苦。我最近不得不经历它

编辑：这只是为了展示如何使用Url.Action，并且仍然能够通过使用div中的data属性将js分离到一个单独的文件中

我的建议是这样做：

@section Scripts {
<script type="text/javascript">
    $('#MyProducts').change(function () {
        var url = $('#mydiv').data('url') + '?prodId=' + selectedID;

        var selectedID = $(this).val();
        $.get(url, function (data) {
            window.alert(selectedID);
        });
    });
</script>
}

<div id="mydiv" data-url="@(Url.Action("ActionName","ConttrolerName"))">
    @using (Html.BeginForm("Update", "Product", FormMethod.Post, new
    { enctype = "multipart/form-data" }))
    {
       @Html.DropDownList("MyProducts", 
       (IEnumerable<SelectListItem>)ViewBag.MyProducts as 
           IEnumerable<SelectListItem>, "Select")
    }
</div>

---

尝试将ProdId重命名为just id，以便默认路由匹配。太好了，谢谢你，stephen，我会将其标记为已解决。@stephen.vakil:这不是正确的方法，正确的方法是使用[HttpGet]属性设置路由。@Excelence我尝试使用[HttpGet]属性，它不起作用。@user2471103:您使用了错误的路由模板。检查我的答案。尝试将ProdId重命名为just id，以便默认路由匹配。太棒了，这成功了，谢谢stephen，我会将其标记为已解决。@stephen.vakil:这不是正确的方法，正确的方法是使用[HttpGet]设置路由

---

]属性。@超越性我尝试使用[HttpGet]属性，但无效。@user2471103:您使用了错误的路由模板。检查我的答案。但是使用section标记并不能解决将java脚本与cshtml视图分离的问题。它只允许更好地组织代码。@是的，这是真的，我只是想表明，如果他的代码像我发布的编辑版本一样，那么他可以将其分离。我没有在这里展示分离本身。只是使用div上的数据，然后能够在js中检索值。但是使用section标记并不能解决将java脚本与cshtml视图分离的问题。它只允许更好地组织代码。@是的，这是真的，我只是想表明，如果他的代码像我发布的编辑版本一样，那么他可以将其分离。我没有在这里展示分离本身。只需使用div上的数据，然后就可以在js中检索值。

[HttpGet("[controller]\[action]\{prodId}")]
public ActionResult LoadProducts(int prodID)
{
     return View();
}

@section Scripts {
<script type="text/javascript">
    $('#MyProducts').change(function () {
        var url = $('#mydiv').data('url') + '?prodId=' + selectedID;

        var selectedID = $(this).val();
        $.get(url, function (data) {
            window.alert(selectedID);
        });
    });
</script>
}

<div id="mydiv" data-url="@(Url.Action("ActionName","ConttrolerName"))">
    @using (Html.BeginForm("Update", "Product", FormMethod.Post, new
    { enctype = "multipart/form-data" }))
    {
       @Html.DropDownList("MyProducts", 
       (IEnumerable<SelectListItem>)ViewBag.MyProducts as 
           IEnumerable<SelectListItem>, "Select")
    }
</div>