How can I write a submit form using bootstrap modal? - asp.net-mvc

I'm using a bootstrap modal in asp.net mvc 5. But I'm having a problem with modal which I can't submit data. I have had call a _regiserPartial View form my _Layout (Master Page).
my controller:
[HttpPost]
public ActionResult Register(UserViewModel model)
{
var userViewModel = Mapper.Map<UserViewModel, User>(model);
if (ModelState.IsValid)
{
userViewModel.Status = true;
_userService.InsertUser(userViewModel);
model = new UserViewModel();
}
return View(model);
}
my _registerPrtial View:
#model HoiCode.Web.Models.Users.UserViewModel
<form class="form-horizontal">
<div id="registerModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Resgister</h4>
</div>
#using (Html.BeginForm("Register", "User", FormMethod.Post))
{
#Html.AntiForgeryToken()
<div class="modal-body">
<div class="form-group">
<label class="col-sm-4 control-label">#Html.LabelFor(m => m.Email)</label>
<div class="col-sm-8">
#Html.TextBoxFor(m => m.Email, new { #type = "email", #class = "form-control" })
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label">#Html.LabelFor(m => m.Password)</label>
<div class="col-sm-8">
#Html.PasswordFor(m => m.Password, new { #class = "form-control" })
</div>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
}
</div>
</div>
</div>
<script>
$(document).ready(function () {
$('.launchRegisterModal').click(function () {
$('#registerModal').modal({
keyboard: false
});
});
});
</script>
my _layout: I'll call _registerPartial from here
Register

Related

MVC refresh table data in modal using entity framework

good day. how can I refresh a modal table data? well, I have this textbox that when a user clicks show a modal pop-up. inside the pop-up is a partial view with the table and a search. When a user searches, instead of reloading the value in the modal, it redirects me to the partial view itself. I have seen a lot of examples like this one -- https://forums.asp.net/t/2098629.aspx?Advance+search+in+a+MVC+Popup+Window+ -- but still cannot go through it. its basically a modal popup but contains a partial view in it, once the search was clicked, just need to reload the table and no more. thanks in advance
Partial View Code:
public ActionResult ShowTaxPayer(int? page, string searchString)
{
var user = (from u in db2.Payers
select new Taxpayer
{
ID = u.objid,
Firstname = u.firstname,
Lastname = u.lastname,
Middlename = u.middlename,
Address = u.primaryaddress
});
if (string.IsNullOrEmpty(searchString))
{
return View(user.ToList().ToPagedList(page ?? 1, 10));
}
else
{
return View(user.Where(s => s.Firstname.Contains(searchString)).ToList().ToPagedList(page ?? 1, 10));
}
}
Razor:
#using (Html.BeginForm("Index", "Wizard", FormMethod.Post))
{
#Html.ValidationSummary(true)
<fieldset>
<div class="wizard-step">
#Html.Label("Taxpayer Name")
#Html.TextBoxFor(m => m.taxpayername, new { data_toggle = "modal", data_target = "#myModal", data_backdrop = "static", data_keyboard = "false" })
#Html.ValidationMessageFor(m => m.taxpayername)
</div>
<div class="wizard-step">
#Html.Label("Taxpayer Address")
#Html.EditorFor(m => m.taxpayeraddress)
#Html.ValidationMessageFor(m => m.taxpayeraddress)
</div>
<div class="wizard-step">
#Html.Label("Trade Name")
#Html.EditorFor(m => m.tradename)
#Html.ValidationMessageFor(m => m.tradename)
</div>
<div class="wizard-step confirm">
</div>
<p>
<input type="button" id="back-step" name="back-step" value="<-- Back" />
<input type="button" id="next-step" name="next-step" value="Next -->" />
</p>
</fieldset>
}
The Modal:
<div class="modal fade" id="myModal" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<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" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
#{Html.RenderAction("ShowTaxPayer", "Wizard");}
</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>
I just need to load the data from my model in the modal and not redirect me to the actual view. Thanks in advance.
Here the Model Popup
<div class="modal-body">
#{Html.RenderAction("ShowTaxPayer", "Wizard");}
</div>
and changed to
<div class="modal-body" id="popupTableName">
</div>
and Add Javascript
<script>
window.onload = LoadTable();
function LoadTable(){
$.get( '#Url.Action("actionName","ControllerName", new { id = Model.ID } )', function(data) {
$('#popupTableName').html(data);
});
}
function onChange(){
LoadTable();
}
</script>

Update database using partial view in Modal

