I have 2 validation forms on page.
<div id='LogOn' style="background-color: White;">
#using (Ajax.BeginForm("LogOnAjax", "Home", new AjaxOptions { UpdateTargetId = "LogOn", OnSuccess = "logInComplete" }))
{
//ITW2012Mobile.ViewModels.LogOnModel m = Model;
#Html.HiddenFor(model => model.IsLoggedIn)
#Html.HiddenFor(model => model.ReturnUrl)
<div>
#Html.ValidationSummary()
</div>
<div>
#Html.LabelFor(model => model.UserName)
#Html.EditorFor(model => model.UserName)
</div>
<div>
#Html.LabelFor(model => model.Password)
#Html.EditorFor(model => model.Password)
</div>
<div>
<input type="submit" value="Login" />
</div>
}
</div>
and
<fieldset>
#using (Html.BeginForm(Model.ActionMethod, Model.Controller))
{
#Html.ValidationSummary()
.....
<div class="display-label"> E-mail Address * </div>
<div class="display-field">
#Html.EditorFor(model => model.Username)
#Html.ValidationMessageFor(model => model.Username)
</div>
<div class="display-label"> Create Password * </div>
<div class="display-field">
#Html.PasswordFor(model => model.Password)
#Html.ValidationMessageFor(model => model.Password)
</div>
<p>
<input type="submit" value="Create" />
</p>
}
</fieldset>
How can I mark that ModelState.AddModelError is for first of form, because I see the same error in the both places of validation summary?
How can I mark that ModelState.AddModelError is for first of form
You can't.
What you can do is having ValidationMessageFor for each form properties instead of the ValidationSummary
Related
I have used HTMLEditor code as below.
I want to clear only one HTMLEditor from a click. How can I find a particular HTML Editor control in controller.cs file?
#model Blog.Models.User
#{
ViewBag.Title = "Register New User";
}
#using Microsoft.Web.Mvc;
#using MVC3MultiSubmitButtonExtension;
<h2>
Register New User</h2>
<script src="#Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
#using (Html.BeginForm("Create", "Home", FormMethod.Post))
{
#Html.ValidationSummary(true)
<fieldset>
<legend>Fill User Details</legend>
<div class="editor-label">
#Html.LabelFor(model => model.FirstName)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.FirstName)
#Html.ValidationMessageFor(model => model.FirstName)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.LastName)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.LastName)
#Html.ValidationMessageFor(model => model.LastName)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.Username)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.Username)
#Html.ValidationMessageFor(model => model.Username)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.Password)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.Password)
#Html.ValidationMessageFor(model => model.Password)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.EmailAddress)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.EmailAddress)
#Html.ValidationMessageFor(model => model.EmailAddress)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.MobileNumber)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.MobileNumber)
#Html.ValidationMessageFor(model => model.MobileNumber)
</div>
<p>
#* <input type="submit" value="Create" />*# #*#Html.MultiSubmitButton(Url.Action("Create"), "btnCreate", "Create")*#
#* #Html.MultiSubmitButton(Url.Action("Cancel"), "btnCancel", "Cancel", new { #class = "cancel" })*#
<input type="submit" id="btnSubmit" name="btnSubmit" value="Submit" />
<input type="submit" id="btnReset" name="btnReset" value="Reset"
class="cancel" />
</p>
</fieldset>
}
<div>
#Html.ActionLink("Click here to go Login Page", "Index")
</div>
I want to set string.empty only for EmailAddress HTML Editor.
If you want to reset the complete form on click of a button you can set the type of button as type="reset".
<input type="reset" id="btnReset" name="btnReset" value="Reset" />
If you want to clear a particular field like EmailAddress on click of the button then you have to listen to the click event. For that first you have to set a unique id for that button.
<input id="clearEmailAddress" type="button" value="Clear Email Address" />
<script type="text/javascript>
$("#clearEmailAddress").click(function(){
$(this).closest('form').find("input[name='EmailAddress']").val("");
});
</script>
Mi trouble is this: I have a View called "Create" it refers to the creation of promotions. Each promotion has Genres according to the user, so, when I do enter to the "create promotions" I have a list (dropdown) with the genres of the user, but if there is no an adecuate genre I must create it without leaving the current page, so I used a partial view for creating new genres and I inserted it in the main view (Create promotions) It do works, but after the genre is created, the main view shows ALL the genres and not only those who correspond to the current user.
This is the main view:
#model Points2Pay.Models.Promocion
#{
ViewBag.Title = "Create";
}
<h2>Create</h2>
<script type="text/javascript">
$(document).ready(function () {
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').click(function () {
$(".slidingDiv").slideToggle();
});
});
#using (Html.BeginForm())
{
Show/hide
<div class="slidingDiv" id="partialView">
#{Html.RenderAction("Create2", "Genre");}
</div>
}
#using (Html.BeginForm("Create","StoreManager"))
{
#Html.ValidationSummary(true)
<fieldset>
<legend>Promocion</legend>
<div class="editor-label">
#Html.LabelFor(model => model.GenreId, "Genre")
</div>
<div class="editor-field" id="DROPDOWN">
#Html.DropDownList("GenreId", String.Empty)
#Html.ValidationMessageFor(model => model.GenreId)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.Title)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.Title)
#Html.ValidationMessageFor(model => model.Title)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.Price)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.Price)
#Html.ValidationMessageFor(model => model.Price)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.Puntos)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.Puntos)
#Html.ValidationMessageFor(model => model.Puntos)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.PromocionArtUrl)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.PromocionArtUrl)
#Html.ValidationMessageFor(model => model.PromocionArtUrl)
</div>
<p>
<input type="submit" value="Create" />
</p>
</fieldset>
}
<div>
#Html.ActionLink("Back to List", "Index")
</div>`
THIS IS THE SECONDARY VIEW
#model Points2Pay.Models.Genre
<script src="#Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
#using (Html.BeginForm()) {
#Html.ValidationSummary(true)
<legend>New Genre</legend>
<div class="editor-label">
#Html.LabelFor(model => model.Name)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.Name)
#Html.ValidationMessageFor(model => model.Name)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.Description)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.Description)
#Html.ValidationMessageFor(model => model.Description)
</div>
<p>
<input type="submit" value="Create new Genre" />
</p>
}
AND THIS IS THE CONTROLLER
[ChildActionOnly]
public ActionResult Create2()
{
return PartialView("Create2");
}
//
// POST: /Genre/Create2
[HttpPost]
public ActionResult Create2(Genre genre)
{
var ComercioActual = (Guid)System.Web.Security.Membership.GetUser().ProviderUserKey;
if (ModelState.IsValid)
{
genre.ComercioId = ComercioActual;
db.Genres.Add(genre);
db.SaveChanges();
return PartialView("Create2");
}
return PartialView("Create2");
}
Hope you can help me.
I am trying to make a popup dialog to allow the user to fill in a form.
When they click submit I want to submit the form.
I figured out how to make the modal popup but cannot figure out how to get it to submit the form when the form is clicked. Does anyone know how to do this?
#using (Html.BeginForm())
{
<div>
<fieldset>
<legend>Account Information</legend>
<div class="editor-label">
#Html.LabelFor(m => m.UserName)
</div>
<div class="editor-field">
#Html.TextBoxFor(m => m.UserName)
#Html.ValidationMessageFor(m => m.UserName)
</div>
<div class="editor-label">
#Html.LabelFor(m => m.Password)
</div>
<div class="editor-field">
#Html.PasswordFor(m => m.Password)
#Html.ValidationMessageFor(m => m.Password)
</div>
<div class="editor-label">
#Html.CheckBoxFor(m => m.RememberMe)
#Html.LabelFor(m => m.RememberMe)
</div>
<p>
<input type="submit" value="Log On" />
</p>
</fieldset>
</div>
}
<script type="text/javascript">
$(document).ready(function () {
$("#dialog-form").dialog({
modal: true,
buttons: {
"Submit": function () {
$(this).dialog("close");
},
Cancel: function () {
$(this).dialog("close");
}
}
});
});
</script>
You need to make sure you have a valid POST method in your controller for the form to submit to. Your form here looks valid as long as you aren't expecting the dialog's submit button to submit the form. If that is the case then you will need to give the form an ID and call submit from your function for the dialog "Submit" button.
<div id="dialog-form">
#using (Html.BeginForm("LogOn", "Account", FormMethod.Post, new { id = "LogOnForm" })) {
<div>
<fieldset>
<legend>Account Information</legend>
<div class="editor-label">
#Html.LabelFor(m => m.UserName)
</div>
<div class="editor-field">
#Html.TextBoxFor(m => m.UserName)
#Html.ValidationMessageFor(m => m.UserName)
</div>
<div class="editor-label">
#Html.LabelFor(m => m.Password)
</div>
<div class="editor-field">
#Html.PasswordFor(m => m.Password)
#Html.ValidationMessageFor(m => m.Password)
</div>
<div class="editor-label">
#Html.CheckBoxFor(m => m.RememberMe)
#Html.LabelFor(m => m.RememberMe)
</div>
<p>
<input type="submit" value="Log On" style="display:none;" />
</p>
</fieldset>
</div>
}
</div>
<script type="text/javascript">
$(document).ready(function () {
$("#dialog-form").dialog({
modal: true,
buttons: {
"Submit": function () {
$("#LogOnForm").submit();
},
Cancel: function () {
$(this).dialog("close");
}
}
});
});
</script>
I have a mvc 3 form with 2 columns. The left column is a treeview and when a node is selected the div with id='partialView' is updated to show the details of that node. This appears to be work ok.
The edit form (which is a partial view) is loaded in the div with id='partialView'.
Now the problem occurs when the user submits this partial view...now it does post back to the controller and the correct method HOWEVER the result is not returned to the div with id='partialView' but posts to a new page.
So this is the scenario where I want the partial view to post and return back replacing the existing partial view.
Is this possible?
I am including my code below for my partial view...
#model DataModel.Code
#using (Ajax.BeginForm("Edit", "Code", new AjaxOptions {
UpdateTargetId = "partialView",
HttpMethod="POST"
}
)) {
#Html.ValidationSummary(true)
<fieldset>
<legend>Code</legend>
#Html.HiddenFor(model => model.CodeID)
<div class="editor-label">
#Html.LabelFor(model => model.Description)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.Description)
#Html.ValidationMessageFor(model => model.Description)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.Note)
#Html.ValidationMessageFor(model => model.Note)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.DateModified)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.DateModified)
#Html.ValidationMessageFor(model => model.DateModified)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.TopicID)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.TopicID)
#Html.ValidationMessageFor(model => model.TopicID)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.Special)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.Special)
#Html.ValidationMessageFor(model => model.Special)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.Html)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.Html)
#Html.ValidationMessageFor(model => model.Html)
</div>
<p>
<input type="submit" value="Save" />
</p>
</fieldset>
}
<div>
#Html.ActionLink("Back to List", "Index")
</div>
#Html.Telerik().ScriptRegistrar().jQuery(true)
<script type="text/javascript">
$(document).ready(function () {
});
</script>
Include
<script src="#Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
in your _Layout.cshtml
I am creating a loginform like this:
#using (Ajax.BeginForm("Login", new AjaxOptions()
{
HttpMethod = "POST",
OnComplete = "onComplete"
}))
{
#Html.ValidationSummary(true)
<fieldset>
<div class="editor-label">
#Html.LabelFor(model => model.Username, "Username")
</div>
<div class="editor-field">
#Html.EditorFor(model => model.Username)
#Html.ValidationMessageFor(model => model.Username)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.Password, "Wachtwoord")
</div>
<div class="editor-field">
#Html.PasswordFor(model => model.Password)
#Html.ValidationMessageFor(model => model.Password)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.Remember, "Remember me")
</div>
<div class="editor-field">
#Html.EditorFor(model => model.Remember)
#Html.ValidationMessageFor(model => model.Remember)
</div>
<p>
<input type="submit" value="Inloggen" />
</p>
</fieldset>
}
Now the password is send unhashed over the internet for validation to the model, which is not safe. I want to make sure the password is always hashed going over the line and preventing man in the middle sniffers.
The onBegin won't work because the elements cannot be modified anymore after this, any other ideas?
You can do it without ajax by catching the submit event and hash the password before posting the form
#using (Html.BeginForm("LogOn","Login",FormMethod.Post,new {id = "loginForm"})) {
<div>
<fieldset>
<legend>Account information</legend>
<div class="editor-label">
#Html.LabelFor(m => m.UserName)
</div>
<div class="editor-field">
#Html.TextBoxFor(m => m.UserName)
#Html.ValidationMessageFor(m => m.UserName)
</div>
<div class="editor-label">
#Html.LabelFor(m => m.Password)
</div>
<div class="editor-field">
#Html.PasswordFor(m => m.Password, new {id = "password"})
#Html.ValidationMessageFor(m => m.Password)
</div>
<div class="editor-label">
#Html.CheckBoxFor(m => m.RememberMe)
#Html.LabelFor(m => m.RememberMe)
</div>
<p>
<input type="submit" value="Connect" id="submit"/>
</p>
</fieldset>
</div>}
For example with this javascript code :
$(function () {
$("#loginForm").on("submit",function (e) {
var form = $(this);
var pass = $("#password").val();
$("#password").val(MD5(token + MD5(pass)));
form.submit();
});
});