Question

我在名为＆＃34; ProductController＆＃34;：

的控制器中有以下方法

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

设置网址

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

并将发送的变量名称与收到的相同变量放在一起

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

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

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

如果您正在调试代码并在控制器中设置断点。那么你应该能够通过简单地导航到那条路线来打破它。

如果你去http://localhost:post/Product/LoadProducts/1，它确实在Visual Studio中的那一行上打破了吗？

编辑：@Transcendent是正确的并且会得到我的投票，需要了解如何定义路由与传递给action方法的参数/参数。很好的称呼Transcendent！

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>

MVC控制器方法不是由视图中的jquery触发的

4 个答案: