I'm pretty new to all this. I'm using ASP.NET MVC C# LINQ to SQL.
I have an edit page that loads Authors and all their Books. The Books are loaded via an Ajax call.
<script type="text/javascript">
$(document).ready(function() {
LoadBooks();
});
function LoadBooks() {
$(".Books").hide();
$(".Books").load("/Books/Edit/<%= Model.AuthorID %>");
$(".Books").show('slow');
}
</script>
This part is working fine. The page loads with the Author info, then the Books load (a partial view in a DIV id="Books", just with the Book Category and Book Title):
<%@ 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>
<% } %>
Now, on the main view page I want to have a link. When the link is clicked I want to do a few things via JavaScript/jQuery/Ajax/whatever. The first thing that I want to happen is to submit the Books form (id = booksform) from the partial view, then continue on to the next jQuery function. So, I click a link that calls a JavaScript function. This function should call/do/execute the submission of the Books form.
I feel like I've tried everything, but I can't get my Books form to submit and process without a full page submit/refresh taking place. (Note, when the full submit does take place, the actions I'd expect in the controller do successfully process). I want the controller process/action to return nothing other than some kind of success/failure indication. (I can then call "LoadBooks();" again to refresh the DIV on the page.
Any ideas?
This is how I do that with 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
}
I assumed that btnClicked is inside of the form:
<input type="button" value="Submit" onclick="DoAjaxPostAndMore(this)"/>
if link:
<a href="/url/something" onclick="return DoAjaxPostAndMore(this)">linktext</a>
If link is not inside for the form you just have to use jquery selectors to find it. You may set id to the form and then find form like this:
var $form = $("#theformid");