JavaScript 不向 Controller MVC 发送参数

Question

我有以下看法

@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>
}

局部 View 是

@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>
}

我的 Controller 是

[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.
}

现在，当此部分 View 代码位于 View 本身时，一切正常。我会将输入的电子邮件地址和选定的产品都发送到我的 Controller 方法 SendInvite ，但现在按钮甚至没有触发。

现在，我已经改变了

<input type="button" value="Invite User" class="btn btn-primary"/>

使用submit

<input type="submit" value="Invite User" class="btn btn-primary"/>

这现在调用我的 Controller 方法但没有 email参数，始终为 null (？)。更糟糕的是，return Json(new ...也不呈现我的 <span id="success_message" class="label label-success"></span> s 过去，当一切都在主视图中时。为什么会发生这种情况，我该如何解决？

感谢您的宝贵时间。

Answer 1

电子邮件字段的名称是 EmailAddress 而不是 email.. 将参数名称更改为 string EmailAddress 或者您可以将标记更改为

@Html.TextBoxFor(m => m.EmailAddress, new { @class = "form-control", Name="email", id = "email" })

诀窍是让字段名称和您的参数名称匹配，而不是 ID。