JavaScript 不向控制器 MVC 发送参数
Posted
技术标签:
【中文标题】JavaScript 不向控制器 MVC 发送参数【英文标题】:JavaScript not Sending Parameter to Controller MVC 【发布时间】:2015-11-21 01:29:14 【问题描述】:我有以下看法
@using System.Linq;
@model MyCompanyNET.Models.ViewModels.AdministratorViewModel
<style type="text/css">
span
padding-right: 10px;
...
</style>
<div class="manage">
<ul class="nav nav-tabs" id="myTab">
<li class="active">
<a data-toggle="tab" href="#invite">
<span class="glyphicon glyphicon-inbox"></span>Invite
</a>
</li>
...
</ul>
<div class="tab-content">
<div id="invite" class="tab-pane active fade in">
@html.Partial("_InvitePartial", Model)
</div>
...
</div>
</div>
@section scripts
<script>
$(function ()
$("input[type=button]").click(function ()
var data_email = $('#email').val();
var data_product = $('#product option:selected').text();
$.ajax(
url: '@Url.Action("SendInvite")',
type: 'POST',
data: email: data_email, product: data_product ,
success: function (result)
$('#fail_message').html(result.result_failure);
$('#success_message').html(result.result_success);
);
);
);
</script>
局部视图是
@using (Html.BeginForm("SendInvite", "Tools", FormMethod.Post,
new
@class = "form-horizontal",
enctype = "multipart/form-data",
role = "form"
))
@Html.AntiForgeryToken()
<h2>Invite Users</h2>
<div class="form-group">
@Html.LabelFor(m => m.EmailAddress, new @class = "col-md-2 control-label" )
<div class="col-md-10">
@Html.TextBoxFor(m => m.EmailAddress, new @class = "form-control", id = "email" )
@Html.ValidationMessageFor(m => m.EmailAddress)
</div>
</div>
<div class="form-group">
@Html.Label("Access To", new @class = "col-md-2 control-label" )
<div class="col-md-10">
@Html.DropDownList("Product", new SelectList(
new List<Object>
new Text = "Product1", Value = "Product1" ,
new Text = "Product2", Value = "Product2" ,
new Text = "All", Value = "All" ,
"Value",
"Text"),
new @class = "form-control", id = "product" )
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<span id="fail_message" class="label label-danger"></span>
<span id="success_message" class="label label-success"></span>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="button" value="Invite User" class="btn btn-primary" />
</div>
</div>
我的控制器是
[AllowAnonymous]
public async Task<JsonResult> SendInvite(string email, string product)
ApplicationUser user = null;
string result = String.Empty;
if (ModelState.IsValid)
if (String.IsNullOrEmpty(email))
return Json(new
result_success = String.Empty,
result_failure = "Please enter and email address"
, JsonRequestBehavior.AllowGet);
... // Do stuff with email and product.
现在,当这个局部视图代码在视图本身中时,一切正常。我会通过我的控制器方法SendInvite
获得输入的电子邮件地址和选定的产品,但现在按钮甚至没有触发。
现在,我改变了
<input type="button" value="Invite User" class="btn btn-primary"/>
使用submit
<input type="submit" value="Invite User" class="btn btn-primary"/>
这现在调用我的控制器方法,但没有email
参数,它始终是null
(?)。更糟糕的是,return Json(new ...
也不会呈现我的<span id="success_message" class="label label-success"></span>
s,而且它过去常常在主视图中显示所有内容。为什么会发生这种情况,我该如何解决?
感谢您的宝贵时间。
【问题讨论】:
你看过 HTML / 调试你的 javascript 吗? 老兄,我太菜鸟了,我不知道如何调试 javascript。我曾尝试在 VS2013 的 javascript 中设置断点,但它们从未被击中。任何链接或建议? 如果您在 Chrome 中打开调试控制台(不确定其他人是否有),请转到网络选项卡并提交表单。您应该会在框中看到一个新请求,单击它并查看表单数据。我偷偷怀疑它以不同于 .NET 预期的名称传递电子邮件。无论哪种方式,它都会让您知道问题是您的视图还是您的控制器。 你需要从浏览器调试javascript。一旦视图被渲染,MVC 就会完成它,直到你调用另一个方法。这就是网络的无状态特性。 伙计们,非常感谢您的帮助,非常感谢。我在一家小公司工作,并被要求开发一个新网站。进展顺利,但我的经验为零,这对妈妈来说非常有价值,非常感谢您抽出宝贵的时间。 【参考方案1】:电子邮件字段的名称是 EmailAddress
而不是电子邮件.. 将您的参数名称更改为 string EmailAddress
或者您可以将您的标记更改为
@Html.TextBoxFor(m => m.EmailAddress, new @class = "form-control", Name="email", id = "email" )
trick 是使字段的名称与您的参数名称匹配,而不是 id。
【讨论】:
精彩的解释,谢谢。对此非常新,所以这真的很有帮助。最后一件事,知道为什么我的 Json 返回值现在无法显示标签,而是只显示带有文本的空白屏幕吗? 这就是答案,如果你能告诉我为什么我的标签无法呈现,那就是赏金! 听起来您的表单实际上是在提交,而不是由您的 javascript 函数处理。您是否需要<form>
,因为您使用 ajax 回发数据?
我真的不知道。我已经采取了一个在线示例并建立了它。我对 Web/MVC 的了解真的很少……你认为我应该把它拿出来吗?
dotnetfiddle.net/cWvW7x 这对你来说可能没有多大意义,但我试图指出你的部分 html 应该是什么......以及你的 javascript 应该是什么样的......我也在使用具有 EmailAddress 属性和 Product 属性的 SendInvite
操作的参数模型。 javascript 应该在帖子中反映这些属性名称【参考方案2】:
Killercam,关于您的表单提交。你把它改回type="button"
而不是type="submit"
了吗?如果没有,原因是当您单击按钮时,它会提交它并忽略您的 JavaScript。
【讨论】:
【参考方案3】:尝试通过 HttpPost 装饰您的操作方法
【讨论】:
以上是关于JavaScript 不向控制器 MVC 发送参数的主要内容,如果未能解决你的问题,请参考以下文章
使用请求参数将javascript变量传递给spring MVC控制器