We Keep Coding

Make a title of the field goes over the field: asp MVC/Razor

I want when I enters information in the field, then the title of the field goes over the field.
Here is my code:
so in the field we have the text "FIRSTNAME", my purpose is when i enters information in this field, the text "FIRSTNAME" goes over the field.
And as long as the client has nothing to enter in a field, then the title remains in the field.
I search a lot if there is a trick to add in TextBoxFor to do that but i didn't find!
state 0.
state 1.
#Html.TextBoxFor(model => model.FirstName, new { #placeholder = "FIRSTNAME", #class = "adresse-input"})

You would need to use js for this. First wrap your textbox and corresponding label inside a div:
<div class="wrapper">
<label for="FirstName">FIRSTNAME</label>
#Html.TextBoxFor(model => model.FirstName, new { #placeholder = "FIRSTNAME",
#class = "adresse-input"})
</div>
Then define a couple of CSS classes that will make label float:
.wrapper {
position:relative;
margin:25px;
}
label {
position:absolute;
top:-13px;
left:0;
font-size:11px;
transition: all 0.1s linear;
opacity:0;
}
label.above {
top:-20px;
opacity:1;
}
And finally add JavaScript to apply classes dynamically when user fills in the field:
$(function(){
$("input").on("keyup",function(){
$(this).prev("label").toggleClass("above", this.value !== "");
});
});
I also prepared a sample fiddle to show you the final behavior: Floating label
EDIT
As per your request. If you want to additionally move label above input if focus in on the field (no matter if its empty or not) then js code would be slightly different:
$(function(){
$("input").on("focus",function(){
$(this).prev("label").addClass("above");
$(this).attr("placeholder", "");
}).on("blur",function(){
var label = $(this).prev("label");
label.removeClass("above");
$(this).attr("placeholder", label.text());
});
});

Can we add this property that:
if the customer enters into the field, the title passes over the field, if it comes out of the field without having nothing entered, then the title goes back inside the field.

Telerik UI DropDownList not automatically selecting the Item

I am using a 'Telerik UI for ASP.NET Core' DropDownList. The datasource is requesting a list of SelectItems where one of the item has the Selected value on true. My guess is the right behaviour would be for the item to be automatically selected but it is not.
Dropdownlist:
#(Html.Kendo().DropDownList()
.Name("CategoryId")
.DataSource(ds => ds.Read(read => read.Action("GetQuestionCategories", "Questions").Data("getParentCategoryId")).ServerFiltering(true))
.DataValueField("Value")
.DataTextField("Text")
.Events(events => events.Change("reloadLearningObjectives"))
.HtmlAttributes(new { #class = "form-control wide-full" })
)
The json text it is requesting:
[{"Disabled":false,"Group":null,"Selected":false,"Text":"Algemeen","Value":"62357618-ac53-4092-86d1-6c583b286bbe"},{"Disabled":false,"Group":null,"Selected":false,"Text":"Ballonvaren","Value":"9489c310-7549-45c7-a518-43f8016b2c3b"},{"Disabled":false,"Group":null,"Selected":false,"Text":"Paramotor","Value":"78d1a658-93f1-4eca-8b75-ad4bd4d33ef1"},{"Disabled":false,"Group":null,"Selected":false,"Text":"Part 66","Value":"b7b5845a-e2e0-45be-ad55-002180f8360b"},{"Disabled":false,"Group":null,"Selected":false,"Text":"ROC-Light","Value":"84ddea95-bda6-46b3-9660-2383d46033a0"},{"Disabled":false,"Group":null,"Selected":true,"Text":"Zweefvliegen","Value":"7367e8ff-d4a6-4766-b6b8-59f24f6e7b08"}]
As you can see the last item has "Selected" to true but when the page is done loading it still says that an item needs to be selected.

You can use the dataBound event, and set the value of the widget there using the value() method , reference code sample :
https://www.telerik.com/forums/dropdownlist-mvc---set-default-value-at-runtime#BV2tUQaLKkaPPOq5WaA9FQ
So you can try to modify above code sample to meet your requirement :
dataBound: function(e) {
// handle the event
$.each(e.sender.dataSource._data, function (key, value) {
if(value.Selected==true){
e.sender.value(value.Value);
}
});
},

MVC 4 Dropdownlist Pass value by button?

I have created a dropdownlist using html helper.
It's able to get the value and bind to dropdown.
How can i pass the selected dropdown value to controller?
My View:
#Html.DropDownList("Language", new SelectList(ViewBag.LangList, "Text", "Value"))
<input type="button" class="btn" title="Filter By Language"
value="Filter By Language" onclick="location.href='#Url.Action("SURV_Answer_Result", "SURV_Answer",
new { Survey_ID = Model[0].Survey_ID, Language = ViewBag.LangList })'" />
My Controller to get Language and bind into dropdown:
public ActionResult SURV_GetLanguage(int Survey_ID)
{
var getlanguagelist = from r in db.SURV_Question_Ext_Model
join s in db.SURV_Question_Model on r.Qext_Question_ID equals s.Question_ID
where s.Question_Survey_ID == Survey_ID
group new { r, s } by r.Qext_Language into grp
select grp.FirstOrDefault();
foreach (var item in getlanguagelist.ToList())
{
List<SelectListItem> langResult = new List<SelectListItem>();
foreach (var item2 in getlanguagelist)
{
SelectListItem temp = new SelectListItem();
temp.Text = item2.r.Qext_Language;
temp.Value = item2.r.Qext_Language;
langResult.Add(temp);
}
ViewBag.LangList = langResult;
}
return View(ViewBag.Langlist) ;
}
And i want pass the Language to the controller below:
public ActionResult SURV_Answer_Result(int Survey_ID, string Language)
{
List<AnswerQuestionViewModel> viewmodel = new List<AnswerQuestionViewModel>();
SURV_GetLanguage(Survey_ID);
// do whatever i want...
}

