JQuery将'空参数传递给MVC控制器方法

Posted

技术标签:

【中文标题】JQuery将\'空参数传递给MVC控制器方法【英文标题】:JQuery passing 'null parameters to MVC controller methodJQuery将'空参数传递给MVC控制器方法 【发布时间】:2015-01-25 08:49:06 【问题描述】:

问题背景。

我有一个视图,其中包含一个按钮,单击该按钮时会传递“p”标签和“h3”标签的内容。这些标签是从对应控制器传递的模型列表中填充的。

我在控制器上有一个“AddToCart”方法,该方法将参数从视图中的 Ajax JQuery 函数传递给它。

问题:

下面显示了 JQuery Ajax 调用和 cshtml 标记。 理想情况下,我想将内容传递给函数。目前我根据标签的 id 从标签中获取信息。

查看标记:

<h3 class="panel-title boldFeatures" id="name">@(Model.ElementAt(0).ProductName)</h3>

 <div class="panel-body">
      <img src="~/Images/LionToy.png" class="img-circle" id="featuresImages" >
      <p>@(Model.ElementAt(0).ProductSummary)</p>
      <p id="qty">@(Model.ElementAt(0).productPrice)</p>

  @Html.ActionLink("Add To Cart", "AddToCart", null, new  id = "addToCart" , new  @class = "btn btn-primary btn-block" )

Ajax 函数:

  <script>
    $("#addToCart").click(function (e) 

        e.preventDefault();
        $.ajax(
            url: '/HomePage/AddToCart',
            type: 'POST',
            data:  name: $('#name').val(), qty: $('#qty').val() ,
        );
    );
    </script>

控制器 AddToCart 方法:

 public void AddToCart(string name, string qty)
 
    //Add to cart logic.
 

问题:

如图所示,控制器方法将两个参数都作为“null”传递。

编辑:

我已经尝试了以下所有建议,但仍然将两个参数作为“null”传递。

【问题讨论】:

