I have a following code in View.
I suppose the button should come at the end of field set, but it is coming at the top as shown in the figure.
<fieldset>
<legend>tblCategory</legend>
#Html.HiddenFor(model => model.Id)
<div class="editor-label">
#Html.LabelFor(model => model.CategoryName)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.CategoryName)
#Html.ValidationMessageFor(model => model.CategoryName)
</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>
<input type="submit" value="Save" />
</fieldset>
put it in a <p>:
<p>
<input type="submit" value="Save" />
</p>
Related
Its shows some unwanted autocomplete suggestions.
I think those suggestions coming from UserName text field.
But I do not find any reason for those suggestions.
Model Code:
[DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)]
[Required(ErrorMessage = "Birth Date is Reqired")]
[DataType(DataType.DateTime)]
[Display(Name = "Birth Date")]
public DateTime BirthDate { get; set; }
Razor View:
<div class="container jumbotron" style="background-color:whitesmoke">
<div class="row">
<div class="col-md-4" style="margin-left: 400px; margin-top:30px">
<section id="loginForm">
#Html.ValidationSummary(true)
#using (Html.BeginForm("Registration", "SignUp", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
<div class="form-group">
#Html.LabelFor(m => m.FirstName)
#Html.TextBoxFor(m => m.FirstName, new {#class = "form-control"})
#Html.ValidationMessageFor(m => m.FirstName)
</div>
<div class="form-group">
#Html.LabelFor(m => m.LastName)
#Html.TextBoxFor(m => m.LastName, new {#class = "form-control"})
#Html.ValidationMessageFor(m => m.LastName)
</div>
<div class="form-group">
#Html.LabelFor(m => m.UserName)
#Html.TextBoxFor(m => m.UserName, new {#class = "form-control"})
#Html.ValidationMessageFor(m => m.UserName)
</div>
<div class="form-group">
#Html.LabelFor(m => m.EmailAddress)
#Html.TextBoxFor(m => m.EmailAddress, new {#class = "form-control"})
#Html.ValidationMessageFor(m => m.EmailAddress)
</div>
<div class="form-group">
#Html.LabelFor(m => m.BirthDate)
<input class="form-control" value="yyyy-MM-dd" name="BirthDate" type="text" id="BirthDate" autocomplete="off">
#Html.ValidationMessageFor(m => m.BirthDate)
</div>
<div class="form-group">
#Html.LabelFor(m => m.PassWord)
#Html.PasswordFor(m => m.PassWord, new {#class = "form-control"})
#Html.ValidationMessageFor(m => m.PassWord)
</div>
<div class="form-group">
#Html.LabelFor(m => m.VerifyPassWord)
#Html.PasswordFor(m => m.VerifyPassWord, new {#class = "form-control"})
#Html.ValidationMessageFor(m => m.VerifyPassWord)
</div>
<div class="form-group">
#Html.LabelFor(m => m.VersityId)
#Html.TextBoxFor(m => m.VersityId, new {#class = "form-control"})
#Html.ValidationMessageFor(m => m.VersityId)
</div>
<div class="form-group">
#Html.LabelFor(m => m.PhoneNumber)
#Html.TextBoxFor(m => m.PhoneNumber, new {#class = "form-control"})
#Html.ValidationMessageFor(m => m.PhoneNumber)
</div>
<div class="form-group">
#Html.LabelFor(m => m.Address)
#Html.TextAreaFor(m => m.Address, new {#class = "form-control"})
#Html.ValidationMessageFor(m => m.Address)
</div>
<div class="form-group">
<input id="ImageUpload" type="file" name="ImageUpload" />
</div>
<button type="submit" class="btn btn-primary">Save</button>
}
<p>
#Html.ActionLink("Already Have an Account", "LogIn")
</p>
</section>
</div>
</div>
Problem view (Image) :
Problem indicate by red circle
I don't want this kinds of suggestions.
Please help me for get ride of this problem.
Thanks a lot advance
From this site, maybe this is your issue, the autocomplete should do the trick, but if your whole page is rendering over XHTML, then you will need something like this.
https://css-tricks.com/snippets/html/autocomplete-off/
.autocomplete=”off” is not valid markup with XHTML Transitional, which is a common DOCTYPE. Use this to keep a vaild markup
if (document.getElementsByTagName) {
var inputElements = document.getElementsByTagName(“input”);
for (i=0; inputElements[i]; i++) {
if (inputElements[i].className && (inputElements[i].className.indexOf(“disableAutoComplete”) != -1)) {
inputElements[i].setAttribute(“autocomplete”,”off”);
}
}
}
i try to use Asp.net mvc4 Ajax helper and when i submit form it makes full post back.
Notice that i include all important scripts like Jquery and jquery.unobtrusive-ajax inside head element.
<script src="#Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-1.9.1.min.js")" type="text/javascript"> </script>
Students Controller
[HttpPost]
public string Create(Students students)
{
if (Request.IsAjaxRequest())
{
if (ModelState.IsValid)
{
db.Students.Add(students);
db.SaveChanges();
// return RedirectToAction("Index");
}
}
return "<h2>Customer updated successfully!</h2>";
}
Create View
#using (Ajax.BeginForm("Create","Students", new AjaxOptions() { HttpMethod= "POST", UpdateTargetId = "fs1" }))
{
<fieldset id="fs1">
<legend>Students</legend>
<div class="editor-label">
#Html.LabelFor(model => model.ST_NAME)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.ST_NAME)
#Html.ValidationMessageFor(model => model.ST_NAME)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.ST_BIRTH_DATE)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.ST_BIRTH_DATE)
#Html.ValidationMessageFor(model => model.ST_BIRTH_DATE)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.ST_PHONE)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.ST_PHONE)
#Html.ValidationMessageFor(model => model.ST_PHONE)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.ST_ADDR)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.ST_ADDR)
#Html.ValidationMessageFor(model => model.ST_ADDR)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.ST_CLASS)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.ST_CLASS)
#Html.ValidationMessageFor(model => model.ST_CLASS)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.ST_STAT)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.ST_STAT)
#Html.ValidationMessageFor(model => model.ST_STAT)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.LAST_UPDATE_DATE)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.LAST_UPDATE_DATE)
#Html.ValidationMessageFor(model => model.LAST_UPDATE_DATE)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.CURRENT_CLASS_GRADE)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.CURRENT_CLASS_GRADE)
#Html.ValidationMessageFor(model => model.CURRENT_CLASS_GRADE)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.CURRENT_CLASS)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.CURRENT_CLASS)
#Html.ValidationMessageFor(model => model.CURRENT_CLASS)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.ST_CODE)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.ST_CODE)
#Html.ValidationMessageFor(model => model.ST_CODE)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.REG_CLASS)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.REG_CLASS)
#Html.ValidationMessageFor(model => model.REG_CLASS)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.IDNO)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.IDNO)
#Html.ValidationMessageFor(model => model.IDNO)
</div>
<p>
<input type="submit" value="Create" />
</p>
</fieldset>
}
Notice that when i check if the request is ajax it gave me false.
In my Asp mvc project I want to add company to database without refreshing the page.
How can I do it with ajax. I want to submit data and return to the same page without refresh.
this is a part of my code
#using (Html.BeginForm("Create", "Company", FormMethod.Post, new { enctype =
"multipart/form-data" }))
{
#Html.ValidationSummary(true)
<fieldset>
<div class="editor-label">
#Html.LabelFor(model => model.nom_company)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.nom_company)
#Html.ValidationMessageFor(model => model.nom_company)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.desc_company)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.desc_company)
#Html.ValidationMessageFor(model => model.desc_company)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.datedebut_company)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.datedebut_company)
#Html.ValidationMessageFor(model => model.datedebut_company)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.datefin_company)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.datefin_company)
#Html.ValidationMessageFor(model => model.datefin_company)
</div>
<p>
<input type="file" name="file" />
<input type="submit" value="Create" />
</p>
</fieldset>
}
Any help please
I have class in a model Customer
When I am clicking a submit button on Cshtml page,
#using (Html.BeginForm())
{
#Html.ValidationSummary(true)
<fieldset>
<legend>Registration</legend>
<div class="editor-label">
#Html.LabelFor(model => model.Fname)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.Fname)
#Html.ValidationMessageFor(model => model.Fname)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.Lname)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.Lname)
#Html.ValidationMessageFor(model => model.Lname)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.Address)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.Address)
#Html.ValidationMessageFor(model => model.Address)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.phoneNo)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.phoneNo)
#Html.ValidationMessageFor(model => model.phoneNo)
</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.ConfirmPassword)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.ConfirmPassword)
#Html.ValidationMessageFor(model => model.ConfirmPassword)
</div>
<p>
<input type="submit" value="Create" />
</p>
</fieldset>
The page doesn't post to the controller
[HttpPost]
public ViewResult DisplayCustomer(FormCollection Collection)
{
objinfo.Fname = Request.Form["Fname"].ToString();
objinfo.Lname = Request.Form["Lname"].ToString();
objinfo.Address = Request.Form["Address"].ToString();
objinfo.phoneNo = Request.Form["PhoneNo"].ToString();
objinfo.Username = Request.Form["UserName"].ToString();
objinfo.Password = Request.Form["Password"].ToString();
objutility.InsertEmployee(objinfo);
return View("DisplayCustomer");
}
I am not able to get Values into request.form. What particular code I am missing?
1 - you don't need to use Request.Form, or FormCollection .
Your controller(s) should look like this:
// this method should just display the page, not handle the post back
public ViewResult DisplayCustomer(){
return View();
}
// this method will handle the post back
[HttpPost]
public ViewResult DisplayCustomer(Customer model){
// Handle the post back.
if(ModelState.IsValid){
/* Hanlde the submission, at this point "model" should have all the properties, such as model.Fname, model.Lname, etc...
DB.InserOnSubmit(model);
DB.Customers.AddObject(model);
DB.Customers.Add(model);
you get the point
*/
}
}
Learning mvc and I am trying to implement a page with 3 fields Name-Surname-Description
So in my learning example I am loading employees and I should be able to create and edit them.
The description should use CKEditor .
I can load employees
I can save them
However I cannot seem to be able to save the description,such as whatever the user types in the description field. I have seen few examples on the net but none with a solution to download,as I cannot seem to put together. I have found this guy with a cool html helper but cannot seem to be able to put an example together
http://www.andrewbarber.com/post/CKEditor-Html-Helpers-ASPNET-MVC-Razor-Views.aspx
The problems are :
How do you get the value that is typed inside the ckEditor.
In my viewModel the description is null all the time
the ckEditor slow down the creation of the page quite a lot.How can I make it faster? I dont need all the options.
Is there an example using mvc3 out there that I can use as a template.
I have done all the plumbing as follows:
Create.chtml
#model MvcApplicationCKEditorIntegration.Models.EmployeeViewModel
#{
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>EmployeeViewModel</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.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.PhotoPath)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.PhotoPath)
#Html.ValidationMessageFor(model => model.PhotoPath)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.Description)
</div>
<div class="editor-field">
<textarea class="ckeditor" id="ckeditor" rows="10"></textarea>
</div>
<p>
<input type="submit" value="Create" />
</p>
</fieldset>
}
<div>
#Html.ActionLink("Back to List", "Index")
</div>
<script type="text/javascript" src="../../ckeditor/ckeditor.js"></script>
EmployeeController
public class EmployeeController : Controller
{
public ActionResult Index()
{
var employeeRepository=new EmployeeRepository();
var employees = employeeRepository.GetAll();
var employeeList = employees.Select(employee => new EmployeeViewModel
{
EmployeeId = employee.EmployeeId,
FirstName = employee.FirstName,
LastName = employee.LastName,
PhotoPath = employee.PhotoPath,
Email = employee.Email,
Description = employee.Description
}).ToList();
return View(employeeList);
}
public ActionResult Create()
{
return View(new EmployeeViewModel());
}
[HttpPost]
public ActionResult Create(EmployeeViewModel vm)
{
if(ModelState.IsValid)
{
var employeeRepository=new EmployeeRepository();
var emp=new Employee
{
FirstName = vm.FirstName,
LastName = vm.LastName,
Description = vm.Description,
Email = vm.Email,
PhotoPath = vm.PhotoPath
};
employeeRepository.Insert(emp);
return RedirectToAction("Index");
}
return View(vm);
}
}
}
Thanks for any suggestions!!!
EDITED EXAMPLE USING CKEditor helper
#using MvcApplicationCKEditorIntegration.Helpers
#model MvcApplicationCKEditorIntegration.Models.EmployeeViewModel
#{
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>
#Html.CKEditorHeaderScripts()
#using (Html.BeginForm())
{
#Html.ValidationSummary(true)
<fieldset>
<legend>EmployeeViewModel</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.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.PhotoPath)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.PhotoPath)
#Html.ValidationMessageFor(model => model.PhotoPath)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.Description)
</div>
#Html.CKEditorFor(model=>model.Description)
<p>
<input type="submit" value="Create" onclick="#Html.CKEditorSubmitButtonUpdateFunction()" />
</p>
</fieldset>
}
<div>
#Html.ActionLink("Back to List", "Index")
</div>
<script type="text/javascript" src="../../ckeditor/ckeditor.js"></script>
You aren't actually using the CKEditor helper at all like is described on that blog page (which is my own blog)
The purpose of that helper is that once you have included the code correctly into your project, you can simply do this:
#Html.CKEditorFor(model=>model.Description)
However, you seem to simply be creating a plain-old text area and working with it 'manually' after that. There isn't anything to bind it to your property, as would exist if you had used the helper described in that post.
Also note that you aren't using the code that Updates the text area behind the scenes; so if your model has Required set on the Description field, you will get a client-side validation error the first time you submit an otherwise properly-configured CKEditorFor() This isn't unique to my helper; any bound property that is 'required' needs the bit of Javascript that is mentioned in that blog post, too. I do it as an onclick off the submit button, but you can run that same code anywhere. You just need to include it in the page, which you haven't done.
You might want to try setting the name attribute of the textarea to "Description"
so:
<div class="editor-field">
<textarea class="ckeditor" id="ckeditor" rows="10" name="Description"></textarea>
</div>
if that doesn't work then you might have to use javascript to get the value of what's in the editor and set it in a hidden field before the post.