I want my EditorFor fields for DateFrom and DateTo to become a datetime picker (not datepicker). I successfully created it once but I lost my file. I couldn't remember if I used EditorFor or TextBoxFor for that.
Also, how can I make the full name editorfor to be read only? I tried a link from stackoverflow but the field was still editable.
#using (Html.BeginForm()) {
#Html.ValidationSummary(true)
<fieldset>
<legend>Approval</legend>
<div class="editor-label">
#Html.LabelFor(model => model.FullName)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.FullName)
#Html.ValidationMessageFor(model => model.FullName)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.DateFrom)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.DateFrom, new { #class="date", type = "datetime-local"})
#Html.ValidationMessageFor(model => model.DateFrom)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.DateTo)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.DateTo, new { #class="datepicker", type = "datetime-local"})
#Html.ValidationMessageFor(model => model.DateTo)
</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>
<p>
<input type="submit" value="Create" />
</p>
</fieldset>
}
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
}
EditorFor Or TextboxFor any will work you just need to add correct js file and initializer for datetimepicker.
You can use as
#Html.TextBoxFor(m => m.FullName, new { #readonly = "readonly" ,#id="datepicker" })
OR
#Html.EditorFor(m => m.FullName, new { #readonly = "readonly" ,#id="datepicker" })
You Need three js files
jquery
jquery-ui and
Jquery datetimepicker addon
Also You Need 2 css file
jquery ui
Jquery datetimepicker addon
To be clear have a look on following snippet.
$(function() {
$("#datepicker").datetimepicker({
changeMonth: true,
changeYear: true,
yearRange: "-100:+0",
dateFormat: 'mm/dd/yy',
controlType: 'select',
timeFormat: 'hh:mm TT',
});
});
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.9.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://cdn.jsdelivr.net/npm/jquery-ui-timepicker-addon#1.6.3/dist/jquery-ui-timepicker-addon.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/jquery-ui-timepicker-addon#1.6.3/dist/jquery-ui-timepicker-addon.min.css" rel="stylesheet"/>
<p>Date and Time:
<input type="text" readonly=true id="datepicker">
</p>
Related
I have this action method
[HttpPost]
public ActionResult CreateEsf(EsfLotDetailsModel model)
{
...
}
I have two properties in this model. One is a database POCO object and the other is a list. In the GET equivalent of this method, these values were all populated correctly, but on post these get set to null (the POCO) and empty (the list).
Why might this be?
My view is here
#using UI.Helpers
#model UI.Areas.Admin.Models.EsfLotDetailsModel
#{
ViewBag.Title = "Create Forward Lot";
}
<script src="#Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Content/AdminDesignTheme/js/wl_Date.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Content/AdminDesignTheme/js/wl_Time.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.mousewheel.min.js")" type="text/javascript"></script>
#{
<script type="text/javascript">
$(document).ready(function () {
var options = {
dateFormat: "dd/mm/yy"
};
$('#Starts').wl_Date(options);
$('#Ends').wl_Date(options);
$('#startTime').wl_Time();
$('#endTime').wl_Time();
});
</script>
}
<p>#Html.ActionLink("Back to Item List", "Index","Inventory")</p>
#Html.ValidationSummary(true, "Please correct the errors and try again.")
#using (Html.BeginForm(new {model = #Model})) {
#Html.HiddenFor(model => model.Auction.InventoryReference)
#Html.HiddenFor(model => model.Auction.Title)
#Html.HiddenFor(model => model.Auction.Description)
<fieldset>
<legend></legend>
<label>ESF Lot Information</label>
<section>
#Html.LabelFor(model => model.Auction.Title)
<div> #Html.DisplayFor(model => model.Auction.Title)
#Html.ValidationMessageFor(model => model.Auction.Title) </div>
</section>
<section>
#Html.LabelFor(model => model.Auction.Description)
<div> #Html.DisplayFor(model => model.Auction.Description)
#Html.ValidationMessageFor(model => model.Auction.Description) </div>
</section>
#if (HttpContextHelper.IsUserAdmin())
{<section>
<label for="IsFeatured">Is Featured <i>(displayed in homepage)</i></label>
<div> #Html.CheckBoxFor(model => model.Auction.IsFeatured)
#Html.ValidationMessageFor(model => model.Auction.IsFeatured) </div>
</section>
}
else
{
<section>
<label for="IsFeatured">Is Featured <i>(displayed in homepage)</i></label>
<div> #Html.CheckBoxFor(model => model.Auction.IsFeatured, new { disabled = "disabled" }) (Contact Admin to make this a featured lot)
#Html.ValidationMessageFor(model => model.Auction.IsFeatured) </div>
</section>
}
#if (HttpContextHelper.IsUserAdmin())
{<section>
#Html.Label("VAT Applicable")
<div> #Html.CheckBoxFor(model => model.Auction.VatApplicable)
#Html.ValidationMessageFor(model => model.Auction.VatApplicable) </div>
</section>
}
else
{
<section>
#Html.Label("VAT Applicable")
<div> #Html.CheckBoxFor(model => model.Auction.VatApplicable, new { disabled = "disabled" }) (Contact Admin if it is not VATable)
#Html.ValidationMessageFor(model => model.Auction.VatApplicable) </div>
</section>
}
</fieldset>
<fieldset>
<legend></legend>
<label>Date and Time</label>
<section>
<label>Starts <em>(dd/mm/yy hh:mm)</em></label>
<div> <input type="text" class="date" id="Starts" />
<input type="text" class="time" data-connect="Starts" id="startTime" />
#Html.ValidationMessageFor(model => model.Auction.Starts) </div>
</section>
<section>
<label>Ends <em>(dd/mm/yy hh:mm)</em></label>
<div> <input type="text" class="date" id="Ends" />
<input type="text" class="time" data-connect="Ends" id="endTime" />
#Html.ValidationMessageFor(model => model.Auction.Ends) </div>
</section>
<section>
#Html.LabelFor(model => model.Auction.IsExtensible)
<div> #Html.CheckBoxFor(model => model.Auction.IsExtensible)
#Html.ValidationMessageFor(model => model.Auction.IsExtensible) </div>
</section>
</fieldset>
<fieldset>
<legend></legend>
<label>Bid Options</label>
<section>
#Html.LabelFor(model => model.Auction.StartingBid)
<div> #Html.TextBoxFor(model => model.Auction.StartingBid)
#Html.ValidationMessageFor(model => model.Auction.StartingBid) </div>
</section>
<section>
#Html.LabelFor(model => model.Auction.Reserve)
<div> #Html.TextBoxFor(model => model.Auction.Reserve)
#Html.ValidationMessageFor(model => model.Auction.Reserve) </div>
</section>
<section>
<label>Reserve Visible <em>(Displays as Reserve met or not met)</em></label>
<div> #Html.CheckBoxFor(model => model.Auction.ReserveVisible)
#Html.ValidationMessageFor(model => model.Auction.ReserveVisible) </div>
</section>
<section>
#Html.LabelFor(model => model.Auction.IsBidIncrementPercentual)
<div> #Html.CheckBoxFor(model => model.Auction.IsBidIncrementPercentual)
#Html.ValidationMessageFor(model => model.Auction.IsBidIncrementPercentual) </div>
</section>
<section>
#Html.LabelFor(model => model.Auction.BidIncrement)
<div> #Html.TextBoxFor(model => model.Auction.BidIncrement, new { #Value = 1m })
#Html.ValidationMessageFor(model => model.Auction.BidIncrement) </div>
</section>
<section>
#Html.LabelFor(model => model.AuctionEvents)
<div> #Html.DropDownList("Auction", Model.AuctionEvents, "Select auction", new { required = "required" })
#Html.ValidationMessageFor(model => model.AuctionEvents) </div>
</section>
<section>
<div><button>Create</button></div>
</section>
</fieldset>
}
<div>
#Html.ActionLink("Back to Item List", "Index","Inventory")
</div>
Add FormMethod = FormMethod.Post to your Html.BeginForm()
#using (Html.BeginForm("Action", "Controller",FormMethod.Post))
{
}
where is your submit button?
#using (Html.BeginForm("Action", "Controller",FormMethod.Post))
{
...
<input type="submit" value="submit" />
}
when you fill in the form, press the submit button, then enter in the [HttpPost] Method and value of Model will be filled.
None of these options worked. I put all the values in the POCO object separately in the model instead and removed the POCO object. No idea why it doesn't work.
I have created one View. In that i have put 2 Multisubmit buttons for "create" and "cancel".
Now, on cancel click, clientside validation is going to call. but I don't want to call clientside validations.
I have written code as below, please check it. I don't want validations to be executed on cancel button click.
#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())
{
#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")
</p>
</fieldset>
}
<div>
#Html.ActionLink("Click here to go Login Page", "Index")
</div>
If you assign class="cancel" to your cancel submit button, clientside validation won't run. The way you assign this class is not something that I can tell as you seem to be using some custom helper Html.MultiSubmitButton which is not part of ASP.NET MVC. So you will have to check its documentation.
I use 'Ajax.BeginForm' in my application,but for some reason my form is redirecting to {controller}/{action} with right json data instead of start {OnComplete = "Add_OnComplete"}:
View:
<script src="#Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script>
#using (Ajax.BeginForm("Create", new AjaxOptions { OnComplete = "Add_OnComplete"}))
{
<fieldset>
<legend>Add</legend>
<div class="editor-label">
#Html.LabelFor(model => model.FullName)
</div>
<div class="editor-field">
#Html.TextBoxFor(model => model.FullName)
#Html.ValidationMessageFor(model => model.FullName)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.Email)
</div>
<div class="editor-field">
#Html.TextBoxFor(model => model.Email)
#Html.ValidationMessageFor(model => model.Email)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.PhoneNumber)
</div>
<div class="editor-field">
#Html.TextBoxFor(model => model.PhoneNumber)
#Html.ValidationMessageFor(model => model.PhoneNumber)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.Status)
</div>
<div class="editor-field">
#Html.TextBoxFor(model => model.Status)
#Html.ValidationMessageFor(model => model.Status)
</div>
<p>
<input type="submit" value="Create" />
</p>
</fieldset>
}
<script type="text/javascript">
function Add_OnComplete(context) {
var JsonAdd = context.get_response().get_object();
if (JsonAdd.Success) {
//TODO
}
}
</script>
Controller:
public PartialViewResult Create()
{
return PartialView();
}
[HttpPost]
public JsonResult Create(Subscribe model)
{
if (ModelState.IsValid)
{
_entity.CreateSubscribe(model, SubscribeStatus.Customer.GetHashCode());
var message = new Message(MailSubject, MailBody, model.Email);
message.Send();
}
return Json(new
{
Success = true,
Message = "The person has been added!"
});
}
What I do wrong ? And what am I missing?
Thanks.
Remove that get_response().get_object() stuff.
Use just context.Success
I am working on asp.net mvc3. I have designed database in SQL Server. And I access database using ado.net, I am designing a "CREATE" page.
This is my view.cshtml
#model CalcoWOMS.Models.ProductFormulation
#{
ViewBag.Title = "doProductFormulation";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<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>ProductFormulation</legend>
<div>
#Html.EditorFor(model => model.ProductID) <!-- i want to insert fix value (100) in this ProductID field in ProductFormulation Table -->
#Html.ValidationMessageFor(model => model.ProductID)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.RawMaterialID)
</div>
<div class="editor-field">
#Html.DropDownList("RawMaterialID","SELECT")
#Html.ValidationMessageFor(model => model.RawMaterialID)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.Code)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.Code)
#Html.ValidationMessageFor(model => model.Code)
</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>
<div class="editor-label">
#Html.LabelFor(model => model.MinimumBatchSize)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.MinimumBatchSize)
#Html.ValidationMessageFor(model => model.MinimumBatchSize)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.Quantity)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.Quantity)
#Html.ValidationMessageFor(model => model.Quantity)
</div>
<p>
<input type="submit" value="Create" />
</p>
</fieldset>
}
<div>
#Html.ActionLink("Back to List", "ProductFormulationIndex")
</div>
I want to insert fixed value (100) in this ProductID field in ProductFormulation table and don't want to create editable box. What should I
do for this ?
Perhaps I don't understand the question (I'm more of a backend developer), but it seems like the simple solution is remove these two lines:
<div>
#Html.EditorFor(model => model.ProductID)
#Html.ValidationMessageFor(model => model.ProductID)
</div>
Then update the Model in your controller's Create, [post] method to update the ProductID to 100, prior to writing it out to the repository. Of course, how you'd do that depends on your controller structure, which you haven't posted.
As I understand it, the alternative would be to have a hidden field on the page and create the Model with a ProductID of 100 in the initial Create call but if you're always going to hard code the product id (which to be honest seems questionable) to 100, then this seems pointless...
I am currently showing a treeview in a left column.
When a user selects a node, i am loading the right column #details with the response from an ajax call. This works nicely.
I now want to submit the right columns #details via ajax as well. I am able to capture the post back to the server however when i return a string back to the #details section it is loading the entire page with string 'saved successfully'
I really want the string 'saved successfully' to be placed in a div element in the right column.
This is an ajax response, again doing another ajax response (which i want to return to the first ajax response).
Is this possible?
My edit form looks like the following
#using (Ajax.BeginForm("Edit", new AjaxOptions { UpdateTargetId = "#results" })) {
#Html.ValidationSummary(true)
if (Model != null) {
<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-label">
#Html.LabelFor(model => model.Note)
</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.DropDownListFor(model => model.TopicID, (SelectList)ViewData["Topics"], "Select")
#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>
<div id="results">
Status
</div>
Make sure you have included the following script to your page if you want to use the Ajax.* helpers:
<script src="#Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
If you don't include it there is nothing out there to make sense of the HTML5 data-* attributes emitted by the Ajax.* helper and AJAXify this form => the form performs a normal submit and renders the results.