First of all, i'm new on MVC.
In my form, i'm using two datepickers as start and end time to display a report.
<div class="form-group">
<div class="controls">
#(Html.Kendo().DatePickerFor(m => m))
</div>
</div>
I'm taking date format with "tr-TR" culture like "dd/MM/yyyy". It supposed to be like this.
<script src="~/Scripts/kendo/2013.3.1119/cultures/kendo.culture.tr-TR.min.js"></script>
<script>
$(document).ready(function () {
kendo.culture('tr-TR');
});
</script>
But i need to send date to controller in universal format like "yyyy/MM/dd". How can i change date format on submit event, before sending to server?
My submit event below:
<div>
#using (Html.BeginForm())
{
#Html.EditorFor(m => m.Criteria)
<button class="btn-default" id="btnSearch" type="submit">Ara</button>
}
</div>
The best possible approach would be to have both the client and the server side use the same culture all the times. More information on the matter can be found in the following help article:
Use the same culture on the server and client-side
Another option is to manually convert the value on form "submit" event or have custom model binder.
Related
I have a radio button group and a validation to ensure atleast one of the options are selected. But my validation does not work on the view but they are caught in Model.Valid in the controller. How do I get it to show on the view like other validation errors without having to add a message in the controller on Model.IsValid fail?
View:
<div class="form-group">
<label for="" class="control-label">Role</label>
<div>
#foreach (var availableGroup in availableGroups)
{
<div class="radio">
<label>
<input type="radio" name="Group" value="#availableGroup" #defaulted/>
#availableGroup
</label>
</div>
}
#Html.ValidationMessageFor(m => m.Group)
</div>
</div>
Model :
[Required(ErrorMessage = "Group must be selected")]
[Display(Name = "Group")]
public string Group { get; set; }
Do I have to use Jquery on button click and then verify manually? I have seen ModelState.AddModelError() which will still require me to submit the action method. Is there something I can change in the way I am binding the radio buttons?
EDIT 1 : The Html equivalent for one of the options as seen in developer tool is
<label>
<input type="radio" name="Group" value="Group 1">
Group 1
</label>
EDIT 2: I already have data annotations working and it works fine with the other required textboxes. It is only in the radio button list that I have the issue.
So this is how I solved the issue. I checked how the HTML code will be for a Html.CheckboxFor and tried to mimic it to obtain the result.
<div class="radio">
<label>
<input type="radio" name="Group" data-val="true" data-val-required="Group must be selected" value="#availableGroup" #defaulted/>
#availableGroup
</label>
</div>
I had to add the data-val and data-val-required Attribute to get it to work.
I Hope i got the solution to your problem,
Solution:
Add the following validation related jquery files to the view
<script type="text/javascript" src="#Url.Content("~/scripts/anyversion")"></script>
<script type="text/javascript" src="#Url.Content("~/scripts/jquery.validate.js")"></script>
<script type="text/javascript" src="#Url.Content("~/scripts/jquery.validate.unobtrusive.js")"></script>
or add like below , if you are using bundles
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/jqueryval")
Answer to question:
Do I have to use Jquery on button click and then verify manually?
No , By default Data annotation handles both the client and server validations.
Hope it will be helpful for you,kindly let me know your thoughts
Thanks
Karthik
how are you guys?
i have asp.net webform its for adding news in the news content i would like to use summernote http://summernote.org/ Super Simple WYSIWYG editor. as a WYSIWYG editor so could some one please help me to save the data from this editor
this is my code
<div class="form-body">
<div class="form-group last">
<label class="control-label col-md-2">News Content</label>
<div class="col-md-10">
<div name="summernote" id="summernote_1"> </div>
<asp:label runat="server" text="Label" ID="news_con" ></asp:label>
</div>
</div>
</div>
i can't get the text value from the summernote
by this code
news_con.Text = Request.Form["summernote_1"];
Have you considered using a <textarea> to handle this as opposed to a <div>? Usually they are a bit easier to use with respect to storing values (as they are designed to do so) :
<textarea id="txtTest" runat="server"></textarea>
One of the ways that you might handle this would be to register an event using Summernote's available API to set the HTML content for your <textarea> element whenever focus was lost (e.g. the onblur) :
<script>
$(function () {
// Set up your summernote instance
$("#txtTest").summernote();
// When the summernote instance loses focus, update the content of your <textarea>
$("#txtTest").on('summernote.blur', function () {
$('#txtTest').html($('#txtTest').summernote('code'));
});
});
</script>
Since you are likely going to be storing HTML content within the element, you'll likely want to ensure that .NET doesn't think you are trying to exploit it. You can do this by either explicitly setting this page to ignore that process by updating the ValidateRequest property of your page :
<%# Page ... ValidateRequest = "false" %>
Or you could try simply escaping the content that is being set :
$('#txtTest').html(escape($('#txtTest').summernote('code')));
I am trying to integrate a date picker into my form over the existing code.
What I have at the moment is:
#Html.EditorFor(model => model.dateOfBirth)
and I would like the existing date picker to be replaced with the Bootstrap one.
I have already installed the files via the NuGet Package console. In the < head> section I have pasted:
<script type="text/javascript">
$(document).ready(function () {
$('.datepicker').datepicker()
$('#sandbox-container .input-append.date').datepicker({
format: "dd/mm/yyyy"
});
});
</script>
and in the < body> I have:
<div class="input-append date">
<input type="text" class="span2"><span class="add-on"><i class="icon-th"></i></span>
</div>
This is pretty much what the documentation specified but obviously I am going wrong somewhere. Could somebody please assist me with this issue.
How do you pass a parameter from C# into the value part of instead of hard coding it with different values.
<div class="property-container">
<input class="progress-value" type="hidden" value="17" />
<div class="property-title">Test</div>
<div class="property-progress"></div>
</div>
<div class="property-container">
<input class="progress-value" type="hidden" value="32" />
<div class="property-title">Test 2</div>
<div class="property-progress"></div>
</div>
<div class="property-container">
<input class="progress-value" type="hidden" value="24" />
<div class="property-title">Test 3</div>
<div class="property-progress"></div>
</div>
<script type="text/javascript" >/
$(function () {
// loop through each 'container'
$(".property-container").each(function () {
// get the value that was rendered from the model
var progress = parseInt($(this).children(".progress-value").val());
// create the progress bar with the value
$(this).children(".property-progress").progressbar({ value: progress });
});
});
</script>
From your comments
<input class="progress-value" type="hidden" value="17" id="Test" />
In c# I tried, Test.Value = "20";
You should have a runat="server" if you want to access the hidden field in your codebehind.
<input class="progress-value" runat="server" type="hidden" value="17" id="Test" />
//& then in C# set it like this..
Test.Value = "20";
In jQuery, get the value of the hidden field
$('.progress-value').val()
You can use this :
$(this).children(".property-progress").progressbar({ value: '<%= MyValue() %>'});
And in the c# create a property:
Public string MyValue
{
get;set;
}
Nb
If you intend to update the progressbar according to server activity - i'd suggest you to google signalR.
You just have to remember where the variables are set, and where the code is run. C# runs on the server, so you can't set javascript properties directly, rather, you need to set up your HTML template so that when it is interpolated by the server the correct values are sent to the client.
In other words, you won't be able to set the progress bar width on the server, b/c the server will only be able to set the initial value of the progress bar. It will be up to the client to increment the value. Otherwise, you'd need to constantly be posting the page back to the server, which isn't what you want at all.
The easiest way to get the progress data from the server to the client is by setting up a web service that returns JSON, and calling it using jquery.
Here are some resources on how to do that:
Create and Call a Simple Web Service in ASP.NET
Understanding ASP.NET AJAX Web Services
ASP.net progress bar updated via jQuery ajax during async operation
You should be able to decorate a method on your asp.net class with [WebMethod] to make it callable via jQuery.
It really depends on what technology you're using to output code. If you're using Razor, it would be:
<input value="#ObjectName.Value">
I need to create a datepicker in asp.net.
Got a few in the web but lokking for some thing different.
Thanks
I suggest you use the jQueryUI datepicker plugin:
http://jqueryui.com/demos/datepicker/
Here is an example from jQuery UI website:
<script type="text/javascript">
$(function() {
$("#datepicker").datepicker();
});
</script>
<div class="demo">
<p>Date: <input id="datepicker" type="text"></p>
</div><!-- End demo -->
<div style="display: none;" class="demo-description">
<p>The datepicker is tied to a standard form input field. Focus on the input (click, or use the tab key) to open an interactive calendar in a small overlay. Choose a date, click elsewhere on the page (blur the input), or hit the Esc key to close. If a date is chosen, feedback is shown as the input's value.</p>
</div><!-- End demo-description -->
I agree Jquery is nice
http://www.ajaxline.com/10-best-jquery-datepickers-plugins
This is also nice, I have used this many time, very simple:
http://www.graymattersoft.com/NETProducts/GMDatePicker/tabid/68/Default.aspx
Have you tried the ASP.NET Ajax Calendar control? http://www.asp.net/AJAX/AjaxControlToolkit/Samples/Calendar/Calendar.aspx