I have a partial view that is strongly typed named "ChangePassword.cshtml" as so:
#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>
#using (Html.BeginForm("ChangePassword", "Account"))
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
<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="updatePassword()"/>
</div>
</div>
}
and I have a cshtml that invokes this partial view in a modal.
#model WebApplication1.Models.DB.SysUser
<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-body">
#*<p class="nobottommargin">#Html.Action("InvokeChangePassword", "Account")</p>*#
<p class="nobottommargin">
#{
#Html.RenderPartial("ChangePassword", ); <----- HOW TO USE RENDER PARTIAL
}
</p>
</div>
</div>
</div>
</div>
</div>
I will be using the modal to update the password. Since it doesn't allow me to use #Html.RenderPartial("ChangePassword"), how can I use the #Html.RenderPartial() when it needs an object of ChangeUserPassword as its model? Thank you.
If you want to use renderpartial, add the model you want to pass to the partial view inside the main model.
example:
If you want SysUser and ChangeUserPassword, then add a main model which contains both this class.
Public class MainModel{
public SysUser suser {get;set;}
public ChangeUserPassword cup {get;set;}
}
Then pass the main model inside the main view and pass ChangeUserPassword like below:
#model WebApplication1.Models.MainModel
<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-body">
#*<p class="nobottommargin">#Html.Action("InvokeChangePassword", "Account")</p>*#
<p class="nobottommargin">
#{
Html.RenderPartial("~/Views/Users/_ChangePassword.cshtml", Model.cup);
}
</p>
</div>
</div>
</div>
</div>
</div>
Note: Change the path and names according to your need.

How can i prevent page refresh (reload) while pressing login button in asp.net mvc identity?

So folks, i just created a _Login partial instead of Login view and rendered that partial view in my _Layout. The partial view is shown in a Modal, until yet everything seems OK! But whenever i just click the Login (Sign In) button the page reloads and nothing happens although i expect an error like the E-mail field cannot be empty or the user does not exist but surprisingly nothing happens and the page refreshes.
Here is the code for the _Login partial.
#model Hire.af.WebUI.Models.LoginViewModel
<div class="modal-body">
<!--Social Media Login Links-->
<div class="form-group row login-socical">
<div class="col-sm-9 col-sm-offset-3">
<div class="button_socical fb">
<i class="fa fa-facebook-square"> </i>
<em class="fa-facebook-square">Login with Facebook</em>
</div>
<div class="button_socical gg">
<i class="fa fa-google-plus"> </i>
<em class="fa-google-plus">Login with Google</em>
</div>
<div class="button_socical linkedin">
<i class="fa fa-linkedin-square"> </i>
<em class="fa-linkedin-square">Login with LinkedIn</em>
</div>
</div>
</div>
<!--Login Form-->
<form class="noo-ajax-login-form form-horizontal">
#using (Html.BeginForm("Login", "Account", new { ReturnUrl = ViewBag.ReturnUrl }, FormMethod.Post, new { #class = "form-horizontal", role = "form" }))
{
#Html.AntiForgeryToken()
<hr />
#Html.ValidationSummary(true, "", new { #class = "col-sm-3" })
<div class="form-group row">
#Html.LabelFor(m => m.Email, new { #class = "col-sm-3 control-label" })
<div class="col-sm-9">
#Html.TextBoxFor(m => m.Email, new { #class = "log form-control", #placeholder="Email OR Username" })
#Html.ValidationMessageFor(m => m.Email, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group row">
#Html.LabelFor(m => m.Password, new { #class = "col-sm-3 control-label" })
<div class="col-sm-9">
#Html.PasswordFor(m => m.Password, new { #class = "pwd form-control", #placeholder="Password" })
#Html.ValidationMessageFor(m => m.Password, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<div class="checkbox">
#Html.CheckBoxFor(m => m.RememberMe)
#Html.LabelFor(m => m.RememberMe)
</div>
</div>
</div>
<!--Remember Me Checkbox-->
<div class="form-actions form-group text-center">
<button type="submit" class="btn btn-primary">Sign In</button>
<div class="login-form-links">
<span><i class="fa fa-question-circle"></i> Forgot Password?</span>
<span>
Don't have an account yet?
<a href="#" class="member-register-link" data-rel="registerModal">
#Html.ActionLink("Register Now", "Register") <i class="fa fa-long-arrow-right"></i>
</a>
</span>
</div>
</div>
#* Enable this once you have account confirmation enabled for password reset functionality
<p>
#Html.ActionLink("Forgot your password?", "ForgotPassword")
</p>*#
}
</form>
</div>
and below is how i rendered this partial in my _Layout.
<div class="memberModalLogin modal fade" id="userloginModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-member">
<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">Login</h4>
</div>
<!--Login Partial Goes Here-->
#Html.Partial("_Login")
</div>
</div>
</div>
Any help would be appreciated.
You have nested forms which is invalid html and not supported. Remove the outer form from your partial view
<form class="noo-ajax-login-form form-horizontal"> // remove this and its closing tag
#using (Html.BeginForm(....

