Отправить форму с jquery ajax

Ответ 1

В основном вы передаете литералы объектов javascript напрямую. Поэтому, прежде чем передавать данные на контроллер, он должен быть в формате JSON (потому что вы указали приложение /json. См. Ваш вызов $.ajax).

SO, вам не хватает JSON.stringify()

data: JSON.stringify({
                        PostId: $('.postid').val(),
                        UserName: $('#username').val(),
                        DateCreated: new Date(),
                        CommentText: $('#comment').val()
                    }),

ИЛИ

var someObj = {
            PostId: $('.postid').val(),
            UserName: $('#username').val(),
            DateCreated: new Date(),
            CommentText: $('#comment').val()
        };

         $.ajax({
            /// your other code
            data: JSON.stringify(someObj),
            // your rest of the code

        });

Ответ 2

Для этого вам не нужен код на стороне клиента, FYI.

Чтобы успешно использовать методы ajax в MVC, вам нужно будет сделать следующее. Добавьте этот ключ в appsettings в web.config:

  <appSettings>
    <add key="UnobtrusiveJavaScriptEnabled" value="true" />
  </appSettings>

Также как и ненавязчивый ajax script:

<script src="/Scripts/jquery.unobtrusive-ajax.min.js" type="text/javascript"></script>

Затем создайте контейнер div вокруг вашей формы и замените Html.BeginForm на Ajax.BeginForm

<div id="ajaxReplace">
@using (Ajax.BeginForm("BlogComment", "Blog", null, new AjaxOptions { UpdateTargetId = "ajaxReplace", OnSuccess = "doFunctionIfYouNeedTo", OnFailure = "ShowPopUpErrorIfYouWant" }))
 {
 @Html.ValidationSummary(true)
        <legend class="AddAComment">Add a comment</legend>

        <div class="commentformwrapper">

            <div class="editor-text">
            <span class="editor-label">User Name:</span>
            </div>

            <div class="editor-text">
            <input type="text" id="username" />
            </div>

            <div class="editor-text">
            <textarea id="comment" rows="6" cols="23"></textarea>
            </div>

            <div class="editor-field">
            <input type="hidden" id="hiddendate" />
            </div>

            <input type="submit" id="submit" value="Create" />

        </div>

    }
</div>

Затем в вашем контроллере вы вернетесь примерно так:

return PartialView(ajaxComment);

Это позволит вам сохранить script, чтобы сделать это вручную, и будет направлять вас на использование рамки, как предполагалось. Это также поможет вам с проверкой аннотации данных и всеми сочными вещами, которые идут с ним,

Надеюсь, это поможет в некотором роде.

Ответ 3

Попробуйте следующее:

Модель

public class Comment
{
    public string CommentText { get; set; }
    public DateTime? DateCreated { get; set; }
    public long PostId { get; set; }
    public string UserName { get; set; }
}

Вид и js

@model SubmitMvcForWithJQueryAjax.Models.Comment

@using (Html.BeginForm("BlogComment","Blog"))
{
    @Html.ValidationSummary(true)
    <legend class="AddAComment">Add a comment</legend>

    <div class="commentformwrapper">

        <div class="editor-text">
        <span class="editor-label">User Name:</span>
        </div>

        <div class="editor-text">
            @Html.EditorFor(m => m.UserName)
        </div>

        <div class="editor-text">
            @Html.TextAreaFor(m => m.CommentText, new { rows="6", cols="23"} )
        </div>

        <div class="editor-field">
             @Html.HiddenFor(m => m.DateCreated)        
        </div>

         <div class="editor-field">
             @Html.HiddenFor(m => m.PostId)          
        </div>

        <input type="submit" id="submit" value="Create" />

    </div>

}

<script type="text/javascript">
    $(document).ready(function () {

        $('form').submit(function () {
            var serializedForm = $(this).serialize();                       
            $.ajax({
                url: '@Url.Action("CommentForm")',
                type: "POST",                                       
                data: serializedForm,
                success: function (result) {

                    alert("success " + result.UserName);
                },
                error: function (result) {
                    alert("Failed");
                }

            });
            return false;
        });
    });

</script>

Контроллер

public class CommentController : Controller
{
    //
    // GET: /Comment/

    public ActionResult Index()
    {
        return View(new Comment());
    }

    [HttpPost]
    public ActionResult CommentForm(Comment comment)
    {
        Comment ajaxComment = new Comment();
        ajaxComment.CommentText = comment.UserName;
        ajaxComment.DateCreated = comment.DateCreated ?? DateTime.Now;
        ajaxComment.PostId = comment.PostId;
        ajaxComment.UserName = comment.UserName;

        //mRep.Add(ajaxComment);
        //uow.Save();
        //Get all the comments for the given post id

        return Json(ajaxComment);


    }

}

Ответ 4

Вместо

data: {
          PostId: $('.postid').val(),
          UserName: $('#username').val(),
          DateCreated: new Date(),
          CommentText: $('#comment').val()
      },

Try

$('form').submit(function () {
    var obj = {
        PostId: $('.postid').val(),
        UserName: $('#username').val(),
        DateCreated: new Date(),
        CommentText: $('#comment').val()
    };

    $.ajax({
        ...,
        data: JSON.stringify(obj),
        ...,
    });

    return false;
});

Вам нужно преобразовать данные в строку перед отправкой на сервер. и JSON.stringify выполняет эту работу