I'm having problems with my jquery date validation script so I installed the jquery globlization package.I'm very new to packages and installation of packages so I'm not quite sure how to utilize the scripts. I tried doing the following but it still gives me this error.
Everything in the Scripts folder
Snippet in Views\User\Create.cshtml
<% Html.EnableClientValidation(); %>
<% using (Html.BeginForm())
{ %>
<%: Html.ValidationSummary(false) %>
<%: Html.EditorForModel() %>
<p> <input type="submit" value="Create" /></p>
<% } %>
</fieldset>
}
Views\User\Create.cshtml
#model RecreationalServicesTicketingSystem.Models.User
#{
ViewBag.Title = "Create";
}
<h2>Create</h2>
#using (Html.BeginForm()) {
#Html.AntiForgeryToken()
#Html.ValidationSummary(true)
<fieldset>
<legend>User</legend>
<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.FirstMidName)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.FirstMidName)
#Html.ValidationMessageFor(model => model.FirstMidName)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.EnrollmentDate)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.EnrollmentDate)
#Html.ValidationMessageFor(model => model.EnrollmentDate)
</div>
<% Html.EnableClientValidation(); %>
<% using (Html.BeginForm())
{ %>
<%: Html.ValidationSummary(false) %>
<%: Html.EditorForModel() %>
<p> <input type="submit" value="Create" /></p>
<% } %>
</fieldset>
}
<div>
#Html.ActionLink("Back to List", "Index")
</div>
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
}
Try something like this
#Html.TextBoxFor(m => m.DT_Project_Start, "{0:dd/mm/yyyy}")
and see if it works
I just needed to add en-NZ into this line of code found in jquery-ui-1.8.24.js and the date validation started to work
$.extend(this._defaults, this.regional['']);
$.extend(this._defaults, this.regional['en-NZ']);
Related
I've been working on asp.net mvc.I ran into a problem.I have a textbox which is multiline.I want to increase it's height.I've tried using #html.raw method and also tried to add inline style using new{styles:} in Html.EditFor.Nothing worked.So,How can I do that ?Here is my View
#model CTCFremont.Models.eMail
#{
ViewBag.Title = "Create";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script>
$(document).ready(function () {
$("#PrayerRequest").css("height", 300);
$("#PrayerRequest").css("width", 200);
});
</script>
<h2>Submit Your Prayer Request</h2>
#using (Html.BeginForm()) {
#Html.AntiForgeryToken()
#Html.ValidationSummary(true)
<fieldset>
<legend>eMail</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.Email)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.Email)
#Html.ValidationMessageFor(model => model.Email)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.Request)
</div>
<div class="editor-field" >
#Html.EditorFor(model => model.Request,Html.Id("PrayerRequest"))
#Html.ValidationMessageFor(model => model.Request)
</div>
<p>
<input type="submit" value="Create" />
</p>
</fieldset>
}
<div>
#Html.ActionLink("Back to List", "Index")
</div>
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
}
Let me know how to deal with this..
Not sure which editor you want to use a textarea for, but just use code like the following to specify a height in CSS styles.
#Html.TextAreaFor(x => x.Request, new {#style = "height: 30px;"})
<%# Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<Movies.Models.StudentModel>" %>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
Create
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<form id="form1" runat="server">
<script type="text/javascript">
$(document).ready(function () {
//$('.date').datepicker({ dateFormat: "dd/mm/yy", Date: Date });
$('.date').datepicker();
$('.date').datepicker("setDate", new Date());
});
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#UImage').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$("#imgInp").change(function () {
readURL(this);
});
</script>
<h2>Create</h2>
<% using (Html.BeginForm("Create", "Student", FormMethod.Post, new { enctype = "multipart/form-data" })) { %>
<%: Html.ValidationSummary(true) %>
<fieldset>
<legend>Fields</legend>
<div class="editor-label">
<%: Html.LabelFor(model => model.StudentName) %>
</div>
<div class="editor-field">
<%: Html.TextBoxFor(model => model.StudentName) %>
<%: Html.ValidationMessageFor(model => model.StudentName) %>
</div>
<div class="editor-label">
<%: Html.LabelFor(model => model.RollNo) %>
</div>
<div class="editor-field">
<%: Html.TextBoxFor(model => model.RollNo) %>
<%: Html.ValidationMessageFor(model => model.RollNo) %>
</div>
<div class="editor-label">
<%: Html.LabelFor(model => model.STD) %>
</div>
<div class="editor-field">
<%: Html.DropDownListFor(model => model.STD, Model.STDs, "Please Select Std", new { #class = "form-control" }) %>
<%: Html.ValidationMessageFor(model => model.STD)%>
</div>
<div class="editor-label">
<%: Html.LabelFor(model => model.Address) %>
</div>
<div class="editor-field">
<%: Html.TextBoxFor(model => model.Address)%>
<%: Html.ValidationMessageFor(model => model.Address)%>
</div>
<div class="editor-label">
<%: Html.LabelFor(model => model.Address2) %>
</div>
<div class="editor-field">
<%: Html.TextBoxFor(model => model.Address2)%>
<%: Html.ValidationMessageFor(model => model.Address2)%>
</div>
<div class="editor-label">
<%: Html.LabelFor(model => model.Image) %>
</div>
<div class="editor-field">
<input type='file' id="File1" name="File1" onchange="readURL(this)" />
<img id="UImage" src="#" height="300px" width="300px" alt="your image" />
<%: Html.ValidationMessageFor(model => model.Image)%>
</div>
<div class="editor-label">
<%: Html.LabelFor(model => model.City) %>
</div>
<div class="editor-field">
<%: Html.TextBoxFor(model => model.City)%>
<%: Html.ValidationMessageFor(model => model.City)%>
</div>
<div class="editor-label">
<%: Html.LabelFor(model => model.ZIP) %>
</div>
<div class="editor-field">
<%: Html.TextBoxFor(model => model.ZIP)%>
<%: Html.ValidationMessageFor(model => model.ZIP)%>
<br />
<br />
</div>
<div class="editor-label">
<%: Html.LabelFor(model => model.DOB) %>
</div>
<div class="editor-field">
<%: Html.TextBoxFor(model => model.DOB, new { #class = "date" })%>
<%: Html.ValidationMessageFor(model => model.DOB)%>
</div>
<p>
<input type="submit" value="Create" />
</p>
</fieldset>
<% } %>
<div>
<%: Html.ActionLink("Back to List", "Index") %>
</div>
</form>
</asp:Content>
this is my aspx page where i used the jquery to show the uploaded image to the user.
The controller code is like
[HttpPost]
public ActionResult Create(StudentModel StudentEn,HttpPostedFileBase File1)
{
Student st = new Student();
HttpPostedFileBase file;
file = Request.Files["File1"];///it only access the name of the object of html."file1" is the name of the object
if (file != null && file.ContentLength > 0)
{
byte[] Image=null;
Image = new byte[file.ContentLength];
file.InputStream.Read(Image, 0, file.ContentLength);
StudentEn.Image=Image;
}
if (ModelState.IsValid)
{
st.Insert(StudentEn);
return RedirectToAction("Index");
}
else
{
StudentEn.STDs = getSelectedSTD(GetSTDList());
return View(StudentEn);
}
}
here is the controller code. where i always get the request.files null.
What do i have to change to upload image and store it into the database.
The problem is that you've two forms in your page which is confusing.
Try removing/Commenting the first form
i.e. <form id="form1" runat="server">
Modify the razor code as below
Try the razor code as below
<% = Html.BeginForm("Create", "Student", FormMethod.Post, new { enctype = "multipart/form-data" })%>
...............
..............
<% Html.EndForm(); %>
remove using and try
Try below code..use File1 directly with out assigning..It works for me
[HttpPost]
public ActionResult Create(StudentModel StudentEn,HttpPostedFileBase File1)
{
Student st = new Student();
//HttpPostedFileBase file;
// file = Request.Files["File1"];///it only access the name of the
//object of html."file1" is the name of the object
if (File1 != null && File1.ContentLength > 0)
{
byte[] Image=null;
Image = new byte[File1.ContentLength];
File1.InputStream.Read(Image, 0, File1.ContentLength);
StudentEn.Image=Image;
}
if (ModelState.IsValid)
{
st.Insert(StudentEn);
return RedirectToAction("Index");
}
else
{
StudentEn.STDs = getSelectedSTD(GetSTDList());
return View(StudentEn);
}
}
Try this :
public ActionResult Create(StudentModel StudentEn,FormCollection formCollection)
{
HttpPostedFileBase file= formCollection.Get("File1");
}
I'm using ASP.NET MVC4 in order to develop an intranet application. One of the main features is to allow the user to upload files which will be stored in my database. In order to do that, I'm using jQuery. However, I have no idea what I have to do to manipulate the uploaded files. I already know that I have to manipulate them into the correspondent controller but after having read some tips on the internet, I just can't see how I am suppose to do.
Here is my view :
#model BuSIMaterial.Models.ProductAllocationLog
#{
ViewBag.Title = "Create";
}
<h2>Create</h2>
#using (Html.BeginForm())
{
#Html.ValidationSummary(true)
<fieldset>
<legend>ProductAllocationLog</legend>
<div class="editor-label">
Date :
</div>
<div class="editor-field">
#Html.TextBoxFor(model => model.Date, new { #class = "datepicker"})
#Html.ValidationMessageFor(model => model.Date)
</div>
<div class="editor-label">
Message :
</div>
<div class="editor-field">
#Html.TextAreaFor(model => model.Message)
#Html.ValidationMessageFor(model => model.Message)
</div>
<div class="editor-label">
Allocation :
</div>
<div class="editor-field">
#Html.DropDownList("Id_ProductAllocation", String.Empty)
#Html.ValidationMessageFor(model => model.Id_ProductAllocation)
</div>
<div class="demo" style="float:left; margin-top:5px;">
<div id="aupload" style = "border:2px dashed #ddd; width:100px; height:100px; margin-right:10px; padding:10px; float:left;"></div>
<div id="uploaded" style = "border: 1px solid #ddd; width:550px; height:102px; padding:10px; float:left; overflow-y:auto;"></div>
</div>
<p>
<input type="submit" value="Create" />
</p>
</fieldset>
}
<div>
#Html.ActionLink("Back to List", "Index")
</div>
I'm absolutly not asking for pre-made code samples but just for a way to proceed. It would be very kind.
There are three things you need to do. First, add an image upload field to your view:
<input type="file" name="file-upload" />
..make your form 'multipart'..
#using (Html.BeginForm("Action", "Controller", null, FormMethod.Post, new { enctype = "multipart/form-data" }))
{
}
...then in your controller, access the file via the 'Files' collection on the request object:
Request.Files["file-upload"];
If you wish to submit the form with ajax/jquery, then there is a little more work to do to serialize the files. This post will help you with this: Sending multipart/formdata with jQuery.ajax
#model MVCDemo.Models.tbl_Images
#{
ViewBag.Title = "Create";
}
<h2>Create</h2>
#using (Html.BeginForm())
{
#Html.ValidationSummary(true)
<fieldset>
<legend>ProductAllocationLog</legend>
<div class="editor-label">
Date :
</div>
<div class="editor-field">
#Html.TextBoxFor(model => model.Date, new { #class = "datepicker"})
#Html.ValidationMessageFor(model => model.Date)
</div>
<div class="editor-label">
Message :
</div>
<div class="editor-field">
#Html.TextAreaFor(model => model.Message)
#Html.ValidationMessageFor(model => model.Message)
</div>
<div class="editor-label">
Allocation :
</div>
<div class="editor-field">
#Html.DropDownList("Id_ProductAllocation", String.Empty)
#Html.ValidationMessageFor(model => model.Id_ProductAllocation)
</div>
<div class="demo" style="float:left; margin-top:5px;">
<div id="aupload" style = "border:2px dashed #ddd; width:100px; height:100px; margin-right:10px; padding:10px; float:left;"></div>
<div id="uploaded" style = "border: 1px solid #ddd; width:550px; height:102px; padding:10px; float:left; overflow-y:auto;"></div>
</div>
<p>
<input type="submit" value="Create" />
</p>
</fieldset>
}
<div>
#Html.ActionLink("Back to List", "Index")
</div>
I have a Create cshtml Page as follows :-
#model MvcCommons.ViewModels.CompositeViewModel
#{
ViewBag.Title = "Create";
}
<h2>Create</h2>
<script src="#Url.Content("~/Scripts/jquery.validate.min.js")"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")"></script>
#using (Html.BeginForm()) {
#Html.ValidationSummary(true)
<fieldset>
<legend>Article</legend>
<div class="editor-label">
#Html.LabelFor(model => model.ArticleViewModel.Article.ArticleTitle)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.ArticleViewModel.Article.ArticleTitle)
#Html.ValidationMessageFor(model => model.ArticleViewModel.Article.ArticleTitle)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.ArticleViewModel.Article.ArticleDate)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.ArticleViewModel.Article.ArticleDate)
#Html.ValidationMessageFor(model => model.ArticleViewModel.Article.ArticleDate)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.ArticleViewModel.Article.ArticleText)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.ArticleViewModel.Article.ArticleText)
#Html.ValidationMessageFor(model => model.ArticleViewModel.Article.ArticleText)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.ArticleViewModel.Article.ArticleSource)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.ArticleViewModel.Article.ArticleSource)
#Html.ValidationMessageFor(model => model.ArticleViewModel.Article.ArticleSource)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.ArticleViewModel.Article.CategoryID, "Category")
</div>
<div class="editor-field">
#Html.DropDownList("CategoryID", String.Empty)
#Html.ValidationMessageFor(model => model.ArticleViewModel.Article.CategoryID)
</div>
<p>
<input type="submit" value="Create" />
</p>
</fieldset>
}
<div>
#Html.ActionLink("Back to List", "Index")
</div>
and then I am getting the viewModel inside the Create Action as follows :-
[HttpPost]
public ActionResult Create(CompositeViewModel viewModel)
{
if (ModelState.IsValid)
{
unitOfWork.ArticleRepository.Insert(viewModel.ArticleViewModel.Article);
unitOfWork.Save();
return RedirectToAction("Index");
}
PopulateDropDownList(viewModel.ArticleViewModel.Article.CategoryID);
return View(viewModel);
}
The PopulateDropDownList code is as follows :-
private void PopulateDropDownList(object selectedCategory = null)
{
var categoryQuery = unitOfWork.CategoryRepository.Get(
orderBy: q => q.OrderBy(d => d.CategoryTitle));
ViewBag.CategoryID = new SelectList(unitOfWork.CategoryRepository.Get(), "CategoryID", "CategoryTitle", selectedCategory);
}
My problem is that the CategoryID inside the CompositeViewModel viewModel is always 0 no matter what values I choose in the dropdown list! The other data entered in the Create cshtml is filled correctly inside the viewModel.
I cannot spot what I am doing wrong.
Thanks for your help and time
Shouldn't you be using DropDownListFor:
#Html.DropDownListFor(model => model.ArticleViewModel.Article.CategoryID, (SelectList)ViewBag.CategoryID)
You should write
#Html.DropDownList("ArticleViewModel.Article.CategoryID", ViewBag.CategoryID, null)
so ModelBinding works correctly or even use DropDownListFor<>().
Here is my table schema:
Here is my controller:
public ActionResult Register()
{
return View();
}
[HttpPost]
public ActionResult Register(FormCollection formValues)
{
return View();
}
And here is my Register view:
#model LocalizationWebsite.Models.SiteUser
#{
ViewBag.Title = "Localization | Create Account";
}
<h2>Create Your Account</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)
<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.EditorFor(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.Email)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.Email)
#Html.ValidationMessageFor(model => model.Email)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.AvatarPath)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.AvatarPath)
#Html.ValidationMessageFor(model => model.AvatarPath)
</div>
<p>
<input type="submit" value="Create" />
</p>
}
<div>
#Html.ActionLink("Back to List", "Index")
</div>
How do you suggest I check if the same password was written in both fields? If possible, I'd like to do this automatically as the user is typing in.
Thank you for the help.
You could decorate your view model properties with the [Compare] validation attribute to ensure that two propery values are matching.
If you want to do it from scratch, I would suggest using a little JQuery or javascript. This will give you control over how to do it "automatically."
But, if you can use the [Compare] attribute on the ViewModel, then this post from Scott Gu will allow you to use client-side validation via the DataAnnotations.
Use the CompareAttribute. Good article: http://davidhayden.com/blog/dave/archive/2011/01/01/CompareAttributeASPNETMVC3.aspx