MVC html string field 2 way binding - asp.net-mvc

I have a controller that have a field HtmlContents with data like <input type=text>
I know how to render that text as html using:
#Html.Raw(Model.HtmlContent)
What I need now is that when the user type some thing and the form submit
the value of Model.HtmlContentupdate so I need some thing like #html.textboxfor(a=>a.HtmlContent) that return the updated value that what I mean by 2 way binding.
Thank you

Related

Pass multiple html parameter with BeginForm

I need to send parameters with values ​​in a BeginForm html.
Example:
# using (Html.BeginForm ("Create", "IncomeDeclaration", new {declarationAmount = document.getElementById ("element"). value}))
This value I can not get from the Model, as it is not found in the model.
I've tried several ways and nothing worked. If you could change the content of a ViewBag that'd be great.
I appreciate your support.
You can't mix and match Javascript (document.getElementById ("element")) with the C# form declaration. If you want a value submitted with the form, you should add a relevant form element inside the form declaration. If you don't want a regular form element (eg. a textbox), you can use a "hidden" input field. If you want, you can dynamically populate the hidden field using javascript.

About binding a checkbox to string property in MVC viewmodel

In my project I have a string field in the view model to display in a form and post back to the controller.
However for some reason, I'd like to display a checkbox, and retrieving string "True"/"False" from user input
I've searched through the internet and found this
How to render a model property of string type as checkbox in ASP.NET MVC
which leverage the editor template and achieve my need.
My question is that how do this be achieved, because in the editor template, I can only see it how to interpret the string to a checkbox, but it never explain or show how the checkbox value will be bind back to the string field with "True"/"False".
What should I do if I wanted "Yes"/"No" instead of "true"/"false", are there any converter that I need to make to parsing the checkbox to string?
Sorry for my bad English and lack of mvc knowledge, I just started MVC and web development for a few days.
UPDATE:
1. I am using ViewModel to bind with the forms, so I need something like Html.CheckBoxFor(x=>x.value)
while x.value is a string, obviously it is not possible with the default CheckboxFor
I think what you are asking is how to save the value back into your database, which is more of a back-end C# or VB question.
As you know, when you submit a form on an HTML page, if a checkbox is ticked, it's value will be passed in the POST parameters back to the server:
front-end HTML:
<input type="checkbox" name="theCheckBox" value="Yes" />
back-end C# in Page_Load() or similar
if(Request.Form["theCheckBox"] == "Yes") {
// save value "Yes" into database
}
just remember that if the checkbox is NOT TICKED, Request.Form["theCheckBox"] will be null

How to retrieve both Text and Value from DropDownList in Asp.net mvc

I have a dropdownlist in asp.net mvc which is bound using the normal binding syntax
and I can retrieve the "value" in the controller.
But I also need to display the text that is associated with this value.
I can go the hard route and query the db for this associated value.
But I wanted to know if there is an easy way to retrieve the Text as well as the Value in the controller.
Sample code I used
<%= Html.DropDownList("State","Pick a State")%>
which displays
"NJ", "New Jersey" etc.
In Controller
public ActionResult SelectState(string State)
{
// I have value of State (NJ) ...I also need the Text for this
}
Any help would be appreciated.
Thanks
The value that will come as part of the form submission is the value of the dropdown item. To get both, you could change the value to be something like "value delimiter text", so something like "NJ|New Jersey". Then you could parse it in the controller.

How to serialize the checkbox in a form into Json data