Using Pop-up windows display the validation message

I use pop menu for registration form in mvc 4. The issue is all validation are performed in another Page.But the validation held in pop up window only.
This is a simple example using Ajax.BeginForm() with bootstrap modal:
Note: Remember adding
<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
Your controller:
public ActionResult Edit()
{
return View(new QuestionMaster());
}
[HttpPost]
public ActionResult Edit(QuestionMaster question2)
{
if (!ModelState.IsValid)
{
return View(question2);
}
return RedirectToAction("Index");
}
Your view code:
#model MVCApp.Controllers.QuestionMaster
<div id="replaceDiv">
#using (Ajax.BeginForm(null, new AjaxOptions { HttpMethod = "Post", InsertionMode = InsertionMode.Replace, UpdateTargetId = "replaceDiv", OnSuccess = "$('#myModal').modal('show');" }))
{
<fieldset>
<legend>QuestionMaster</legend>
<div class="editor-label">
#Html.LabelFor(model => model.Question)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.Question)
</div>
</fieldset>
<p>
<input type="submit" value="Save" />
</p>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<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" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
#Html.ValidationMessageFor(model => model.Question)
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
}
</div>

ASP.Net MVC 5 Form in a Twitter Bootstrap Modal - Return to modal if user does not enter correct field information

I have a contact form in a Twitter Bootstrap Modal and if the user happens to not enter a name or email address and hits submit I want to return to the Modal instead of just closing the Modal. Also if the form is valid I would like to let the user know that an we will be contacting them shortly in the same modal. Is this possible?
Here is my controler.
[HttpPost]
public ActionResult Index(Contact model)
{
ViewBag.IsValid = false;
ViewBag.CaptchaError = "";
RecaptchaVerificationHelper recaptchaHelper = this.GetRecaptchaVerificationHelper();
if (String.IsNullOrEmpty(recaptchaHelper.Response))
{
ViewBag.CaptchaError = "The Captcha cannot be empty";
return View();
}
RecaptchaVerificationResult recaptchaResult = recaptchaHelper.VerifyRecaptchaResponse();
if (recaptchaResult != RecaptchaVerificationResult.Success)
{
ViewBag.CaptchaError = "The Captcha was incorrect";
return View();
}
if (ModelState.IsValid)
{
SendSupportEmail(model);
ViewBag.isValid = true;
}
return View();
}
Here is my view with the Modal
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content col-md-12">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Contact Us</h4>
</div>
<center>
<div class="modal-body">
#using (Html.BeginForm())
{
if ((bool)ViewBag.IsValid)
{
}
else
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
<div class="form-group">
<div class="col-md-12">
#Html.TextBoxFor(model => model.Name, new { #class = "form-control", placeholder = "Name" })
#Html.ValidationMessageFor(model => model.Name)
</div>
</div>
<div class="form-group">
<div class="col-md-12">
#Html.TextBoxFor(model => model.Phone, new { #class = "form-control", placeholder = "Phone" })
#Html.ValidationMessageFor(model => model.Phone)
</div>
</div>
<div class="form-group">
<div class="col-md-12">
#Html.TextBoxFor(model => model.Email, new { #class = "form-control", placeholder = "E-Mail Address" })
#Html.ValidationMessageFor(model => model.Email)
</div>
</div>
<div class="form-group">
<div class="col-md-12">
#Html.TextAreaFor(model => model.Comments, new { #class = "form-control", height = "40", placeholder = "Comments" })
#Html.ValidationMessageFor(model => model.Comments)
</div>
</div>
<div class="form-group">
#if (!string.IsNullOrEmpty(ViewBag.CaptchaError))
{
<span class="field-validation-error">#ViewBag.CaptchaError</span>
}
#Html.Recaptcha(theme: Recaptcha.Web.RecaptchaTheme.Clean)
</div>
<div class="form-group">
<div class="col-md-12">
<input type="submit" id="submit" value="Submit" class="btn btn-default btn-lg btn-primary col-sm-12" />
</div>
</div>
</div>
}
}
</div>
</center>
</div>
</div>
I have searched everywhere and was unable to find a solution.
Don't have enough rep to comment - hence the answer. I reckon the easiest way to do this would be to use ajax. User jquery validation plugin to validate user input on submit click. This way, the validation messages can be displayed on the modal itself and the page doesn't have to be refreshed.
On successful validation, the form can be posted to your controller action. You can send a success message as part of your response and display it as a popup or a notification using notifyjs or your own code.

Resources