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

时间:2015-05-26 16:25:59

标签: javascript c# jquery ajax asp.net-mvc

我有这个

查看

@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 Enter通常发送到控制器但我也需要firstint值。

2 个答案:

答案 0 :(得分:3)

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

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');
            }
        });
 };

答案 1 :(得分:3)

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

希望这有帮助。