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 ... 也不会呈现我的&lt;span id="success_message" class="label label-success"&gt;&lt;/span&gt;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 函数处理。您是否需要 &lt;form&gt;,因为您使用 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控制器

AFHTTPRequestOperationManager 不向 php 页面发送参数

Symfony表单不向控制器发送文件

AJAX发布不向laravel控制器发送数据

UIGestureRecognizer 不向其他类发送操作

PutAsync 不向 web api 发送请求,但提琴手工作正常