How to update text input using AJAX?

Question

So I have strongly-typed view looking like this:

@model EmptyWeb.Models.SomeModel
@using (@Html.BeginForm(null, null, FormMethod.Post, new { id = "Form1" }))
{
    <fieldset>
        <div class="editor-field">
            @Html.EditorFor(model => model.firstValue)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.secondValue)
        </div>

        <p>
            <input id="Button1" type="button" value="Submit values"/>
        </p>
    </fieldset>        
}
<input id="Text1" type="text" />

Ajax looking like this:

$(function () {
$(document).ready(function () {
    $("#Button1").click(function () {              
            $.ajax({
                url: "ControllerName/ActionName",
                data: $("#Form1").serialize(),
                success: function (result) {
                    $('#Text1').val(result);
                },
            });
        });
    });  
});

And finally action looking like this:

public ActionResult ActionName(string firstValue, string secondValue)
    {
        if (firstValue > secondValue)
            return Content("some string");
        else
            return Content("some other string");
    }

What I'm trying to do here is to send data from form to controller, do some stuff with this data, return string from controller and write this string to input outside of form. Doing all of this without refreshing page of course, that's why I'm using AJAX. Trying to do this this way gives me Failed to load resource: the server responded with a status of 404 (Not Found). Unfortunately I can't find solution to this problem by my own. If this is duplicate question I'm sorry in advance. So my question is: What am I doing wrong? How should I do this? Do I have to use partial view?

Did you put a breakpoint inside your action to see if your action is hit? — thepirat000
– thepirat000, Commented Jun 24, 2014 at 21:15

PaulBinder · Accepted Answer · 2014-06-24 21:30:04Z

I created a test app using all your code but replacing the URL to my own methods and it worked beautifully. Thus I believe the URL for the ajax code is incorrect. Double check your url you are using to make sure it is correct. Also I added .length to the strings you were comparing.

Note : if your ajax is in your view then an easy way to render the correct path you can do the following

url: "@Url.Action("ActionName")",

Here is my view :

@model MvcApplication1.Models.SomeModel
@using (@Html.BeginForm(null, null, FormMethod.Post, new { id = "Form1" }))
{
    <fieldset>
        <div class="editor-field">
            @Html.EditorFor(model => model.firstValue)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.secondValue)
        </div>

        <p>
            <input id="Button1" type="button" value="Submit values"/>
        </p>
    </fieldset>        
}
<input id="Text1" type="text" />
<script>
    $(function() {
        $(document).ready(function() {
            $("#Button1").click(function() {
                $.ajax({
                    url: "Home/ActionName",
                    data: $("#Form1").serialize(),
                    success: function(result) {
                        $('#Text1').val(result);
                    },
                });
            });
        });
    });
</script>

and here is my controller

namespace MvcApplication1.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {

            return View();
        }

        public ActionResult ActionName(string firstValue, string secondValue)
        {
            if (firstValue.Length > secondValue.Length)
                return Content("some string");
            else
                return Content("some other string");
        }

        public ActionResult About()
        {
            return View();
        }
    }
}

sylwester · Accepted Answer · 2014-06-24 22:16:29Z

1) You need to add type to your ajax call:

 $(function () {
    $(document).ready(function () {
        $("#Button1").click(function () {              
                $.ajax({
                    url: "ControllerName/ActionName",
                    data: $("#Form1").serialize(),
                    type:'POST'
                    success: function (result) {
                        $('#Text1').val(result);
                    },
                });
            });
        }); 


});

2) add attribute httppost to your controller and change strings into name of model as action parameters

 [HttpPost]
public string ActionName(SomeModel model)
    {
        if (model.firstValue > model.secondValue)
            return "some string";
        else
            return "some other string";
    }

Collectives™ on Stack Overflow

How to update text input using AJAX?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related