你可以查看这个答案,希望对你有帮助***.com/questions/10757001/… 您只需要使用text() 而不是val() 如果您在其他(正确)答案中指出的那样不起作用,那么这里还有其他问题。一个可能是Model.ElementAt(0).ProductSummary 的奇怪用法你是从一个集合中渲染它吗(即你用Model.ElementAt(1)... 等重复上面的代码,在这种情况下你有无效的html,你需要更改这个html 并使用相对选择器(不是黑客) 【参考方案1】:

这段代码中有很多东西很时髦,所以我将发布一些你可以复制粘贴到一个新的 mvc 项目中的东西,它会立即工作:

试试这个:

查看代码:

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
    $(document).ready(function() 
        $("#addToCart").click(function (e) 
            e.preventDefault();
            alert($(this).data("name"));
            $.ajax(
                url: '@Url.Action("AddToCart")',
                type: 'POST',
                data:  name: $(this).data("name"), qty: $(this).data("quantity") ,
            );
        );
    );
</script>

<h3 class="panel-title boldFeatures" id="name">@(Model.ElementAt(0).ProductName)</h3>

<div class="panel-body">
    <img src="~/Images/LionToy.png" class="img-circle" id="featuresImages" >
    <p>@(Model.ElementAt(0).ProductSummary)</p>
    <p id="qty">@(Model.ElementAt(0).ProductPrice)</p>

        <input type="button" data-name="@Model.ElementAt(0).ProductName" data-quantity="@Model.ElementAt(0).Quantity" value="Add to Cart" id="addToCart" />
</div>

在控制器中:

    public void AddToCart(string name, string qty)
    
        //Add to cart logic.
        string qname = name + qty; //put a breakpoint here and you'll see name is populated.
    

【讨论】:

非常感谢 C Bauer 这终于解决了我的问题。如果允许,我会在 22 小时内奖励你!再次非常感谢! 很高兴帮助我的朋友! @user1352057,您对无效的 html 有什么不理解?【参考方案2】:

h3 和段落的文本内容没有价值。将您的 ajax 调用更改为

data:  name: $('#name').text(), qty: $('#qty').text() ,

【讨论】:

感谢您的回复。我试过使用 .text() 方法,它仍然在传递 null 的 如果您在脚本中放置断点,视图上的 $('#name').text() 的值是多少?【参考方案3】:

你确定你的 jquery 被调用了吗?尝试使用它并查看值是否仍然为空:

@Html.ActionLink("Add To Cart", "AddToCart", new  name = Model.Name, qty = Model.Quantity, new  id = "addToCart" , new  @class = "btn btn-primary btn-block" )

我假设你想在这里做的是:

http://api.jquery.com/data/

为链接添加数据属性:

 @Html.ActionLink("Add To Cart", "AddToCart", null, new  id = "addToCart", data-name = "@Model.Name", data-quantity="@Model.Quantity" , new  @class = "btn btn-primary btn-block" )

在脚本中访问它们:

  <script>
    $("#addToCart").click(function (e) 

        e.preventDefault();
        $.ajax(
            url: '/HomePage/AddToCart',
            type: 'POST',
            data:  name: $(this).data("name"), qty: $(this).data("quantity") ,
        );
    );
    </script>

【讨论】:

这将是做需要做的最干净的方式。该链接已经可以访问名称和数量 - 为什么要通过 jQuery 将其附加到数据集来使其复杂化? @C Bauer 感谢您的回复。这确实有效,但返回一个空视图。我使用 Ajax 方法的原因是我可以将数据发布到 AddToCart 方法,而不会出现空白视图问题。如果有一种方法可以在不使用 ActionLink 返回空白视图的情况下做到这一点,那就太好了。 我一直在绞尽脑汁想出最好的方法,我唯一能想到的就是在你的按钮上添加两个数据属性,其中包含模型名称和数量,然后调用 $( this).data("name") 和 $(this).data("quantity")。 @C Bauer 再次感谢您的意见。可悲的是,这仍然没有解决问题。【参考方案4】:

你应该使用 text() 而不是 val()。 h3 和 p 标签有文本而不是值。所以

$.ajax(
        url: '/HomePage/AddToCart',
        type: 'POST',
        data:  name: $('#name').text(), qty: $('#qty').text() ,
    );

【讨论】:

【参考方案5】:

删除数据对象后的最后一个逗号并使用 text() 试试

<script>
$("#addToCart").click(function (e) 
    e.preventDefault();
    $.ajax(
        url: '/HomePage/AddToCart',
        type: 'POST',
        data:  name: $('#name').text(), qty: $('#qty').text() 
    );
);
</script>

【讨论】:

感谢您的回复。 .text() 仍然传递“空值”。【参考方案6】:

好吧,你不能只得到val 形式的非输入元素。由于您没有输入,请尝试改用html。 (不过,奇怪的是text 不起作用。你那里有任何价值吗?)

$("#addToCart").click(function (e) 
    e.preventDefault();
    $.ajax(
        url: '/HomePage/AddToCart',
        type: 'POST',
        data:  name: $('#name').html(), qty: $('#qty').html() 
    );
);

或者,您可以将隐藏的输入放入您的 html 中并获取它们的值:

<input type="hidden" id="name-hidden" value="@(Model.ElementAt(0).ProductName)" />
<input type="hidden" id="qty-hidden" value="@(Model.ElementAt(0).productPrice)" />

然后在你的javascript中使用val

$("#addToCart").click(function (e) 
    e.preventDefault();
    $.ajax(
        url: '/HomePage/AddToCart',
        type: 'POST',
        data:  name: $('#name-hidden').val(), qty: $('#qty-hidden').val() 
    );
);

【讨论】:

【参考方案7】:

正如其他人所说,您应该使用 .text() 而不是 .val()。

此外,我们假设这些值是从您的 ViewBag 数据中正确填充的。

如果使用这些 ID 在您的 p 和 h3 标记中填充该数据,则此代码应该可以工作。您可以尝试的一件事是将它们作为查询字符串参数传递:

$.ajax(
    url: '/HomePage/AddToCart?name=' + $('#name').text() + '&qty=' + $('#qty').text(),
    type: 'POST'
);

【讨论】:

以上是关于JQuery将'空参数传递给MVC控制器方法的主要内容,如果未能解决你的问题,请参考以下文章

将参数传递给 ajax 发布请求会返回错误

Spring MVC:将模型作为参数传递给控制器​​方法VS显式实例化它

如何将参数传递给 jQuery document.ready() 函数(ASP.NET MVC、C#)

将带有 window.location.href 的参数传递给 MVC ActionResult

使用 jQuery Ajax 将单个对象传递给 MVC 控制器方法

模型在使用 C# 将 POST 方法作为参数传递给 ASP.NET MVC 中同一控制器的 GET 方法时获取 NULL