Use DataAnnotationsAsBootStrapPopUp.js
MODEL:
public class UserInfo
{
[Required(AllowEmptyStrings = false, ErrorMessage = "UserName is required!"), StringLength(10, ErrorMessage = "Maximum Length allowed is 10 Characters")]
[MinLength(6, ErrorMessage = "UserName
should be at least 6 Characters long!")]
public string UserName { get; set; }
[Required]
[DataType(DataType.Password)]
[MinLength(6, ErrorMessage = "Password
should be at least 6 Characters long!")]
public string Password { get; set; }
//[Required]
[DataType(DataType.EmailAddress)]
[RegularExpression("^[a-z0-9_\\+-]+(\\.[a-z0-9_\\+-]+)*@[a-z0-9-]+(\\.[a-z0-9]+)*\\.([a-z]{2,4})$", ErrorMessage = "Invalid email format.")]
public string EmailID { get; set; }
}
CONTROLLER:
public ActionResult UserInfo()
{
return View();
}
[HttpPost]
public ActionResult UserInfo(UserInfo ui)
{
return Json(new {message="OK" },JsonRequestBehavior.AllowGet);
// return View();
}
VIEW:
<head>
<script src="~/Scripts/js/DataAnnotationsAsBootStrapPopUp.js"></script>
</head>
<body>
<div class="form-horizontal col-md-4">
@using (Html.BeginForm("UserInfo", "Plugin", FormMethod.Post, new { @id =
"frmCreate", @class = "form-horizontal" }))
{
<fieldset>
<div class="control-group">
@Html.LabelFor(m => m.UserName, new { @class = "control-label" })
<div class="controls">
@Html.TextBoxFor(m
=> m.UserName, new { @placeholder = "UserName", @class = "form-control", @onBlur = "onBlurInputControls(this)" })
@Html.ValidationMessageFor(m => m.UserName)
</div>
</div>
<div class="control-group">
@Html.LabelFor(m => m.Password, new { @class = "control-label" })
<div class="controls">
@Html.TextBoxFor(m => m.Password, new { @placeholder = "Password", @class = "form-control", @onBlur = "onBlurInputControls(this)" })
@Html.ValidationMessageFor(m => m.Password)
</div>
</div>
<div class="control-group">
@Html.LabelFor(m => m.EmailID, new { @class = "control-label" })
<div class="controls">
@Html.TextBoxFor(m => m.EmailID, new { @placeholder = "Email address", @class = "form-control", @onBlur = "onBlurInputControls(this)" })
@Html.ValidationMessageFor(m => m.EmailID)
</div>
</div>
<hr />
<div class="form-actions">
<button id="btnSubmit" type="submit" class="btn
btn-primary">Submit</button>
</div>
</fieldset>
}
</div>
<script type="text/javascript">
$(function () {
// declared 'plug' variable as
global ie. without var keyword
plug =
$.fn.DataAnnotationsAsBootStrapPopUp;
plug.defaults.FormID = 'frmCreate';
plug.defaults.DefaultControlBackgroundColor = '#ddf581';
plug.defaults.DefaultControlBorderColor = '#3174ae';
plug.defaults.ControlBackGroundColorOnError =
'#f68a1e';
//
$.fn.DataAnnotationsAsBootStrapPopUp.defaults.StarDirection='right'
plug.setValidationsForForm();
}); // document ready end
$("#btnSubmit").on("click", function (e) {
var frm =
$("#frmCreate");
frm.one('submit', function (e) {
e.preventDefault(); //STOP default form submit action
if
(plug.CheckIsFormValid() == true)
{
var url = frm.attr('action'); //
$(this).attr('action');
var data = frm.serialize(); // $(this).serialize();
$.ajax({
url: url,
type: "POST",
data: data,
success: function (data) {
var buttonArray =
'[{"ButtonIDToShow":"OB","ButtonText":"OK","ButtonDirection":"right",
"Callback": "CallbackOkbuttonSuccess"}\
,{"ButtonIDToShow":"CB","ButtonText":"Cancel",
"ButtonDirection":"left",
"Callback":"CallbackCancelBtn",
"ButtonHref":"@Url.Action("Index","Department")"
}\
]';
plug.ShowModal({
PopupHeading: "Request
Successful!!",
ModalBodyContent: "Data
saved successfully.",
ButtonJsonArray: buttonArray, boolShowAllButtons: true });
},
error: function (xhr, status, errorThrown) {
console.log(errorThrown);
var buttonArray = '[{"ButtonIDToShow":"OB","ButtonText":"Close","ButtonDirection":"right"}]';
plug.ShowModal({
PopupHeading: "Request
Failed!!",
ButtonJsonArray: buttonArray });
}
});
// e.unbind(); //unbind. to stop
multiple form submit.
// e.Off('submit');
}
else {
var redirectTo = "abcd";
var buttonArray ='[\
{"ButtonIDToShow":"OB","ButtonText":"OK","ButtonDirection":"right"}\
,{"ButtonIDToShow":"CB","ButtonText":"Cancel",
"Callback":"CallbackCancelBtn","RedirectUrl":"' + redirectTo + '","ButtonHref":"' + redirectTo + '" }\
]' ;
plug.ShowModal({
ButtonJsonArray: buttonArray, boolShowValidationMessages: true });
}
});
});
function CallbackOkbuttonSuccess(btn) {
window.location.href = "/home/index";
}
function CallbackCancelBtn(btn) {
console.log(btn);
var
dataOfBtn = $(btn).data("posturl");
console.log("dataOfBtn=" + dataOfBtn);
var url =
$(btn).attr("href");
console.log("url=" + url);
window.location.href = url;
}
</script>
0 comments:
Post a Comment