Copy a value to EditorFor ASP.Net MVC - asp.net-mvc

Using ASP.Net MVC. In Edit mode I have this :
<div class="editor-field">
<%: Html.EditorFor(model => model.Date) %>
<%: Html.ValidationMessageFor(model => model.Date) %>
</div>
and I have a DatePicker using Jquery.
<rhp:DatePicker ID="DatePicker1" runat="server"></rhp:DatePicker>
and I can get the Text of date picker : DatePicker1.Text
When the user pick the date I want picked date to be copied to model.Date and save to database.
How can I do this?

If you don't want to create a custom EditorTemplate, the easiest way would be to remove the Html.EditorFor(m => m.Date) and use your DatePicker as the editor:
<div class="editor-field">
<rhp:DatePicker ID="Date" runat="server"></rhp:DatePicker>
<%: Html.ValidationMessageFor(model => model.Date) %>
</div>
Notice that the ID for the DatePicker control isDate, which should allow the model binder to bind the value to the Date property of your model.

Related

How do you create a MVC view for navigation properties (one to many, many to many)

I have two ASP.NET MVC EF entities sharing an association:
When I am editing or creating the User, I'd like to be able to attach one or more UserRoles. So, my User Create view looks like this:
#model MyModels.UserViewModel
#{ ViewBag.Title = "Create"; }
#using (Html.BeginForm())
{
<fieldset>
<legend>User</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>
<!-- how to create an editor to add/remove roles -->
<div class="editor-label">
#Html.LabelFor(model => model.UserRoles)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.UserRoles)
#Html.ValidationMessageFor(model => model.UserRoles)
</div>
<p>
<input type="submit" value="Create" />
</p>
</fieldset>
}
Since Model.UserRoles is initially empty, I get nothing in this line #Html.EditorFor(model => model.UserRoles). I tried adding a drop-down where I can select existing roles using JavaScript (I guess retrieved as partial view?), but I don't know how to append a selected role to the fieldset so that it gets submitted.
How is this usually done in ASP.NET? I have been searching SO for a while but cannot find the appropriate solution.
To clarify, what I don't understand is how to add/append a new role to the client side, so that the submit button actually sends this inside the UserRoles list.
(edit) Ok, I've found this: How to add an item to a list in a ViewModel using Razor and .NET Core. It says that I should fetch a partial view which is written to look like the inputs which would be generated by #Html.EditorFor (with the next array index), and then append it using JavaScript.
That looks quite weird, is that really the correct approach?

How to iterate through all properties in a ViewModel

I have a lot of repeated code in my asp.net MVC views
<div class="editor-label">
#Html.LabelFor(model => model.MyProperty)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.MyProperty)
#Html.ValidationMessageFor(model => model.MyProperty)
</div>
I want to wrap this in something like:
foreach (System.Reflection.PropertyInfo item in Model.GetType().GetProperties())
and reuse the same partial view throughout. But I can't get the syntax quite right.
How can I make this more generic?
This is what Display and EditorTemplates are for.
You need only do #Html.EditorForModel() and then define a generic template for your model.

How to render an HTML attribute from a Razor view

I would like to use the same partial view for create, edit, and details views, to avoid duplicating the fieldset structure for an entity. Then, depending on which view renders the partial view, I would like to add a class of "read-only" to a div surrounding my fieldset and handle making the actual input fields read-only on the client, using css or jQuery, or whatever. How can I specify from my Razor view that I need this class added to the "item-details" div?
<div class="item-details">
<fieldset>
<legend>Product Details</legend>
#Html.HiddenFor(model => model.DetailItem.ProductId)
<div class="editor-label">
#Html.LabelFor(model => model.DetailItem.Name)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.DetailItem.Name)
#Html.ValidationMessageFor(model => model.DetailItem.Name)
</div>
<p>
<input type="submit" value="Save" />
</p>
</fieldset>
</div>
I would generally have a variable on the model that would indicate if your data is editable, and use it like:
<div class="item-details #(Model.IsReadOnly ? "read-only" : "")">
If you don't have it on the model however, you can use the ViewBag. In your parent view:
#{
ViewBag.IsModelReadOnly = true;
}
In your partial view:
<div class="item-details #(ViewBag.IsModelReadOnly ? "read-only" : "")">
Your html output for a readonly view would be
<div class="item-details read-only">
You can then access the div via jQuery and do what you need: $(".read-only")...
Why not just use
#Html.DisplayFor(model => model.[whatEver Property you are trying to show])

