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

Question

我在名为“ 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的调用有效，但是我通过弹出框对其进行了测试，但是无法触发它来触发控制器中的action方法。

谢谢。

Answer 1

通过Url.Action设置Url

 var Url='@(Url.Action("ActionName","ConttrolerName"))';

然后将send的变量名与接收到的变量名放在一起

SelectedID到ProdID

---

<script type="text/jscript">
        $('#MyProducts').on("change",function () {
            var Url='@(Url.Action("LoadProducts","Product"))';
            var SelectedProdID = $(this).find("option:selected").val();
            $.get( Url,{prodID:SelectedProdID}, function (data) {
                window.alert(selectedID);
            });
        });
</script>

Answer 2

在您的控制器中，您可以使用HttpGetArribute定义路由。 如果未指定路由，则该参数被视为可选参数，应将其称为Product/LoadProducts?prodId=1 。 HttpGetAttribute示例：

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

Answer 3

建议：使用脚本类型=“ text / javascript”。 我不是哪个浏览器支持“ jscript”的专家，但是经过20年的发展，我可以向您保证所有浏览器都支持javascript。

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

如果要调试代码并在控制器中设置断点。 那么您只需导航到该路线，就能使它在那条线上断开。

如果您转到http：// localhost：post / Product / LoadProducts / 1 ，它实际上在Visual Studio的该行上中断了吗？

编辑：@Transcendent是正确的，将得到我的投票，需要了解如何定义路由与传递给action方法的参数/参数的关系。 尼斯电话超然！

Answer 4

我同意Collin的观点，即在您的javascript中使用剃刀将它们嫁给他们，如果您尝试将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>