How to make this into a checkbox? - asp.net-mvc-3

So I have a view as such:
#model Tuple<LocApp.Models.Location, LocApp.Models.Service>
#{
ViewBag.Title = "Create";
}
<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>Location</legend>
<div class="editor-label">
#Html.LabelFor(model => model.Item1.name)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.Item1.name)
#Html.ValidationMessageFor(model => model.Item1.name)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.Item1.active)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.Item1.active)
#Html.ValidationMessageFor(model => model.Item1.active)
</div>
#Html.CheckBoxFor(model => model.Item2.id)
<p>
<input type="submit" value="Create" />
</p>
</fieldset>
}
<div>
#Html.ActionLink("Back to List", "Index")
</div>
and the line: #Html.CheckBoxFor(model => model.Item2.id) IMO is suppose to go through and for every service in the database create a check box based on the id so I can then save the id. How ever, apparently I must pass in a boolean value? the only one I have is model.Item2.active
Ideas?

CheckBoxes can only have boolean states: Checked or Unchecked. Your model must set a checkbox state by using a boolean value of true or false. If you want your checkbox to act as the mechanism for saving an Id to your database, you need to write business logic for checking if the checkbox is checked on the controller action. If the checkbox is checked, write the Id, otherwise don't write the Id.

You should have a bool model.Item1.checked (or active, enabled, etc), then use that instead of model.Item1.id, it will keep track of whether the flag is on or off for that item.
Then when they POST the form you can loop through (or use LINQ) all the items and save the id for each one that has .checked = true.

Related

required attribute not generating in mvc partial razor view (using Edmx Models)

#model eDurar.Models.BuyOnlineAddress
#using (Html.BeginForm())
{
#Html.ValidationSummary(true)
<fieldset>
<legend>BuyOnlineAddress</legend>
<div class="editor-label">
Address Details
</div>
<div class="editor-field">
#Html.EditorFor(model => model.Details, new {#required="required" })
#Html.ValidationMessageFor(model => model.Details)
</div>
<p>
<input type="submit" value="Create" />
</p>
</fieldset>
}
This is partial view, in the html generated, there is no required attribute
When I manually insert it in the html editor, works fine, but this method usually works for normal views
I haven't loaded any scripts this time
Thanks I got it now, I changed
#Html.EditorFor(model => model.Details, new {#required="required" })
to
#Html.TextBoxFor(model => model.Details, new {#required="required" })

MVC form submits after failing validation

