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.
Related
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
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 a view as follows: DemoView.cshtml
#model Mvc3Razor.Models.UserModel
#{
ViewBag.Title = "Create";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>
Create</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())
{
#Html.ValidationSummary(true)
<fieldset>
<legend>UserModel</legend>
<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.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.City)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.City)
#Html.ValidationMessageFor(model => model.City)
</div>
<p>
<input type="submit" value="Create" /></p>
</fieldset>
}
<div>
#Html.ActionLink("Back to List", "Index")
</div>
<script type="text/javascript">
$(function () {
$('input[type="submit"]').click(function () {
$(this).attr('disabled', 'disabled');
});
});
</script>
And a controller: HomeController.cs
[HttpPost]
public ViewResult Create(UserModel um)
{
if (!TryUpdateModel(um))
{
ViewBag.updateError = "Create Failure";
return View(um);
}
_usrs.Create(um);
return View("Details", um);
}
In order to prevent multiple button clicks, I am trying to disable the button once user clicks the Create button but once the Create button is disabled it is not firing the HttpPost method.
Can anyone help me out in order to resolve this issue?
Try disabling the button when the form is submitted and not when the submit button is clicked:
$("form").submit(function() {
$(this).attr("disabled", "disabled");
return true;
});
What I will suggest is to redirect user back to Index Page upon Successfull Post. You want use PRG Pattern
Post, Redirect, Get (PRG) pattern in which it is "to help avoid
duplicate form submissions and allow web applications to behave more
intuitively with browser bookmarks and the reload button"
usrs.Create(um);
//Redirect to Index Page here
see this SO question for more details
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 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>