I have placed a partial view into a modal to update a password like so:
<div class="modal fade" id="modalPassword" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-body">
<div class="modal-content">
<div id="message"></div>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Change Password</h4>
</div>
<div class="modal-
<div id="passwordForm">
#{
#Html.Action("ChangePassword","Account");
}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
This is my partial view:
#model WebApplication1.Models.ViewModel.ChangeUserPassword
#{
Layout = null;
}
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
<form id="form">
#Html.AntiForgeryToken()
#Html.ValidationSummary(true)
<fieldset id="submitPasswordForm">
<div class="col_full">
#Html.LabelFor(model => model.OldPassword, htmlAttributes: new { #class = "capitalize t600" })
#Html.TextBoxFor(model => model.OldPassword, null, new { #class = "sm-form-control", id = "txtOldPassword" })
#Html.ValidationMessageFor(model => model.OldPassword)
</div>
<div class="col_full">
#Html.LabelFor(model => model.ChangedPassword, htmlAttributes: new { #class = "capitalize t600" })
#Html.TextBoxFor(model => model.ChangedPassword, null, new { #class = "sm-form-control", id = "txtChangedPassword" })
#Html.ValidationMessageFor(model => model.ChangedPassword)
</div>
<div class="col_full">
#Html.LabelFor(model => model.ConfirmPassword, htmlAttributes: new { #class = "capitalize t600" })
#Html.TextBoxFor(model => model.ConfirmPassword, null, new { #class = "sm-form-control", id = "txtConfirmPassword" })
#Html.ValidationMessageFor(model => model.ConfirmPassword)
</div>
<div class="modal-footer">
<button type="button" class="btn btn-warning" data-dismiss="modal">Cancel</button>
<input type="submit" value="Save Changes" class="btn btn-primary" id="btn_save_password" />
</div>
</fieldset>
</form>
When I click the "btn_save_password", I invoke the onclick event like so:
$("#btn_save_password").click(function (event) {
event.preventDefault();
var data = $("#submitPasswordForm").serialize();
$.ajax({
type: "POST",
url: "#Url.Action("ChangePassword", "Account")",
data: data,
success: function (result) {
$("#passwordForm").empty();
//$("div").remove("#passwordForm");
addHtml(result);
},
error: function () {
$("#passwordForm").html("Error occured");
}
});
});
function addHtml(htmlString) {
$("#msg").html(htmlString);
}
Then it invokes a method in my controller "ChangePassword"
[Authorize]
public ActionResult ChangePassword()
{
return PartialView();
}
[HttpPost]
public ActionResult ChangePassword(ChangeUserPassword password)
{
if (ModelState.IsValid)
{
var cookie = HttpContext.Request.Cookies["Sys_user_id"];
var um = new UserManager();
if (cookie != null && um.GetAccountPassword(Convert.ToInt32(cookie.Value), password.OldPassword))
{
um.ChangeUserPassword(password, Convert.ToInt32(cookie.Value));
}
else
{
ModelState.AddModelError("","Wrong current password");
}
}
else
{
ModelState.AddModelError("","Error");
}
return View();
}
The "ChangePassword" method invokes the PartialView "ChangePassword.html" like so:
[Authorize]
public ActionResult ChangePassword {
return PartialView();
}
I can view the partial view on the modal and I am able to successfully update the database. But the problem is, I want to be able to send a successful message or error message into the modal when it is successful or not. Upon submission, whether it has updated the database or not, it refreshes the page and the modal is gone. I want to be able to get the message into the modal.
Your help is greatly appreciated.
EDIT --
I can now see the validation message in the Modal but it only works once. As soon as I click the "btn_save_password" again, the page refreshes.
Add two <div> sections containing your messages (Successs and Failed) with the hide class in the partial view. After Ajax Submission, Add class Show for the suitable div.
eg:
<div class="alert alert-danger text-center hide" role="alert"id="FailedMesssage">
Failed....!!!
</div>
<div class="alert alert-success text-center hide" role="alert" id="successMesssage">
success....!!!
</div>
<button type = "button" value="Submit" onclick ="Test()"/>
Set Var Value as 0 or 1 using ajax code then try following script
<script>
function Test()
{
var value =1;
if(value == 1)
{
$("#successMesssage").addClass("show").removeClass("hide");
}
else
{
$("#FailedMesssage").addClass("show").removeClass("hide");
}
}
</script>
Related
I have a set of jquery tabs which each contain a datatable. When i post data on a tab, i want to check if its a duplicate. If its a duplicate i want to load the that view back in (AddLocation.cshtml) but its just loading that view, without the tabs.
Before save:
After save (notice tabs missing):
AddEditLocation.cshtml:
#model APro.Model.DTO.DTOAddEditLocation
#{
ViewBag.Title = "Add Location";
}
<h2>#(Model.LocationId == Guid.Empty ? "Add Location" : "Edit Location")</h2>
<div id="AddEditLocation">
#using (Ajax.BeginForm("SaveLocation", "Management",
new AjaxOptions
{
HttpMethod = "POST",
InsertionMode = InsertionMode.Replace,
UpdateTargetId = "AddEditLocation",
},
new { id = "AddEditLocationForm", #class = "form-horizontal" }))
{
<div class="form-group">
<div class="row">
<div class="col-md-4">
#Html.Label("Location Name", new { #class = "control-label required-field" })
#Html.TextBoxFor(m => m.LocationName, new { #class = "form-control", required = "required" })
</div>
<div class="col-md-4">
#Html.Label("Location Category", new { #class = "control-label required-field" })
#Html.DropDownListFor(x => x.LocationCategoryId,
new SelectList(Model.LocationCategoryList, "Id", "Description"), "-- Please select a company --"
, new { #class = "form-control", required = "required" })
</div>
</div>
</div>
#Html.HiddenFor(x => x.LocationId)
<input type="button" id="btnReset" class="btn btn-default mr10 mb10 mt25" value="Cancel" />
<input type="submit" class="btn btn-primary mr10 mb10 mt25" value="Save" id="saveRole" />
}
</div>
#if ((string)ViewBag.ErrorMessage != null)
{
Html.RenderPartial("~/Views//Error/ErrorDuplicate.cshtml", (string)ViewBag.ErrorMessage);
}
<div id="errorModal"></div>
<script>
$("#AddEditLocation").on('click', '#btnReset', function (event) {
$.get("GlobalData/Index?activeTab=5", function (data) {
$(".body-content").replaceWith(data);
});
});
</script>
ErrorDuplicate.cshtml:
#{
Layout = null;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script type="text/javascript">
$(function () {
$('.modal').modal('show');
});
</script>
<div class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Error</h4>
</div>
<div class="modal-body">
#Model
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Controller:
public ActionResult Index(int activeTab = 0)
{
ViewBag.ActiveTab = activeTab;
return View("GlobalDataTabs");
}
[HttpPost]
public ActionResult SaveLocation(DTOAddEditLocation obj)
{
var result = _globalDataService.SaveLocation(obj);
if (!result)
{
obj.LocationCategoryList = _globalDataService.GetCategoryLocationList();
ViewBag.ErrorMessage =
"The Location name " + obj.LocationName + " already exists.";
return View("AddEditLocation", obj);
}
return RedirectToAction("Index", new { activeTab = 5 });
}
public PartialViewResult ShowError(String sErrorMessage)
{
return PartialView("~/Views/Error/ErrorDuplicate.cshtml");
}
GlobalDataTabs.cshtml
#{
ViewBag.Title = "Global Data";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Global Data</h2>
<script>
$(document).ready(function () {
$("#GlobalDataTabs").tabs();
var activeTab = '#ViewBag.ActiveTab'
$("#GlobalDataTabs").tabs("option", "active", activeTab);
window.history.replaceState(null, null, window.location.pathname);
});
</script>
<div id="GlobalDataTabs">
<ul>
<li>Category</li>
<li>Subcategory</li>
<li>Subcategory Description</li>
<li>Description Lookup</li>
<li>Location Category</li>
<li>Location</li>
</ul>
<div id="categoryTab">
#Html.Partial("Category")
</div>
<div id="subCategoryTab">
#Html.Partial("Subcategory")
</div>
<div id="subCategoryDescTab">
#Html.Partial("SubcategoryDescription")
</div>
<div id="descLookupTab">
#Html.Partial("DescriptionLookup")
</div>
<div id="locationCategoryTab">
#Html.Partial("LocationCategory")
</div>
<div id="locationTab">
#Html.Partial("Location")
</div>
</div>
In my Index view.I have a Table with action link. In Action link I am passing some arguments on the base of arguments I execute query if query result is null I want to show the modal present in the Index View.
My Table is.
#foreach(var j in Model)
{
<tr>
<td>#Html.DisplayFor(modelItem => j.job_title)</td>
<td>#Html.DisplayFor(modelItem => j.job_description)</td>
<td>#Html.DisplayFor(modelItem => j.apply_before)</td>
<td>#Html.ActionLink( "Apply","applyingjobs","Student",
new {
id= #TempData["data"]
},
null
)
</td>
</tr>
}
My contoller Function which is receiving passed parameter is.
public ActionResult applyingjobs(String id)
{
SqlConnection con = new SqlConnection("xxxxxxxxxxx");
SqlCommand cmd = new SqlCommand();
con.Open();
cmd.CommandText = "select count(*)from Users where id='" + id + "'and " + "type = " + 2 + " and exe!= null and qua!= null" ;
cmd.Connection = con;
Int32 countnamefieldadd = (Int32)cmd.ExecuteScalar();
if (countnamefieldadd == 0)
{
//here I want to show modal which is present in Index Page
}
else
{
return RedirectToAction("Index", "Student", new
{
id = id,
});
}
return RedirectToAction("Index", "Student", new
{
id = id,
});
}
My Modal Code is
<div id="modal_dialog" style="display: none">
// Modal content
</div>
Script to call Modal is
<script type="text/javascript">
$(function () {
$("#modal_dialog").dialog({
title: "Add Record",
open: function (type, data) { $(this).parent().appendTo("form"); },
modal: true
});
return false;
})
</script>
You can use Tempdata in your controller to retain the value and use it as a flag to check whether query returns records or not.
Try this. I hope it helps :)
HTML
#Html.ActionLink("Apply", "applyingjobs", "Employee")
<div>
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
Script
$(document).ready(function ()
{
if ('#TempData["value"]' != "" || '#TempData["value"]' != null)
{
if ('#TempData["value"]' == "No Records")
{
$("#myModal").modal('show');
}
else {
$("#myModal").modal('hide');
}
}
});
Controller
public ActionResult applyingjobs()
{
var c = Repository.SelectAll().ToList();
if (c.Count() > 0)
{
return RedirectToAction("Create");
}
else
{
TempData["value"] = "No Records";
return RedirectToAction("Create");
}
}
I have coded a edit modal, is does works, but when I dismiss the modal and try to open it a second time, it just goes dark.
My link calling the modal
#Html.ActionLink("Editar", "GetEditSv", "Sv", new { id = sv.IDServico },new{data_target = "#modal-container", data_toggle = "modal"})
my container inside the parent view
<div id="modal-container" class="modal fade hidden-print" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
</div>
</div>
a script to erase the modal data and the parent view (take on the internet)
<script>
$(function () {
//when the modal is closed
$('#modal-container').on('hidden.bs.modal', function () {
//remove the bs.modal data attribute from it
$(this).removeData('bs.modal');
//and empty the modal-content element
$('#modal-container .modal-content').empty();
});
});
$('#modal-container').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget);
var url = button.attr("href");
var modal = $(this);
//note that this will replace the content of modal-contant ever time the modal is opened
modal.find('.modal-content').load(url);
});
</script>
A part of the modal view (a separated file)
#model ControleIntegrado.Models.Servico
#using (Html.BeginForm("EditSv", "Sv", FormMethod.Post))
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
<h4>Servico</h4>
<hr />
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
#Html.HiddenFor(model => model.IDServico)
<div class="form-group">
#Html.LabelFor(model => model.Data, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Data.Date, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Data, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Salvar" class="btn btn-default" />
<input type="button" class="btn btn-default" data-dismiss="modal" value="cancelar"/>
</div>
</div>
</div>
}
<script src="~/Scripts/bootstrap.js"></script>
<script src="~/Scripts/jquery-ui-1.12.1.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
and the action on the controller
public ActionResult GetEditSv(int id)
{
using(DBControle db = new DBControle())
{
foreach (var item in db.Servico)
{
if(item.IDServico == id)
{
return PartialView("GetEditSv", item);
}
}
}
return ViewBag();
}
https://i.stack.imgur.com/2y7NP.png
Try this, use $('body').find('.modal-backdrop').removeClass('modal-backdrop'); to remove the backdrop effect (dark background)
<script>
$(function () {
//when the modal is closed
$('#modal-container').on('hidden.bs.modal', function () {
//remove the bs.modal data attribute from it
$(this).removeData('bs.modal');
//and empty the modal-content element
$('#modal-container .modal-content').empty();
//remove backdrop
$('#modal-container').find('.modal-backdrop').removeClass('modal-backdrop');
});
});
$('#modal-container').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget);
var url = button.attr("href");
var modal = $(this);
//note that this will replace the content of modal-contant ever time the modal is opened
modal.find('.modal-content').load(url);
});
</script>
I want to try to implement this with Ajax post request, but I've never used Ajax and I'm not sure how to go about doing this.
My view code for password panel look's like this:
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Reset Password</h3>
</div>
<div class="panel-body" id="myForm">
#using (Html.BeginForm("EditPassword", "Users", new { UserId = Model.User.Id, Token = Model.Token }, FormMethod.Post, new { #class = "form-horizontal", role = "form" }))
{
#Html.AntiForgeryToken()
#Html.ValidationSummary()
<div class="form-group">
#Html.LabelFor(m => m.Password, new { #class = "col-md-2 control-label"})
<div class="col-md-10">
#Html.PasswordFor(m => m.Password, new { #class = "form-control", #type = "text" })
</div>
</div>
<div id="dialog-modal" style="display:none;" title="Basic modal dialog"></div>
<div class="col-md-9">
<button type="submit" data-toggle="modal" data-target=".bootstrapmodal" class="btn btn-primary" value="Reset" onclick="javascript: return checkPassForm(document.getElementById('myForm'));">Reset</button>
</div>
}
</div>
Bootstrap Modal code:
<div class="modal fade bootstrapmodal" id="modalMain" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="false" data-keyboard="static">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button data-dissmiss="modal" class="close modal-close-btn" data-dismiss="modal" aria-hidden="true"> <span>×</span> </button>
<div class="modal-title"><h3>News Letter Account</h3></div>
</div>
<div class="modal-body">
<p>This is a newsletter only account which does not have an existing password.</p>
<p>Do you wish to create a mySewnet account for this user?</p>
</div>
<div class="modal-footer">
<button class="btn btn-primary" id="btn-updateNL"> Continue </button>
<button class="btn btn-default cancel-modal" data-dismiss="modal" aria-hidden="true"> Cancel</button>
</div>
</div>
</div>
</div>
Script code in the same view looks as follows
#Scripts.Render("~/bundles/jquery")
<script type="text/javascript">
$(document).ready(function () {
$("#btn-updateNL").on('click', function (e) {
#this.Model.User.NewsletterOnly.Equals(false);
});
});
The controller code for View's reset password panel:
[AllowAnonymous]
[HttpGet]
public ActionResult EditPassword(int userId, string token)
{
User user = new User();
EditUserViewModel top = new EditUserViewModel();
int rer = top.UserId;
userId = user.Id;
token = UserManager.GeneratePasswordResetToken(user.Id);
var model = new EditUserViewModel()
{
UserId = userId,
Token = token
};
return RedirectToAction("Edit", new { userId = userId });
}
//POST: /Admin/UserManager/Edit
[HttpPost]
[ValidateAntiForgeryToken]
public async Task<ActionResult> EditPassword(EditUserViewModel model)
{
model.Token = UserManager.GeneratePasswordResetToken(model.UserId);
var user = this.UserManager.FindById(model.UserId); //Gets current user
var oldTermsAndConditionAgreement = user.TermsAndConditionsAgreement; //Gets current value of TermsAndConditionsAgreement
user.TermsAndConditionsAgreement = true; //Sets TermsAndConditionsAgreement to true
//Run a break on this line next time when coding
var result = this.UserManager.ResetPassword(model.UserId, model.Token, model.Password.Trim()); //If TermsAndConditionsAgreement is not true, this seems to break
user.TermsAndConditionsAgreement = oldTermsAndConditionAgreement; //TermsAndConditionsAgreement is set back to original value after process runs
if (result.Succeeded)
{
TempData["Message"] = AppResources.Common.FormAdminPasswordresetSuccess;
//return RedirectToAction("Login", "Account");
await _db.SaveChangesAsync();
//return RedirectToAction("Edit");
}
foreach (var error in result.Errors)
{
ModelState.AddModelError("", error);
}
return RedirectToAction("Edit", new { id = model.UserId });
}
I want to give 'Reset' button on the password panel the ability to display model panel if user has "newsletteronly" check-box set to "true".Which I can do by placing this Razor if statement syntax around modal code above.
*when Newsletteronly is set to true and checked account is not really a account so admin can't reset user's password, because no password is created in database for users who choose to receive news-letter. Other data like email, name, street address are collected and stored in DB. Email is username in this web-application.
#if (this.Model.User.NewsletterOnly == true)
{}
Doing this only allows the modal to display when reset button is clicked and if user's account meet the condition. The issue I'm having now is in trying to get
model to update for "NewsletterOnly" value to false when 'Continue' button is clicked on modal dialog after page-loads and modal disappears. I believe Ajax post can resolve this but don't know how to implement this with bootsrap modal on MVC 5 Razor .Net.
Images:
("Page View") description:Left side of view is "user panel" it displays 'NewsletterOnly' checkbox and it is checked as True if user has a news letter only account) Right side displays reset password panel and other panels
Modal
$("#btn-updateNL").on('click', function (e) {
$.post("yourActionMethodToUpdateNewsLetterValue",{userId:1,NL:false},function(){
alert('updated succesully');
});
});
where {userId:1,NL:false} here you need to pass the current users Id and then pass the value for NewsLetterOnly variable ie: NL as false. You can have a controller method which accepts these two parameters and then write your logic to update the Db.
Controller Action method would be something like
public async UpdateUserNewsLetterFlag(int userId,bool NL)
I am working on an asp.net mvc web application. on my main view i got the following create link:-
<a class="btn btn-success" data-modal="" href="/Staff/Create" id="btnCreate">
<span class="glyphicon glyphicon-plus"></span>
</a>
<!-- modal placeholder-->
<div id='myModal' class='modal fade in'>
<div class="modal-dialog">
<div class="modal-content">
<div id='myModalContent'></div>
</div>
</div>
</div>
and i have the following script:-
$(function () {
$.ajaxSetup({ cache: false });
$("a[data-modal]").on("click", function (e) {
$('#myModalContent').load(this.href, function () {
$('#myModal').modal({
keyboard: true
}, 'show');
$('#myModalContent').removeData("validator");
$('#myModalContent').removeData("unobtrusiveValidation");
$.validator.unobtrusive.parse('#myModalContent');
bindForm(this);
});
return false;
});
});
function bindForm(dialog) {
$('#myModalContent', dialog).submit(function () {
if ($('#myModalContent').valid()) {
$('#progress').show();
$.ajax({
url: this.action,
type: this.method,
data: $(this).serialize(),
success: function (result) {
if (result.success) {
$('#myModal').modal('hide');
$('#progress').hide();
//location.reload();
alert('www');
} else {
$('#progress').hide();
$('#myModalContent').html(result);
bindForm();
}
}
});
}
else {
return false;
}
});
}
Now when i click on the Create link the Create action method that will return the following partial view, which will be rendered inside a modal popup :-
#model SkillManagement.Models.Staff
#{
ViewBag.Title = "Create";
}
<h2>Create</h2>
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
<h4>Staff</h4>
<hr />
#Html.ValidationSummary(true)
<div class="form-group">
#Html.LabelFor(model => model.GUID, new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.GUID)
#Html.ValidationMessageFor(model => model.GUID)
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.UserName, new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.UserName)
#Html.ValidationMessageFor(model => model.UserName)
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.IsExternal, new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.IsExternal)
#Html.ValidationMessageFor(model => model.IsExternal)
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.FirstName, new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.FirstName)
#Html.ValidationMessageFor(model => model.FirstName)
</div>
</div>
//code goes here
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Create" class="btn btn-default" />
</div>
</div>
</div>
}
till now i have every thing working well, the Get Create action method will be called and the partial view will be rendered inside a modal popup.
but now inside my partial view if i click on "Create" button , the Post create action method will be called but not due to the javascript code . and when i check Request.IsAjax() inside my Post create action method, i got that it is not an ajax request which means the partial view send a normal Post http and not ajax request as defined inside the script,, can anyone advice what is wrong in my current approach ?
Thanks
as you can see you just pass the #myModalContent node to the bindForm function, and jQuery selector looks for
// will never find #myModalContent
$('#myModalContent', myModalContentDOMElement).submit(function () {
Instead you should do something like this
$('form', dialog).submit(function (e) {
e.preventDefault(); // stop the default form submit action
You are loading your form into the page via ajax, but the form you are loading is a regular html form if you want the form itself to use ajax, I believe are looking for #Ajax.BeginForm().
msdn documentation
#using (Ajax.BeginForm({objectparams})){
...