Как обновить ввод текста с помощью AJAX?

#jquery #ajax #asp.net-mvc-4 #razor

#jquery #ajax #asp.net-mvc-4 #razor

Вопрос:

Итак, у меня строго типизированный вид, который выглядит следующим образом:

 @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 выглядит так:

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

И, наконец, действие выглядит так:

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

То, что я пытаюсь здесь сделать, это отправить данные из формы в контроллер, что-то сделать с этими данными, вернуть строку из контроллера и записать эту строку для ввода вне формы. Конечно, все это делается без обновления страницы, поэтому я использую AJAX. Попытка сделать это таким образом приводит к сбою при загрузке ресурса: сервер ответил со статусом 404 (не найден). К сожалению, я не могу найти решение этой проблемы самостоятельно. Если это дублирующий вопрос, заранее прошу прощения. Итак, мой вопрос: что я делаю не так? Как мне это сделать? Должен ли я использовать частичный просмотр?

Комментарии:

1. Вы поставили точку останова внутри своего действия, чтобы увидеть, выполнено ли ваше действие?

2. Да, я это сделал, и он не попал.

Ответ №1:

Я создал тестовое приложение, используя весь ваш код, но заменив URL на свои собственные методы, и это сработало прекрасно. Таким образом, я считаю, что URL-адрес для кода ajax неверен. Дважды проверьте ваш URL, который вы используете, чтобы убедиться, что он правильный. Также я добавил .длина строк, которые вы сравнивали.

Примечание: если ваш ajax находится в вашем представлении, то для простого способа отображения правильного пути вы можете выполнить следующее

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

Вот мое мнение :

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

и вот мой контроллер

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

Ответ №2:

1) Вам нужно добавить тип к вашему вызову ajax:

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


});
  

2) добавьте атрибут httppost в свой контроллер и измените строки на имя модели в качестве параметров действия

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