I am trying to create a group box around some textbox control. Here is my code so far:
<form method="POST" name="frmInfo" id="Info">
<fieldset class="box-border">
<legend class="box-border">My Information</legend>
<div class="row">
<div class="form-group col-md-4">
#Html.LabelFor(m => m.FirstName)
#Html.TextBoxFor(m => m.FirstName, new {#class = "form-control"})
#Html.ValidationMessageFor(m => m.FirstName)
</div>
<div class="form-group col-md-4">
#Html.LabelFor(m => m.LastName)
#Html.TextBoxFor(m => m.LastName, new {#class = "form-control"})
#Html.ValidationMessageFor(m => m.LastName)
</div>
<div class="form-group col-md-4">
#Html.LabelFor(m => m.Email)
#Html.TextBoxFor(m => m.Email, new {#class = "form-control"})
#Html.ValidationMessageFor(m => m.Email)
</div>
</div>
</fieldset>
</form>
When the page is rendered, I only see the group name and one line above the textboxes but there is not groupbox wrapping around the textbox. How can I fix this? Thanks
It could because of you class="box-border" overriding the styles
Try Removing it . I hope it will solve your problem
Related
I have an app that I am adding mobile pages using jQuery mobile for MVC 3. So far it is working great, until I got to the point I needed a submit button to hit the post in the controller.
I am just using a simple input button:
<div>
<div class="editor-label">
#Html.LabelFor(m => m.UserName)
</div>
<div class="editor-field">
#Html.NoAutoCompleteTextBoxFor(m => m.UserName)<br/>
#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 { AutoCompleteType = "None", autocomplete = "off" })<br/>
#Html.ValidationMessageFor(m => m.Password)
</div>
<p>
#Html.ActionLink("Recover username/password", "LocateLoginInfo")
</p>
<div>
<input type="submit" value="Log On" id="mobile_LogOn"/>
</div>
I am new to jQuery mobile, any help would be appreciated.
Thanks!
Have you added the content in a form?
#using (Html.BeginForm("Login", "Account", FormMethod.Post))
{
...
<input type="submit" value="Log On" id="mobile_LogOn"/>
}
It should work.
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>
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
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();
});
});