Send data from textbox with ajax to asp.net mvc 5 controller

Question

I need some help. I write little app using ASP.NET MVC5 with JavaScript, jQuery, Ajax... and I can't send data from javascript to MVC Controller and change the model.

ViewModel

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

Javascript

    function keystroke() {
        var a = 0, b = 0;
        $('#search').keyup(function (event) { a = 1; });

        $('#search').keydown(function (event) { b = 1; });

        $("#search").keypress(function (event) {
            if (e.which === 13) {
                e.preventDefault();
                $('form').click(function () {
                    sendForm(a, b);
                });
            }
        });
    };
    function sendForm(a, b) {
        $.ajax({
            url: @Url.Action("Index", "Home"),
            type: 'POST',
            contentType: 'application/json',
            data: JSON.stringify({
                FirstInt: a,
                SecondInt: b
            }),
            success: function () {
                alert('success');
            }
        });
    };

View

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

Controller

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

Help me, please, to send all the values to controller. Those that changed in JavaScript and what I enter in the textbox. Thanks.

Html.BeginForm("Index", "Home", FormMethod.Post... this post works without HttpPost attribute, but I do not get the value from javascript, that's the problem. When I use brakepoint after the var b = model.SecondInt;, a and b are null — Eugene Chybisov
– Eugene Chybisov, Commented May 26, 2015 at 13:25
HttpPost is restriction to "listen" to post requests only, without that attribute the method "listening" for both GET and POST. Do you have "name" attribute in your HTML controls? — genichm
– genichm, Commented May 26, 2015 at 13:29

PaulShovan · Accepted Answer · 2015-05-26 13:43:49Z

3

Javascript Code:

function keystroke() {
var a = 0, b = 0;
    $('#search').keyup(function (event) { a = 1; });

    $('#search').keydown(function (event) { b = 1; });

    $("#search").keypress(function (event) {
        if (e.which === 13) {
            e.preventDefault();
            $('form').click(function () {
                var text = $("#search").val()
                sendForm(a, b, text);
                return false;
            });
        }
    });

};
function sendForm(a, b, text) {
    var data = {FirstInt: a,SecondInt: b,SearchString: text}
    $.ajax({
        url: 'Home/Index',
        type: 'POST',
        contentType: 'application/json',
        data: data,
        success: function () {
            alert('success');
        }
    });
};

Controller Code

[HttpPost]
public async Task<ActionResult> Index(MyViewModel model)
    {
        //...
        if (model.SearchString != null)
        {
            //...
            var a = model.FirstInt;
            var b = model.SecondInt;
        }
        //...
        return View(model);
    }

edited May 26, 2015 at 13:43

answered May 26, 2015 at 13:18

PaulShovan

2,1321 gold badge14 silver badges22 bronze badges

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

10 Comments

Eugene Chybisov Over a year ago

When I write some text in textbox and press enter key, SearchString get the value, but a and b are null

Eugene Chybisov Over a year ago

Plz, show me How do I change the view to only send ajax post?

PaulShovan Over a year ago

does $("#search").keypress execute?

Eugene Chybisov Over a year ago

yes I tried, but most likely you're right and ajax post and FormMethod.Post in conflict

Eugene Chybisov Over a year ago

yes, $("#search").keypress works, I checked through the alert("keypress works");

|

Collectives™ on Stack Overflow

Send data from textbox with ajax to asp.net mvc 5 controller

1 Answer 1

10 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related