MVC2 application with Ckeditor "potentially dangerous Request.Form

I'm getting the "Potentially dangerous Request.Form request value was detected from the client" exception when im using my FCK editor.
How could encode before submit the form, or disable this validation without disable the Data Anotations validation?
This is the code of my view:
<% using (Html.BeginForm()) {%>
<%: Html.ValidationSummary("Please complete in a right way the fields below.") %>
<fieldset>
<legend>Fields</legend>
<div class="editor-field">
<%: Html.LabelFor(e => e.Name)%>
<%: Html.TextBoxFor(e => e.Name)%>
<%: Html.ValidationMessageFor(e => e.Name)%>
</div>
<div class="editor-field">
<%: Html.LabelFor(e => e.Teaser) %>
<%: Html.TextAreaFor(e => e.Teaser)%>
<%: Html.ValidationMessageFor(e => e.Teaser)%>
</div>
<div class="editor-field">
<%: Html.LabelFor(e => e.Description) %>
<%: Html.TextAreaFor(e => e.Description)%>
<%: Html.ValidationMessageFor(e => e.Description)%>
</div>
<p>
<input type="submit" />
</p>
</fieldset>
<% } %>
<script type="text/javascript">
//<![CDATA[
// This call can be placed at any point after the
// <textarea>, or inside a <head><script> in a
// window.onload event handler.
// Replace the <textarea id="xxxxxx"> with an CKEditor
// instance, using default configurations.
CKEDITOR.replace("Description");
//]]>
</script>
Thanks a lot in advance.
<httpRuntime requestValidationMode="2.0" />
Check: Request Validation - ASP.NET MVC 2
[script type="text/javascript" src="/ckeditor/_source/core/editor.js"][/script]
CKEDITOR.config.htmlEncodeOutput = true;
If you are working with the FCK editor or CKeditor you do not need to deal with the "requestValidationMode". As it will be applied on the entire application.
You can just do the followings:
CKEDITOR.replace('Description', { toolbar: '1', htmlEncodeOutput: true});
Then in the controller:
model.Body = System.Net.WebUtility.HtmlDecode(model.Body);
config.htmlEncodeOutput
But it might be easier to use a .Net wrapper for CKEditor.

how do I get my selected list back with the selected item (asp.net mvc 2)

I try to make a view in ASP.NEt mvc 2 with a selectList.
I fill up the selectlist languages from my model (regDom)
listLangModel is a list of languages I retrieve from the database.
regDom.Languages = from l in listLangModel
select new SelectListItem
{
Text = l.Name,
Value = l.ID
};
In my view I have this
<div class="editor-label">
<%: Html.LabelFor(model =>> model.Languages) %>
</div>
<div class="editor-field">
<%: Html.DropDownListFor(model => model.Languages, Model.Languages) %>
<%: Html.ValidationMessageFor(model => model.Languages) %>
</div>
When I run, the languages are in the dropdownlist on my page.
But when I post it back to my server, the model doesn't contain the languages anymore.
And I can't check which language is selected on the page.
The user can select only a single language from the drop down list, so you cannot expect it to populate the Languages property of your model which is a collection.
Add a property to hold the selected language in your model:
public string SelectedLanguage { get; set; }
and then bind the drop down list to this property:
<%: Html.DropDownListFor(model => model.SelectedLanguage, Model.Languages) %>

Resources