Submit data from textbox to asp net mvc controller using ajax

Question

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.

What data does the controller receive? I assume that in the Index code you can log the contents of model. — Hew Wolff
– 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.com/questions/30459261/… @HewWolff — Eugene Chybisov
– Eugene Chybisov, Commented May 26, 2015 at 16:41
You can also try @Ajax.BeginForm and declare you js functions — shammelburg
– shammelburg, Commented May 26, 2015 at 17:06

shammelburg · Accepted Answer · 2015-05-27 07:13:33Z

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.

answered May 27, 2015 at 7:13

shammelburg

7,3687 gold badges29 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Pipe2290 · Accepted Answer · 2015-05-26 17:15:39Z

3

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

edited May 26, 2015 at 17:15

answered May 26, 2015 at 16:51

Pipe2290

1682 silver badges11 bronze badges

2 Comments

Eugene Chybisov Over a year ago

I call keystroke() when user click to input and it it becomes in focus, whatch my code in html helper... new { @class = "form-control", onclick="keystroke()", id = "search" }

Eugene Chybisov Over a year ago

keypress doesnt work in #search and I dont know why... @Pipe2290

Collectives™ on Stack Overflow

Submit data from textbox to asp net mvc controller using ajax

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related