使用ajax将数据从文本框提交到asp net mvc控制器

Question

我有这个

查看

@using (Html.BeginForm("Index", "Home", FormMethod.Post, new { @class = "form-inline", role = "form" }))
    {
        @Html.TextBox("SearchString", ViewBag.SearchFilter as string, new { @class = "form-control", onclick="keystroke()", id = "search" })
    }

控制器

//GET: Home
public async Task<ActionResult> Index(MyViewModel model)
            {
                //...
                if (model.SearchString != null)
                {
                    //...
                    var myString = model.SearchString;
                    var b = model.FirstInt
                }
                //...
                return View(model);
            }

视图模型

public class MyViewModel
{
//...
    public string SearchString { get; set; }
    public int? FirstInt { get; set; }
}

Javascript

function keystroke() {
        var firstint = 1;
        $("#search").keypress(function(event) {
            if (event.which === 13) {
                event.preventDefault();
                $("form").submit(function() {
                    var text = $('#SearchString').val();
                    sendForm(firstint, text);
                });
            }
        });
    }
function sendForm(firstint, text) {
            var data = {FirstInt: firstint, SearchString: text}
            $.ajax({
                url: "Home/Index",
                type: 'POST',
                data: data,
                success: function () {
                    alert('success');
                }
            });
        };

它不起作用。

我想当用户在搜索输入中按下 Enter 键时，我将他输入的文本和 firstint 的值发送给控制器。如果我删除所有 javasript，然后按 Enter all 通常会发送到控制器，但我也需要 firstint 值。

Answer 1

一个使用Ajax.BeginForm的例子，你需要参考

jquery.unobtrusive-ajax.js

否则它将像常规的 Html.BeginForm。

查看：

@using (Ajax.BeginForm("Index", "Home", 
    new AjaxOptions { HttpMethod = "Post", OnFailure = "OnFailure", OnSuccess = "OnSuccess" }))
{
    <input type="text" name="Id" />
    // Your HTML inside  your form...
    <button type="submit">Submit Form</button>
}

控制器：

[HttpPost]
public ActionResult Index(FormCollection collection)
{
    var Id = collection["Id"];
    return View();
}

Javascript：

<script>
    function OnFailure(x, s, e) {
        alert(e);
        // More code here...
    }
    function OnSuccess(d) {
        alert(d);
        // More code here...
    }
</script>

希望这会有所帮助。

Answer 2

当您尝试执行时，keypress 事件找不到 firstint，因为它在函数击键之外不存在。所以你必须在“全局”变量（所有函数可见）中声明它，然后你可以在按键事件中使用它。你的代码应该是这样的：

var firstint;

$("#search").keypress(function(event) {            
        if (event.which === 13) {
            event.preventDefault();                
        }
    });

$("form").submit(function() {
          var text = $('#SearchString').val();
          sendForm(text);
    });

function keystroke() {
    firstint = 1;        
    $("form").submit();
}

function sendForm(text) {
        var data = {FirstInt: firstint, SearchString: text}
        $.ajax({
            url: "Home/Index",
            type: 'POST',
            data: data,
            success: function () {
                alert('success');
            }
        });
 };