web-dev-qa-db-ja.com

JavaScript関数からのMVC jQuery送信フォーム（ページの更新なし）

私はこのすべてにかなり新しいです。 ASP.NET MVC C＃ LINQ to SQL を使用しています。

著者とそのすべての書籍をロードする編集ページがあります。ブックは Ajax 呼び出しを介してロードされます。

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

        function LoadBooks() {
          $(".Books").hide();
          $(".Books").load("/Books/Edit/<%= Model.AuthorID %>");
          $(".Books").show('slow');
        }
     </script>

この部分は正常に機能しています。ページに著者情報が読み込まれ、次に書籍が読み込まれます（DIV id = "Books"の部分ビュー、書籍カテゴリと書籍タイトルのみ）：

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<Solution.Controllers.BooksController+BooksViewModel>" %>
     <% using (Html.BeginForm(null,null, FormMethod.Post,new { id = "bookform" }))
        {%>
            <fieldset>
                <legend>Books</legend>
                <%int i = 0;
                    foreach (var book in Model.Books)
                    {%>
                      <%= book.BookID%>
                      <%= Html.Hidden("book[" + i + "].BookID", book.BookID) %>

                      <%= Html.DropDownList("book[" + i + "].CatID", new SelectList(Model.Categories, "CatID", "CatTitle", book.CatID))%>
                      <%= Html.ValidationMessage("CatID", "*")%>

                      <%= Html.TextBox("book[" + i + "].BookTitle", book.BookTitle)%>
                      <%= Html.ValidationMessage("BookTitle", "*")%>
                      <br />
                      <%i++;
                    } %>
            </fieldset>
     <% } %>

次に、メインビューページにリンクを追加します。リンクがクリックされたら、JavaScript/jQuery/Ajax/whateverを使用していくつかのことを実行します。最初に実現したいのは、部分ビューからBooksフォーム（id = booksform）を送信し、次の jQuery 関数に進むことです。そこで、JavaScript関数を呼び出すリンクをクリックします。この関数は、Booksフォームの送信を呼び出し/実行/実行する必要があります。

私はすべてを試したように感じますが、完全なページの送信/更新が行われないと、書籍のフォームを送信して処理することができません。 （注、完全な送信が行われると、コントローラーで期待するアクションが正常に処理されます）。コントローラのプロセス/アクションが何らかの成功/失敗の表示以外を返さないようにします。 （その後、「LoadBooks（）;」を再度呼び出して、ページのDIVを更新できます。

何か案は？

jqueryasp.net-mvcajaxform-submit
31
johnnycakes

これは私がjqueryでそれを行う方法です：

function DoAjaxPostAndMore(btnClicked)
{
       var $form = $(btnClicked).parents('form');

        $.ajax({
            type: "POST",
            url: $form.attr('action'),
            data: $form.serialize(),
            error: function(xhr, status, error) {
                  //do something about the error
             },
            success: function(response) {
                 //do something with response
                LoadBooks();

            }
        });

  return false;// if it's a link to prevent post

}

BtnClickedはフォーム内にあると仮定しました。

<input type="button" value="Submit" onclick="DoAjaxPostAndMore(this)"/>

リンクの場合：

  <a href="/url/something" onclick="return DoAjaxPostAndMore(this)">linktext</a>

リンクがフォーム内にない場合は、jqueryセレクターを使用して検索するだけです。 idをフォームに設定してから、次のようなフォームを見つけることができます。

var $form = $("#theformid");
60
Misha N.

Ajax.BeginFormではなく、Html.BeginFormを使用する必要がありますか？

3
tuanvt

「onclick」JavaScript関数が実行され、問題は全ページの送信/更新が発生することですas（？この場合、問題はJavaScript関数をreturn falseで終了しないことです。

または、「onclick」JavaScript関数がまったく呼び出されないという問題がありますか？その後、コードを見ずに言うのは難しいです... JQueryセレクターを使用する場合-おそらくセレクターによってリンクが選択されない

1
Felix
<a href = "javascript: SaveProperties();">Save properties</a>
SaveProperties() { $('#bevpropform').submit(); }

前に言ったように

SaveProperties() { $('#bevpropform').submit(); return false; }
1
Felix

これは「誰かを助けることができる場合」の答えです。なぜなら、私はゲームに非常に遅れているからです。

@using (Ajax.BeginForm("Method", "Controller", new AjaxOptions { HttpMethod = "POST" }))
{
}

日付が投稿されると、ページは更新されません。


ご注意ください

[〜＃〜] must [〜＃〜]これを機能させるには、jquery.unobtrusive-ajax.jsを追加します。 ASP.NET MVC5テンプレートプロジェクトでは、このスクリプトはデフォルトでnotに含まれていることに注意してください。手動で追加するか、Nugetパケットマネージャーを使用して追加する必要があります。
デフォルトで含まれるjquery.validate.unobtrusive.jsとは関係ありません。

1
AlexB