I am using Telerik MVC Grid with a pop-up editor. I have an editor template defined with the following code, and it is working. However, it seems like the model binding only works with certain methods that take a lambda expression (#Html.EditorFor, #Html.TextBoxFor, etc). If I simply wanted to make a model property appear as raw html/text in the page - how is that done? I have tried using the #Model.Property syntax - and it does not produce an error, but no value is output. What am I overlooking here?
#model Models.MatrixConditionViewModel
<div style="padding:5px;margin:5px;width:975px;border:1px solid black;" class="form-horizontal m-t-md">
<h3>Edit Condition</h3>
<br />
<div class="form-group">
#Html.HiddenFor(model => model.ConditionId)
<label class="col-sm-2 control-label">Condition</label>
#Html.TextBoxFor(model => model.ConditionName, new { #class = "col-sm-3" })
#Html.ValidationMessageFor(model => model.ConditionName)
<label class="col-sm-2 control-label">Desc</label>
#Html.TextAreaFor(model => model.ConditionDescription, 3, 25, null)
#Html.ValidationMessageFor(model => model.ConditionDescription)
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Logic</label>
#Html.TextAreaFor(model => model.ConditionLogic, 5, 94, null)
#Html.ValidationMessageFor(model => model.ConditionLogic)
</div>
<div class="form-group">
Need a value here: #Model.ConditionId
<label class="col-sm-2 control-label">Content</label>
<iframe src="~/WebForms/ContentEditor.aspx?ConditionId=1" width="700" height="425" frameborder="0"></iframe>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Font Formatting</label>
#Html.TextAreaFor(model => model.ConditionFormatNotes, 5, 94, null)
#Html.ValidationMessageFor(model => model.ConditionFormatNotes)
</div>
</div>
Use the Html.Raw HTML helper to render the property
#Html.Raw(Model.PropertyName)
If you want this to then be bound by the modebinder, you have to make sure the input name matches the params (and types of params) of the action method that is receiving the request.
Related
I have the following javascript and input fields within my model.
script type="text/javascript">
function sum() {
var txtFirstNumberValue = document.getElementById('money1').value;
var txtSecondNumberValue = document.getElementById('money2').value;
var txtThirdNumberValue = document.getElementById('money3').value;
var result = parseFloat(txtFirstNumberValue) + parseFloat(txtSecondNumberValue) + parseFloat(txtThirdNumberValue);
if (!isNaN(result)) {
document.getElementById('Total').value = result;
}
}
</script>
<div class="form-group">
#Html.LabelFor(model => model.Total, "Total", new { #class = "control-label col-md-5" })
<div class="col-md-offset-0">
<input type="text" id="Total" name="Total" />
#*#Html.EditorFor(model => model.Total)*#
#Html.ValidationMessageFor(model => model.Total)
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.money1, "money1", new { #class = "control-label col-md-5" })
<div class="col-md-offset-0">
#*#Html.EditorFor(model => model.money1)*#
<input type="text" id="money1" onkeyup="sum();" name="money1" />
#Html.ValidationMessageFor(model => model.money1)
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.money2, "money2", new { #class = "control-label col-md-5" })
<div class="col-md-offset-0">
#*#Html.EditorFor(model => model.money2)*#
<input type="text" id="money2" onkeyup="sum();" name="money2" />
#Html.ValidationMessageFor(model => model.money2)
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.money3, "money3", new { #class = "control-label col-md-5" })
<div class="col-md-offset-0">
#*#Html.EditorFor(model => model.money3)*#
<input type="text" id="money3" onkeyup="sum();" name="money3" />
#Html.ValidationMessageFor(model => model.money3)
</div>
</div>
This all works fine. When I type a value into the 3 money fields the resulting value appears in the Total field. Within MVC if I click on the details view it shows all four values, however if I click on the edit view all four fields are blank. Question is how do I get the values to appear and remain in edit mode?
Well, for starters your model-bound input fields are commented out:
#*#Html.EditorFor(model => model.money1)*#
In order to get those to work you'd need to un-comment them.
You could just manually populate your markup with the model values, something like this:
<input type="text" id="money1" onkeyup="sum();" name="money1" value="#model.money1" />
That should pre-populate that input with the model's money1 value. Though you're assuming the responsibility of manually implementing anything else that the built-in HTML helpers would provide for you. Unless there's a compelling reason not to use Html.EditorFor() I imagine that would be the better option.
I am using SmartAdmin for UI purpose and MVC4 for coding. SmartAdmin CSS is not supported inside
#using (Html.BeginForm()) {
#Html.ValidationSummary(true)
<fieldset>
<div class="row">
<section class="label col col-1">
#Html.LabelFor(model => model.Name, new { #style = "text-align:left" })
< /section>
<section class="col col-4">
<label class="input"> <i class="icon-append fa fa-user"></i>
#Html.TextBoxFor(model => model.Name, null, new { #placeholder = "Enter Name" })
#Html.ValidationMessageFor(model => model.Name)
</label>
</section>
<section class="label col col-1">
#Html.LabelFor(model => model.Role)
</section>
<section class="col col-4">
<label class="input"> <i class="icon-append fa fa-user"></i>
#Html.TextBoxFor(model => model.Role, null, new { #placeholder = "Enter Role" })
#Html.ValidationMessageFor(model => model.Role)
</label>
</section>
</div>
<p>
<input type="submit" value="Create" />
</p>
</fieldset>
}
But by using code above, UI does not looks in proper format. When I remove
#using (Html.BeginForm()) {
#Html.ValidationSummary(true)
from code then UI looks properly but does not posts values to controller.Now my issue is that, can MVC4 supports SmartAdmin for UI purpose?
Is there any solution for that?
Here is a great tutorial for that:
http://myorange.ca/supportforum/question/how-to-integrate-smartadmin-1-4-x-into-asp-net-mvc-5
add the "smart-form" tag into the class field like below to activate it.
Html.BeginForm("ACTIONNAME", "CONTROLLERNAME", FormMethod.Post, new { #class = "smart-form ", id = "myID" }))
But if you are starting with smartadmin and MVC, i highly recommand you to follow the tutorial:
http://myorange.ca/supportforum/question/how-to-integrate-smartadmin-1-4-x-into-asp-net-mvc-5
I use a bootstrap based template. It works very well for me, in my code I do not use the form helper, so more along the lines of . Try doing this instead to see if that helps. It is entirely possible that the helper is allocating a class to the form which throws out the CSS formatting. Using something like Firebug to look at the effective CSS will help you.
I have a .cshtml file created by MVC4 scaffolding that looks something like this:
#using (Html.BeginForm()) {
#Html.ValidationSummary(true)
<fieldset>
<legend>BicycleSellerListing</legend>
<div class="editor-label">
#Html.LabelFor(model => model.BicycleManfacturer)
</div>
<div class="editor-field">
#Html.DropDownList("ManufacturerList")
</div>
<div class="editor-label">
#Html.LabelFor(model => model.BicycleType)
</div>
<div class="editor-field">
#Html.DropDownList("TypeList")
</div>
<div class="editor-label">
#Html.LabelFor(model => model.ListingPrice)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.ListingPrice)
#Html.ValidationMessageFor(model => model.ListingPrice)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.Comments)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.Comments)
#Html.ValidationMessageFor(model => model.Comments)
</div>
<p>
<input type="submit" value="Create" />
</p>
</fieldset>
Instead of the labels and columns being generated in a single vertical column, I would like to rearrange this so that I have labels in one column and editor fields in a second column (more of a traditional data entry form). I am very new to MVC 4 and HTML5 and don't really know how to go about doing this. If someone could help me rearrange this .cshtml code to accomplish this, I would be very thankful.
Here is one way using float:left and :before
http://jsfiddle.net/fdLca/
.editor-label {
float:left;
width:20%;
}
.editor-label:before {
clear:left;
}
.editor-field {
float:left;
width:80%;
}
To get around using :before if you needed to support older IE (< 9) then you can add an element purely being used to clear in between each field and label.
http://jsfiddle.net/fdLca/1/
HTML
<div class="editor-label">
label1
</div>
<div class="editor-field">
#Html.DropDownList("ManufacturerList")
</div>
<div class="clear"></div>
CSS
.clear {
clear:left;
}
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.
If VS creates a strongly-typed view for the [HttpGet] Create, I get markup for the model as follows.
Note that the code has been simplified for the sake of brevity. The important point is that VS does NOT include Html.HiddenFor(model=>model.Id).
//Create.cshtml
#model MvcMovie.Models.Movie
#using (Html.BeginForm())
{
#Html.ValidationSummary(true)
<fieldset>
<legend>Movie</legend>
<div class="editor-label">
#Html.LabelFor(model => model.Title)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.Title)
#Html.ValidationMessageFor(model => model.Title)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.ReleaseDate)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.ReleaseDate)
#Html.ValidationMessageFor(model => model.ReleaseDate)
</div>
<p>
<input type="submit" value="Create" />
</p>
</fieldset>
}
Now I create a templated HTML helper EDITOR named Movie.cshtml for the type Movie as follows.
Note that the code has been simplified for the sake of brevity. The important point is that VS DOES include Html.HiddenFor(model=>model.Id).
//Movie.cshtml
#model MvcMovie.Models.Movie
#Html.HiddenFor(model => model.Id)
<div class="editor-label">
#Html.LabelFor(model => model.Title)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.Title)
#Html.ValidationMessageFor(model => model.Title)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.ReleaseDate)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.ReleaseDate)
#Html.ValidationMessageFor(model => model.ReleaseDate)
</div>
If I use this templated, I must change Create.cshtml as follows:
//Create.cshtml
#model MvcMovie.Models.Movie
#using (Html.BeginForm())
{
#Html.ValidationSummary(true)
<fieldset>
<legend>Movie</legend>
#Html.EditorForModel()
<p>
<input type="submit" value="Create" />
</p>
</fieldset>
}
The questions are:
Since the hidden field form can be deleted without any side effect, in this case, what is the hidden field for?
It adds hidden field because it doesn't know how action looks like. Action will contain parameter ID in url thus it is not required to put it into hidden field. However in template, VS doesn't know whether action will contain ID or not, so it puts there hidden field holding id to be sure.