Your button in the view istype="button" and you have attached a onclick event which will just redirect to the SURV_Answer_Result passing the original ViewBag property back to the method (which will not bind to string Language because its List<SelectListItem>.
You need a form with FormMethod.Get
#using (Html.BeginForm("SURV_GetLanguage", "ControllerName", new { Survey_ID = Model[0].Survey_ID }, FormMethod.Get))
{
#Html.DropDownList("Language", (Enumerable<SelectListItem>)ViewBag.LangList)
<input type="submit" ... />
}
Notes:
The Survey_ID has been added to the form as a route value
ViewBag.LangList is Enumerable<SelectListItem> which is all that
is required by the DropDownList() helper so there is no point in
the extra overhead of creating another SelectList from it
(SelectList IS Enumerable<SelectListItem>)

The code you have used would work if you change the method signature on the controller to public ActionResult SURV_GetLanguage(int Survey_ID, string Language = null). You could then test for nulls and process as necessary.
However it would be better to wrap the dropdownlist inside a form, and use a POST request. Something like:
#using (Html.BeginForm("SURV_GetLanguage","ControllerName",FormMethod.Post))
{
#Html.DropDownList("Language", new SelectList(ViewBag.LangList, "Text", "Value"))
<input type="submit" class="btn" />
}
Then in the controller you could have a new method:
[HttpPost]
public ActionResult SURV_GetLanguage(string Language)
{
//Do whatever you want with language.
}

There are two ways,
1) You can put your dropdown and submit button into a form containing action parameter. On button press, your form will be submitted to its action. Your action must contain a parameter with name 'Languages'. It will give you selected value.
All the parameters of action, if matching to 'name' property of controls, will contain their values on form submit.
2) You can get selected value from dropdown by using jquery and then use either window.location or build url for form's action and call submit.

How to Bind a specific field to json instead of model?

I am using Asp.net MVC5. The scenario is like I have a view which is bound to a model.
Now there is a textbox in the view which I don't want to be bound to model field but to a specific json. The view is getting automatically bound to that field because of the declaration.
Is there any way we can stop a specific field from binding to view or to override this ?
#Html.TextBoxFor(m => m.country, new { #class = "form-control input-lg"})
While populating this textbox I dont want values from model , I want from specific json which is available in javascript code , but when it posts back I want textbox to post to country field.

You can set the value of contuntry using javascript. As below
$(document).ready(function () {
var JsonObj = GetJson();
$("#country").val(JsonObj.country)
});

Try using #Html.TextBox("country", new { #class = "form-control input-lg"}). And populate the value of your input through JavaScript on client side from JSON object.

Treeview (Kendo UI) with TextBox on the same page best practices in MVC4?

Let's say I have a view with Kendo treeview bounded to remote data source.
#(Html.Kendo().TreeView()
.Name("schemas")
.DataTextField("name")
.DataSource(dataSource => dataSource.Read(read => read.Action("Schemas", "Forms")))
.Events(events => events
.Select("onSelected")))
So the treeview just makes a call to the Schemas action in my FormsController
Also on the same page I have a form, which is simply the textbox and a button to submit the form
#using (Html.BeginForm("Load", "Forms", FormMethod.Post))
{
<div id="rootNode">
#Html.TextBox("rootElementName")
#Html.Button("next")
</div>
}
So I am just wondering what is the best way to handle user input and pass it to the the Load action of the FormsController? The user should select one of the options in the treeview and enter the value into textbox.
Or should I create some sort of viewmodel for my view with all my nodes inside + two additional fields for the textbox input and selected node?

I would take out the form elements, leaving:
<div id="rootNode">
#Html.TextBox("rootElementName")
#Html.Button("next")
</div>
The following js, this will pick up the tree item id on select.
The second function will call your Form controller action with the parameters.
<script>
var selectedNodeid;
//get the tree selected item id
function onSelected(e) {
var data = $('#schemas).data('kendoTreeView').dataItem(e.node);
selectedNodeid = data.id;
}
//button on click event
$(document).ready(function () {
$("#next")
.bind("click", function () {
//get parameters then pa
var id = selectedNodeid;
var rootElementName = $('#rootElementName).val()
$.ajax({
url: "Form/Load",
data:{id:id,rootElementName:rootElementName},
success: function () { }
});
}
})
</script>
I haven't tested this but it should be close.
I look forward to someone adding a better approach.