This has been asked and answered 100 times, and I have read them all, yet still my form submits after failing validation. I found a reference to not using jquery.validate higher than 1.9.0, so I rolled back to that (had been using 1.11) but no change.
If i submit with an invalid form (nothing filled out) the error messages appear, then the form submits.
I have successfully implemented validation a couple times in the past, and I can't see what is different about this time. I need to take a break from banging my head against this, hoping a fresh pair of eyes may see something.
--Scripts:
<script src="#Url.Content("~/Scripts/jquery-1.9.1.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-ui-1.10.1.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.unobtrusive-ajax.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>
Model:
[Display(Name = "First Name *")]
[StringLength(20)]
[Required(ErrorMessage = "Required.")]
public string FirstName { get; set; }
[Remote("CheckDuplicatePerson", "Validation", AdditionalFields = "FirstName", ErrorMessage="Person Exists")]
[Display(Name = "Last Name *")]
[StringLength(30)]
[Required(ErrorMessage = "Required.")]
public string LastName { get; set; }
View:
<div class="PersonForm">
#using (Html.BeginForm("AddPerson", "Person", FormMethod.Post))
{ #Html.ValidationSummary(true)
<div id="editor-left">
<div class="formGroup">
<div class="editor-label">
#Html.LabelFor(model => model.FirstName)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.FirstName) <br />
#Html.ValidationMessageFor(model => model.FirstName)
</div>
</div>
<div class="formGroup">
<div class="editor-label">
#Html.LabelFor(model => model.MiddleName)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.MiddleName)
</div>
</div>
<div class="formGroup">
<div class="editor-label">
#Html.LabelFor(model => model.LastName)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.LastName) <br />
#Html.ValidationMessageFor(model => model.LastName)
</div>
</div>
<div class="controls"><hr />
<input type="submit" class="skbutton" value="Next Page" />
</div>
}
</div>
UPDATE:
Get a JS Error in the jquery 1.9.1 file on this peice of code:
parseJSON: function( data ) {
// Attempt to parse using the native JSON parser first
if ( window.JSON && window.JSON.parse ) {
return window.JSON.parse( data );
}
Finally got it working.
#Jerad, I tried removing the remote validation, no help.
Turned out it was the microsoft unobtrusive script. I updated that and it started working. There seems to be a fine line of dependancies with all this stuff. Here are my versions that are working:
jquery-1.9.1
jquery.unobtrusive-ajax - 3.1.1
jquery.validate - 1.11.1
jquery.validate.unobtrusive - 3.1.1
Thank you all for your input.
I had a similar problem. Putting #Html.ValidationMessageFor(model => model.FieldName) for every input field somehow fixed the problem

MVC3 Embed Models within Models

I am encountering many problems (validation, serialisation) when using models that embed other models and just wanted to know whether anybody has received issue with this kind of thing before. For example I have an enquiry form which has the following model attached:
Model
namespace
{
public class EnquiryStudent
{
public enquiry enquiry { get; set; }
public student student { get; set; }
}
}
The enquiry and student models (embedded inside enquiry student) are auto generated from the database (I am using database first approach).
Now for example a problem I get here is that I use a view to display a form based on the above model:
View
#using (#Html.BeginForm())
{
<div>
<fieldset>
<fieldset>
<legend>Enquiry</legend>
<div class="editor-label">
#Html.LabelFor(m => m.student.firstname)
</div>
<div class="editor-field">
#Html.TextBoxFor(m => m.student.firstname)
#Html.ValidationMessageFor(m => m.student.firstname)
</div>
<div class="editor-label">
#Html.LabelFor(m => m.student.surname)
</div>
<div class="editor-field">
#Html.TextBoxFor(m => m.student.surname)
#Html.ValidationMessageFor(m => m.student.surname)
</div>
<div class="editor-label">
#Html.LabelFor(m => m.student.email)
</div>
<div class="editor-field">
#Html.TextBoxFor(m => m.student.email)
#Html.ValidationMessageFor(m => m.student.email)
</div>
<div class="editor-label">
#Html.LabelFor(m => m.enquiry.subject)
</div>
<div class="editor-field">
#Html.TextBoxFor(m => m.enquiry.subject)
#Html.ValidationMessageFor(m => m.enquiry.subject)
</div>
<div class="editor-label">
#Html.LabelFor(m => m.enquiry.enquiry_text)
</div>
<div class="editor-field">
#Html.TextAreaFor(m => m.enquiry.enquiry_text)
#Html.ValidationMessageFor(m => m.enquiry.enquiry_text)
</div>
</fieldset>
<p>
<input type="submit" class="rounded-button-gray-shades" value="Send" />
</p>
</fieldset>
</div>
}
and the client side validation works great for everything except the enquiry text (an attribute of the embedded enquiry within EnquiryStudent model, i.e. it doesn't validate this client side only server side??
Now even stranger if I either change the enquiry_text to be a TextBoxFor instead of TextAreaFor it works great.
Or if I make a text area for another entity by adding a dummy field to the EnquiryStudent model (not embedded in another model) it works fine.
Can somebody please shed some light as like I said this is not the only quirk that I have been having with this kind of model relationship.
Thanks,

HttpPost method is not fired if the submit button is disabled

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

MVC 3 Razor AJAX doesn't work

In EditPhoto.cshtml:
#model vg_music.Models.images
#{
ViewBag.Title = "EditPhoto";
}
<h2>
EditPhoto2</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 (Ajax.BeginForm(new AjaxOptions{UpdateTargetId = "AjaxDiv"})) {
#Html.ValidationSummary(true)
<div id="AjaxDiv">
#Html.Partial("EditPhotoForm")
</div>
}
<div>
#Html.ActionLink("Back to List", "Index")
</div>
EditPhotoForm.cshtml:
#model vg_music.Models.images
<fieldset>
<legend>images</legend>
#Html.HiddenFor(model => model.id)
<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.comment)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.comment)
#Html.ValidationMessageFor(model => model.comment)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.filename)
</div>
<div class="editor-field">
<img src="#Url.Content("~/uploads/images/little/"+Model.filename)" alt="#Model.title"/><br />
</div>
<p>
<input type="submit" value="Сохранить" />
</p>
</fieldset>
PhotosController.cs:
....
[HttpPost]
public ActionResult EditPhoto(images obj)
{
if (ModelState.IsValid)
{
var db = new EditImagesModel();
db.SaveImage(obj);
if (Request.IsAjaxRequest()) //This does not work.
{
return PartialView("EditPhotoForm");
}
return RedirectToAction("EditPhotos");
}
return View();
}
....
Why is not satisfied:
if (Request.IsAjaxRequest())
{
return PartialView("EditPhotoForm");
}
Why is not satisfied:
Because you forgot to include:
<script src="#Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
in your EditPhoto.cshtml page. And because of this the Ajax.BeginForm helper doesn't perform any AJAX request but a simple form POST.
Contrary to ASP.NET MVC 1.0 and 2.0 where Ajax.* helpers such as Ajax.ActionLink and Ajax.BeginForm were polluting your markup with javascript obtrusively, in ASP.NET MVC 3 they simply generate HTML5 data-* attributes on the corresponding DOM elements. This way markup and javascript is kept separate. And you need javascript to interpret those attributes. This javascript is located in the jquery.unobtrusive-ajax.js script which needs to be included.

Resources