Question

我遇到一个问题，我需要调用jQuery代码来从HTML元素中获取值，如下所示：

@using (Html.BeginForm("Login", "Home",new { Checked = $('#checkbox5').checked }, FormMethod.Post,new { @class = "form-horizontal", role = "form" }))
{  
@Html.AntiForgeryToken()  
}

请注意，除了将整个模型传递到我的Login操作之外，我还试图传递一个名为“Checked”的可选参数。此参数基本上表明是否已在表单上选中“记住我”复选框。

复选框本身不是.NET默认使用的复选框，如：

@Html.CheckboxFor(somepropertyhere);

而是像这样的常规复选框：

   <input id="checkbox5" type="checkbox">
     <label for="checkbox5">
     Remember me?
     </label>

除了我的模型之外，如何将其作为额外参数传递时，如何获取此复选框的值？

所以我的方法到底会是这样的：

Public ActionResult Login(bool Checked, LoginViewModel model)
{
// To have the checked value here now...
}

P.S。而且由于某些原因我不能使用Html.CheckboxFor，但是我不想太详细了，因为这个问题没有意义（也许现在还不行，我不确定这是否可行）我想要实现的目标）。

有人能帮助我吗？

Answer 1

如果要发送任何变量，则应为字段设置名称，在服务器端，可以使用名称

进行调用

<input id="checkbox5" type="checkbox" **name="checkbox_name"** value="true">
 <label for="checkbox5">
 Remember me?
 </label>

在服务器端

Public ActionResult Login(bool checkbox_name = false, LoginViewModel model){
// To have the checked value here now...
}

Answer 2

您可以使用Checkbox字段名称在Controller中获取复选框值，如下所示：

bool isRememberMe=Request.Form["CheckBoxName"];

Answer 3

您无法在Razor块中使用JavaScript，因为它们在完全不同的时间运行。在将响应发送到客户端之前很久，Razor代码就在服务器端运行。只有在服务器将响应发送到客户端之后，JavaScript才会在客户端运行，并且Razor已经完成了它的工作。

首次加载时，复选框的值始终为默认值，在您的情况下为false。这就是为什么其他答案都没有帮助你的原因。用户必须与复选框进行交互并提交表单 first ，然后复选框将在处理表单的post操作中具有该用户设置值。如果由于错误而返回到表单，则可以使用复选框值。

要实际更改表单操作而不先发布，您必须处理复选框的click事件并通过JavaScript手动更改。但是，非常脆弱。如果你想要post上的复选框的值，那么只需将它绑定到你的动作接受的东西。例如：

@Html.CheckBox("checked", Request["checked"] as bool? ?? false)

然后：

[HttpPost]
public ActionResult MyPostAction(MyClass model, bool checked)

Answer 4

我真的不明白为什么你不想为RememberMe值使用新的属性模型，但我认为这可能适合你：

假设您的View看起来像这样：

@using (Html.BeginForm("Login", "Home", FormMethod.Post, new { @class = "form-horizontal", role = "form", id = "login-form" }))
{
    @Html.AntiForgeryToken()

    <div class="form-group">
        @Html.LabelFor(x => x.Username, new { @class = "form-control" })
        @Html.TextBoxFor(x => x.Username, new { @class = "form-control" })
    </div>

    <div class="form-group">
        @Html.LabelFor(x => x.Password, new { @class = "form-control" })
        @Html.PasswordFor(x => x.Password, new { @class = "form-control" })
    </div>

    <div class="form-group">
        <input id="checkbox5" type="checkbox">
        <label for="checkbox5">Remember me?</label>
    </div>

    <div class="form-group">
        <button type="submit" class="btn btn-primary">Login</button>
    </div>
}

假设您的Controller看起来像这样：

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Login(LoginViewModel model, bool rememberMe)
{
    // Do something with 'rememberMe'
    // Do something with 'model'
    return RedirectToAction("Index");
}

然后，您必须在登录视图中使用这样的Javascript，才能在提交事件完成之前替换表单操作：

$(function () {

    var form = $("#login-form");
    var checkbox5 = $("#checkbox5");

    form.submit(function () {
        var checked = checkbox5.is(":checked") ? "true" : "false";
        var action = updateQueryStringParameter(form.action || '', "rememberme", checked);
        form.attr('action', action);
    });

    // stolen from http://stackoverflow.com/a/6021027/1605778
    function updateQueryStringParameter(uri, key, value) {
        var re = new RegExp("([?&])" + key + "=.*?(&|$)", "i");
        var separator = uri.indexOf('?') !== -1 ? "&" : "?";
        if (uri.match(re)) {
            return uri.replace(re, '$1' + key + "=" + value + '$2');
        }
        else {
            return uri + separator + key + "=" + value;
        }
    }
});

请告诉我这是否适合您。

只是为了给出更多上下文：当你的动作中有一个基本类型的参数（比如bool或int）时，MVC期望在Url中使用这个参数;但是复杂类型的值（如LoginViewModel）应该作为HTTP POST中的请求主体传递。因此，如果要传递两者（复杂和原始），则需要小心地传递URL中的所有原始类型以及请求主体中复杂类型的值。

登录表格的POST可能如下：

POST /Home/Login?rememberMe=false

username=admin&password=secret

在razor代码块中调用jQuery代码

4 个答案: