javascript - Submit data from textbox to asp net mvc controller using ajax - Stack Overflow

admin管理员组

文章数量:1416642

I have this

View

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

Controller

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

and its does not work.

I want to when user press the Enter key in search-input, I sent to controller the text which he entered, and the value of firstint. If I remove all javasript, then pressing Enter all normally sends to the controller but I need the firstint value too.

I have this

View

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

Controller

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

and its does not work.

I want to when user press the Enter key in search-input, I sent to controller the text which he entered, and the value of firstint. If I remove all javasript, then pressing Enter all normally sends to the controller but I need the firstint value too.

• javascript
• c#
• jquery
• ajax
• asp-mvc

Share Improve this question Follow edited Aug 24, 2018 at 11:08 Eugene Chybisov asked May 26, 2015 at 16:25 Eugene ChybisovEugene Chybisov 1,71422 gold badges2525 silver badges3333 bronze badges 4

• What data does the controller receive? I assume that in the Index code you can log the contents of model. – Hew Wolff Commented May 26, 2015 at 16:34
• The user enters a string in the input field. I'm sending a string to the controller and some number. This number is calculated when user press a key. How can I do that? Watch this stackoverflow./questions/30459261/… @HewWolff – Eugene Chybisov Commented May 26, 2015 at 16:41
• You can also try @Ajax.BeginForm and declare you js functions – shammelburg Commented May 26, 2015 at 17:06
• can you please write a working solution? @SHammelburg – Eugene Chybisov Commented May 26, 2015 at 17:13

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

An example of using Ajax.BeginForm, you will need to reference

jquery.unobtrusive-ajax.js

otherwise it'll be like regular Html.BeginForm.

View:

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

Controller:

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

Hope this helps.

When you try to execute, the keypress event doesn't find firstint because it doesn't exists outside the function keystroke. So you have to declare it outside in the "global" variables (visible to all functions) and then you can use it inside the keypress event. Your code should like this:

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

本文标签： javascriptSubmit data from textbox to asp net mvc controller using ajaxStack Overflow