Используйте Javascript (jQuery) для отображения результата запроса в ASP.NET MVC

Question

У меня есть проект ASP.NET MVC, и в настоящее время я использую ViewData["ResultMessage"], чтобы показать результат формы (что делается после того, как пользователь отправляет и обновляет страницу).

Я хочу сделатьэто сразу после того, как он нажимает кнопку «Отправить» (без обновления страницы).Поэтому я должен использовать Javascript для того, с чем я новичок.Нет опыта, что когда-либо.

Как выглядит моя форма так:

            <form id="contactForm" method="post" action="..">
                <div class="field half first">
                    <label for="Name">Name</label>
                    <input type="text" name="Name" id="Name" placeholder="Your name" required />
                </div>
                <div class="field half">
                    <label for="Email">Email</label>
                    <input type="email" name="Email" id="Email" placeholder="Your email" required />
                </div>
                <div class="field">
                    <label for="Message">Message</label>
                    <textarea name="Message" id="Message" rows="5" placeholder="Your message" required minlength="20"></textarea>
                </div>

                <input type="submit" value="Send Message" />
                <p>@ViewData["ContactActionResult"]</p>

            </form>

Вы можете увидеть результат, отображаемый с помощью Razor, используя ViewData.Теперь я хочу сделать это, не обновляя страницу и изучая JS в пути.

Что я пробовал до сих пор:

$(function () {
    $("button").click(function (e) {
        e.preventDefault()
        $.ajax({
            type: "POST",
            url: "/Receiver",
            data: car,
            datatype: "html",
            success: function (data) {
                alert("Congratulations, it worked!");
                $('#contactForm').html(data);
            },
            error: function(data) {
                alert("Failed.");
            }
        });
    });
});

Но я не уверен, что сделал что-то не так илипросто не реализую это правильно.У меня есть выше функция внутри <script> here </script> на моей странице HTML.Ничего не происходит, когда я нажимаю кнопку отправки в форме.

Answer 1

Если это вызов ajax, лучше всего, если вы вернете ответ JSON. Вы можете использовать Request.IsAjaxRequest(), чтобы определить, является ли запрос обычным запросом формы или вызовом ajax.

Вам также следует рассмотреть возможность использования шаблона PRG . После успешного сохранения вы должны выполнить перенаправление к действию GET, в котором вы можете отобразить представление, а не возвращаться к тому же представлению с сообщением в виде мешка. Если вы хотите передать какое-либо сообщение новому виду / действию, используйте TempData вместо ViewData.

[HttpPost]
public ActionResult Receiver(string name, string Email)
{       
    // Your existing code to save
    if(Request.IsAjaxRequest())
    {
        return Json(new { status = "success", message = "Created successfully" });
    }
    // Normal form submit. So let's follow PRG pattern
    TempData["ResultMessage"] = "Created successfully";
    return RedirectToAction("Index");
}

Вы также можете поставить try/catch и вернуть json, как этот, для варианта использования ошибки

return Json(new { status = "error", message = "some serious error" });

В индексном действии / просмотре вы можете прочитать TempData["ResultMessage"] и отобразить пользователю.

Теперь, для сценария использования ajax, в вашем текущем представлении вы можете добавить div, чтобы показать сообщение

<form id="contactForm" method="post" asp-action="Receiver">

    <div id="msg"></div>

    <div class="field half first">
        <label for="Name">Name</label>
        <input type="text" name="Name" id="Name" placeholder="Your name" required />
    </div>
    <div class="field half">
        <label for="Email">Email</label>
        <input type="email" name="Email" id="Email"  required />
    </div>
    <div class="field">
        <label for="Message">Message</label>
        <textarea name="Message" id="Message" rows="5" 
                  placeholder="Your message" required minlength="20"></textarea>
    </div>

    <input type="submit" value="Send Message" />

</form>

и теперь в ответном вызове success вашего ajax-вызова проверьте ответ json, возвращаемый с сервера, и при необходимости покажите свойство message. Если вы помещаете скрипт в файл вида бритвы, убедитесь, что вы помещаете его в раздел Scripts, чтобы он оценивался в правильном порядке (после загрузки jQuery предполагается, что вы загружаете jQuery перед вызовом RenderSection("scripts") внутри макет)

@section Scripts
{
    <script>
        $(function (){

            $("#contactForm").submit(function (e){

                e.preventDefault()
                $.ajax({
                    type: "POST",
                    url:  $(this).attr("action"),
                    data: car,
                    success: function (data){

                        if (data.status === "success")
                        {
                            $('#msg').html(message);
                        }  
                        //to do : handle statuss=="error" as needed                                                 
                    },
                    error: function (data)
                    {
                        alert("Failed.");
                    }
                });
            });
        });

    </script>
}

Для ядра asp.net вы можете написать IsAjaxRequest метод в вашем базовом контроллере и использовать его. jQuery добавит заголовок X-Requested-With со значением XMLHttpRequest для ваших вызовов ajax.

protected bool IsAjaxRequest()
{
    return Request.Headers["X-Requested-With"] == "XMLHttpRequest";
}