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

本文关键字：asp net mvc 控制器 文本 ajax 提交 数据 使用 | 更新日期: 2023-09-27 17:50:45

我有这个

<<p> 视图/strong> 
@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);
            }

ViewModel 

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的值发送给控制器。如果我删除所有的javascript，然后按Enter键通常发送到控制器，但我也需要firstint值。

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

使用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>

当您尝试执行时，keypress事件不会找到firstint，因为它不存在于函数keystroke之外。因此，您必须在"全局"变量(对所有函数可见)中声明它，然后您可以在按键事件中使用它。你的代码应该像这样:

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');
            }
        });
 };
相关文章：