如何在 mvc 中更改 @Html.EditorFor 时进行回发？

Question

我有一个代表搜索字段的 @Html.EditorFor。当字段中的文本更改时，我试图在控制器中进行搜索。我不知道每次输入中的文本更改时如何去回发，而不是在单击提交按钮时。

型号：

public class MainWindow
{
    [Key]
    public int MainWindowId { get; set; } 
    public string SearchedString { get; set; }
}

查看：

@using (Html.BeginForm())
{
    <div>
        <label>search:</label>
        @Html.EditorFor(model => model.SearchedString, new htmlAttributes = new { @class = "form-control" } })
        @Html.ValidationMessageFor(model => model.SearchedString, "", new { @class = "text-danger" })      
        <input type="submit" value="search" class="btn btn-default" />
    </div>
}

控制器：

[HttpPost]
public ActionResult Index([Bind(Include = "MainWindowId,SearchedString")] MainWindow mw)
{
    ManageProduct mp = new ManageProduct();
    if (ModelState.IsValid)
    {
       //search code
        return View("Index",mw);
    }
    return View(mw);
}

Answer 1

使用AJAX提交表格。我将在示例中使用 jQuery。

聆听编辑器呈现的 <input> 的变化。

EDIT: 为实现这一点，我们使用编辑器提供给 HTML 输入的 ID 作为 jQuery 选择器（不要更改 ID ，因为 MVC 模型绑定器希望它采用某种格式）。使用浏览器开发者工具 (F12) 查找 ID。

您还需要为表单元素提供一个 ID，以便我们对其进行序列化以获取 post 数据。还提供一个占位符来呈现结果。

@using (Html.BeginForm("Index", "YourController", FormMethod.Post, new { id = "formId" })) {

<div id="placeholderId"></div>
@Html.EditorFor(model => model.SearchedString, new htmlAttributes = new { @class = "form-control" } })

JS函数转post形式，嵌入razor视图：

<script type="text/javascript">
function postForm() {
    $.ajax({
        url: $('#formId').attr('action'),
        type: 'POST',
        data: $('#formId').serialize(),
        success: function(resultData) {
            if (resultData) {
                // update some placeholder element with the received data
                $('#placeholderId').html(resultData);
            }
        }
    });
}

JS 监听输入的变化，嵌入在剃须刀视图中。监听 keyup 事件，因为 change 只会在输入失去焦点后触发。在这里，我假设编辑器为输入提供了 id="SearchedString"（可能会有所不同，例如，如果将其呈现为部分视图）。

$('#SearchedString').on('keyup', function () {
        postForm();
});
</script>

为了防止您的服务器在用户键入时被请求淹没，请查看 jQuery.debounce

如何在 mvc 中更改 @Html.EditorFor 时进行回发？

How to go to postback on change of @Html.EditorFor in mvc?

asp.net-mvc

postback