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控制器方法的主要内容,如果未能解决你的问题,请参考以下文章
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