JavaScript 함수의 MVC jQuery 제출 양식(페이지 새로 고침 없음)

JavaScript 함수의 MVC jQuery 제출 양식(페이지 새로 고침 없음)

난 이 모든 걸 잘 몰라.ASP를 사용하고 있습니다.NET MVC C# LINQ에서 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를 통해 몇 가지 작업을 수행합니다.먼저 부분 보기에서 Books 양식(id = books form)을 제출하고 다음 jQuery 기능으로 넘어갑니다.JavaScript 함수를 호출하는 링크를 클릭합니다.이 기능은 Books 양식의 제출을 호출/실행/실행해야 합니다.

모든 것을 시도해 본 것 같습니다만, 페이지 전체를 제출/갱신하지 않으면, 제 서적 폼을 제출 및 처리할 수 없습니다.(완전 전송이 이루어지면 컨트롤러에서 예상되는 액션은 정상적으로 처리됩니다).컨트롤러 프로세스/액션이 성공/실패 표시 이외의 아무것도 반환하지 않도록 합니다.(다시 "LoadBooks();"를 호출하여 페이지의 DIV를 새로 고칠 수 있습니다.

좋은 생각 있어요?

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 selector를 사용하여 검색하면 됩니다.양식에 ID를 설정한 후 다음과 같은 양식을 찾을 수 있습니다.

var $form = $("#theformid");

그런가요?Ajax.BeginForm사용할 필요가 있습니다.Html.BeginForm?

이 답변은 "누군가 도움이 될 수 있다면"입니다.게임에 너무 늦었기 때문입니다만, 다음과 같은 것도 사용할 수 있습니다.

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

날짜가 게시될 때 페이지가 새로 고쳐지지 않습니다.

부디 참고하세요

추가하셔야 합니다.jquery.unobtrusive-ajax.js이 일을 하기 위해서요ASP에서는 조심하세요.NET MVC5 템플릿프로젝트입니다이 스크립트는 기본적으로 포함되어 있지 않습니다.수동으로 추가하거나 Nuget 패킷 매니저를 통해 추가해야 합니다.
와는 관계가 없습니다.jquery.validate.unobtrusive.js디폴트로 포함되어 있습니다.

클릭 시 JavaScript 기능이 실행됩니까?문제는 페이지 전체를 전송/갱신하는 것입니다.이 경우 문제는 자바스크립트 기능을 종료하지 않는다는 것입니다.return false.

아니면 "클릭" JavaScript 함수가 전혀 호출되지 않는 것이 문제입니까?그럼 코드를 보지 않고는 말하기 어렵겠네요JQuery Selector를 사용하는 경우 - 아마도 링크가 선택기에 의해 선택되지 않을 수 있습니다.

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

아까도 말씀드렸듯이

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

언급URL : https://stackoverflow.com/questions/1720020/mvc-jquery-submit-form-without-page-refresh-from-javascript-function