We know that in MVC, a CheckBoxFor will generate a checkbox with a value="true" and a hidden with a value=false. Both input controls will share the same name.
It is very reasonable because the form will be able to POST a false value if the box is unchecked. And the model binder will ignore the hidden input when the checkbox return a true.
But now i have overridden the form submit event in order to send the form data into a WebAPI controller in JSON format.
When serializing the form data, there is no mechanism to parse the relationship between the checkbox and the hidden correctly. Therefore, when unchecked, it returns a false, which is okay. But when checked, it returns a {true, false} instead of true, because the serializeArray() function goes through every input and find two values goes to a same name.
The question is: What is the best way to correct it?
My solution to this problem was to write my own HtmlHelper method that renders a single <input type="checkbox" /> tag. Any other solution just seemed too hacky.
You can use dotPeek or .NET Reflector to look at how the Microsoft Team created the HtmlHelper.CheckboxFor method if you need any help accomplishing that task.
The 2 tag approach was taken to prevent MVC action parameters from throwing an exception when a "bool" parameter did not have a matching parameter sent to the controller (an unchecked checkbox doesn't send any value).

MVC4 Razor - #Html.DisplayFor not binding to model

I am trying to find me feet with MVC4 Razor and I'm stuck with this simple problem.
When I use #Html.DisplayFor the model is always sent back as NULL, but when I use #Html.TextBoxFor this model is fully populated, what am I missing?
Thanks in advance
This is a common issue that many people miss in the asp.net mvc framework. Not just the difference in the helpers such as HiddenFor, DisplayFor, TextBoxFor - but how exactly the framework sets up automatically collecting and validating these inputs. The magic is all done with HTML5's data-* attributes. You will notice when looking at the input tag generated that there are going to be some extra properties in the form of data-val, data-val-required, and perhaps some additional data properties for types, for example numerics would be data-val-number.
These data attributes allow the jQuery extension jquery.validate.unobtrusive.js to parse the DOM and then decide which fields to validate or generate error messages.
The actual collection of posted data is reflected from the name property. This is what should map up to the model that is in the c# or vb [HttpPost] method.
Use HiddenFor when you want to provide posted data that the user does not need to be aware of.
Use DisplayFor when you want to show records but not allow them to be editted.
Use TextBoxFor when you want to allow user input or allow the user to edit a field.
EDIT
"the purpose of this view is to enable the user to view the data before submitting it to the database. Any ideas how I can achieve this?"
You could accomplish this with a duo of HiddenFor and DisplayFor. Use HiddenFor to have the values ready to be posted, and DisplayFor to show those values.
DisplayFor will not do the Model binding. TextBoxFor will do because it creates a input element in the form and the form can handle it when it is being posted. If you want to get some data in the HttpPost action and you dont want to use the TextBoxFor, you can keep that pirticulare model proeprty in a hidden variable inside the form using the HiddenFor HTML helper method like this.
#using(Html.BeginForm())
{
<p>The Type Name is</p> #Html.DisplayFor(x=>x.TypeName)
#Html.HiddenFor(x=>x.TypeName)
<input type="submit" value="Save" />
}
Use both DisplayFor and HiddenFor. DisplayFor simply displays the text and is not an input field, thus, it is not posted back. HiddenFor actually creates <input type="hidden" value="xxxx"/>
DisplayFor builds out a HTML label, not an input. Labels are not POSTed to the server, but inputs are.
I know this is a bit of an old question but you can roll your own, custom combined display control as shown below. This renders the model value followed by a hidden field for that value
#Html.DisplayExFor(model => Model.ItemCode)
Simply use what the framework already has in place
public static MvcHtmlString DisplayExFor<TModel, TProperty>(this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, TProperty>> ex)
{
var sb = new StringBuilder();
sb.Append(htmlHelper.DisplayFor(ex));
sb.Append(htmlHelper.HiddenFor(ex));
return MvcHtmlString.Create(sb.ToString());
}
Do you mean during a form post? If you use DisplayFor, this creates a element which does not contain any form values. Typically you use these in conjunction with each other to create a label for your textbox, then using the Html.TextBoxFor to allow users to modify the data element.
Example:
#Html.DisplayFor(x=>x.Item)
#Html.TextBoxFor(x=>x.Item)
Will Render
Item <a text input field following>
Or in HTML
<label for="Item">Item</label><input type="Text" id="Item" name="Item"/>

Resources