在 razor 代码块中调用 jQuery 代码

Question

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

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

请注意，除了将整个模型传递给我的登录操作之外，我还尝试传递一个名为“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...
}

附：而且由于某些原因，我不能使用 Html.CheckboxFor ，但我不想过多介绍细节，因为那时这个问题没有意义（也许它甚至现在都没有，我不确定这是否可行我想要达到的目标）。

谁能帮帮我？

Answer 1

您可以使用这样的复选框字段名称在控制器中获取复选框值：

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

Answer 2

如果你想发送任何变量，你应该为字段设置名称，在服务器端你可以用名称调用它

<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 3

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

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

要实际更改表单操作而不先发布，您必须处理复选框的单击事件并通过 JavaScript 手动更改它。但是，这非常很脆弱。如果您想要 post 复选框的值，则只需将其绑定到您的操作接受的内容。例如：

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

然后：

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

Answer 4

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

假设您的视图如下所示：

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

假设你的控制器看起来像这样：

[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