I want to show datas retrieved from database in a form and I am using spring MVC in my project.
I know in knockout to set a value in input textfield we use like
ko.observable("somevalue");
for example in this fiddle
and but we are assiging this somevalue in javascript code.My values are retrived from server and to show data I used
<input class="span8" type="text" data-bind="value: name" data-required="true" data-trigger="change" name="name" value="${currentpatient.user.name}">
but in this way the data is not getting printed.So can any body please tell me how to dynamic values
My values are retrived from server and to show data I used but in this way the data is not getting printed
For example your server returned a User instance that has properties such as: firstName and lastName,
then to access these properties you do in jsp like:
to get firstName: ${user.firstName}.
same to get lastName: ${user.lastName}.
to get access inside knockout.js do like:
// Here's my data model
var ViewModel = function() {
this.firstName = ko.observable('${user.firstName}');
this.lastName = ko.observable('${user.lastName}');
};
ko.applyBindings(new ViewModel()); // This makes Knockout get to work
Related
im using spring mvc framework with thymeleaf template engine
the problem is , i have 1 page with multiple check box iterated sing thymeleaf th:each iterator.When i clicked multiple check boxes i want to pass check box values to the controller method..
html content
<table>
<tr th:each="q : ${questions}">
<h3 th:text="${q.questionPattern.questionPattern}"></h3>
<div>
<p >
<input type="checkbox" class="ads_Checkbox" th:text="${q.questionName}" th:value="${q.id}" name="id"/>
</p>
</div>
</tr>
</table>
*Controller*
#RequestMapping(value = Array("/saveAssessment"), params = Array({ "save" }))
def save(#RequestParam set: String, id:Long): String = {
var userAccount: UserAccount = secService.getLoggedUserAccount
println(userAccount)
var questionSetQuestion:QuestionSetQuestion=new QuestionSetQuestion
var questionSet: QuestionSet = new QuestionSet
questionSet.setUser(userAccount)
questionSet.setSetName(set)
questionSet.setCreatedDate(new java.sql.Date(new java.util.Date().getTime))
questionSetService.addQuestionSet(questionSet)
var list2: List[Question] = questionService.findAllQuestion
var limit=list2.size
var qustn:Question=null
var a = 1;
for( a <- 1 to limit ){
println( a );
qustn= questionService.findQuestionById(a)
questionSetQuestion.setQuestion(qustn)
questionSetQuestion.setQuestionSet(questionSet)
questionSetQuestion.setCreatedDate(new java.sql.Date(new java.util.Date().getTime))
questionSetQuestionService.addQuestionSetQuestion(questionSetQuestion) } "redirect:/teacher/Assessment.html" }
I think you pretty much have it. With a checkbox, you can only send one piece of information back with the form...that being the value. So if you are trying to determine which checkboxes are checked when the user clicks the submit button, then I would have the checkboxes all use one name...like "id" (exactly like you have). Value is the actual id of the question (again like you have). Once submitted, "id" will be a String array which includes all the values of the checkboxes that were checked.
So your controller method needs to take param called "ids" mapped to parameter "id" which is a string[]. Now for each id, you can call questionService.findQuestionById.
(I'm not a Groovy guru so no code example sry :)
I have used JSTL with JSP and thymeleaf was something new. I read the THYMELEAF documentation.
There is a section which explains multi valued check boxes.
<input type="checkbox"
class="ads_Checkbox"
th:text="${q.questionName}"
th:value="${q.id}" name="id"/>
In the above code we are not binding the value to the field of the command object. Instead try doing this
<input type="checkbox"
class="ads_Checkbox"
th:text="${q.questionName}"
th:field="*{selectedQuestions}"
th:value="${q.id}" />
here the selectedQuestions is an array object present in the spring command object.
I have the following code:
// KendoAutocomplete textbox
<input id="search" data-bind="kendo: 'kendoAutoComplete', source:searchSource" />
// For now
var autoComplete = $("#search").kendoAutoComplete();
var x= autoComplete.data("kendoAutoComplete").value();
How can I retrieve the value for x using custom binding without using id?
Your question is a little bit confusing. Lets see if I guess what you mean by "retrieve the value for x using custom binding".
Problem statement: Define a KendoUI AutoComplete that when enter a value automatically updates an ObservableObject so I can get the value without having to use autoComplete.data("kendoAutoComplete").value();
Start defining the input as:
<input id="search" data-role="autocomplete" data-bind="source: searchSource, value: x"/>
Where I define what is the datasource for autocomplete element (searchSource) plus, where to store that introduced value (x).
Then, in JavaScript I do:
var ds = new kendo.data.DataSource({
data: [ "option1", "option2", "option3" ]
});
var obj = kendo.observable({ searchSource: ds, x: "option2" });
kendo.bind("body",obj);
Where ds is the DataSource containing the values for the autocomplete and it is bound to the body of your HTML element (or whatever portion of your document).
Whenever I want to get the value introduced in the autocomplete I simple use obj.x.
You can even get an HTML div magically updated doing:
<div data-bind="html: x"></div>
See running example here: http://jsfiddle.net/OnaBai/twznn/
Is it possible to match a ViewModel property to the matching ModelState.Key value when the ViewModel is a (has a) collection?
Example: To edit a collection of viewmodel items, I am using the extension found here.
That adds a GUID to the id of the fields on the page.
example:
class Pets
{
string animal;
string name;
}
For a list of Pets, the generated html source is like this:
<input name="Pets.index" autocomplete="off" value="3905b306-a9..." type="hidden">
<input value="CAT" id="Pets_3905b306-a9...__animal" name="Pets[3905b306-a9...].animal" type="hidden">
<input value="MR. PEPPERS" id="Pets_3905b306-a9...__name" name="Pets[3905b306-a9...].name" type="hidden">
<input name="Pets.index" autocomplete="off" value="23342306-b4..." type="hidden">
<input value="DOG" id="Pets_23342306-b4...__animal" name="Pets[23342306-b4...].animal" type="hidden">
<input value="BRUTICUS" id="Pets_23342306-b4...__name" name="Pets[23342306-b4...].name" type="hidden">
So when this gets bound on post, the ModelState gets loaded with all the form fields.
In ModelSTate.Keys, there is:
Pets[23342306-b4...].name
Pets[23342306-b4...].animal
Pets[3905b306-a9...].name
Pets[3905b306-a9...].animal
Everything good so far, but I am doing some business logic validation, things like, cant add new animal if one exists with the same name. In that case, I want to be able to highlight the input field that is in error.
So if my create function fails, it will return an error/key value pair like this:
{ error = "Duplicate Name", key="name" }
So I at least will now what property caused the problem.
But since my repository functions don't know about the view field ids, how can I match the key "name" to the appropriate ModelState key (in this case, either Pets[23342306-b4...].name or Pets[3905b306-a9...].name)?
If you used the built in functionality of MVC for displaying collections (Html.DisplayFor(m => m.Pets) or Html.EditorFor(m => m.Pets)) with appropriate display/editor template, MVC would render something like this:
Pets[0].name
Pets[0].animal
Pets[1].name
Pets[1].animal
This maps to IEnumerable<Pets> and you know that first item has index of 0, second item 1 etc.
So if the second item has an error, you can set error for the ModelState key "Pets[1].name" for example.
If you are using the Html.BeginCollectionItem extension method, like I was, I was able to get around this by not using the GUID. I need the dynamic add and delete, but I was always looking up known items, persons that have an ID, which I had in my editor. So instead of using the GUID, I just assign the ID (uniqueId) in the code below. I could then find the key because I knew it was Person[234232]. Of course if you are adding new items and not displaying selected items, it might not work for you.
public static IDisposable BeginCollectionItem(this HtmlHelper html, string collectionName, string uniqueId)
{
var idsToReuse = GetIdsToReuse(html.ViewContext.HttpContext, collectionName);
string itemIndex = idsToReuse.Count > 0 ? idsToReuse.Dequeue() : uniqueId;
// autocomplete="off" is needed to work around a very annoying Chrome behaviour whereby it reuses old values after the user clicks "Back", which causes the xyz.index and xyz[...] values to get out of sync.
html.ViewContext.Writer.WriteLine(string.Format("<input type=\"hidden\" name=\"{0}.index\" autocomplete=\"off\" value=\"{1}\" />", collectionName, html.Encode(itemIndex)));
return BeginHtmlFieldPrefixScope(html, string.Format("{0}[{1}]", collectionName, itemIndex));
}
Is it possible to bind data from your model to a knockout viewmodel. Heres an example:
public ActionResult Edit(int id)
{
Product product = _db.Products.FirstOrDefault(x=>x.ItemId == id);
return View(product);
}
Then in the View I would traditionally do something like so:
#model myApp.Models.Product
#using(Html.BeginForm())
{
#Html.EditorFor(x=>x.ItemName)
#Html.ValidationMessageFor(x=>x.ItemName)
<input type="submit" value="Update" />
}
But with Knockout I would create a EditProductViewModel from where I would do something like:
var EditProductViewModel = {
ItemName = ko.observable('')
};
EditProductViewModel.Edit = function() {
$.ajax({
url: "Home/Edit",
data: ko.ToJson(this),
success: function() {
// do something
}
});
};
$(function() {
ko.applyBindings(EditProductViewModel);
});
And instead of using the Html Helpers I would do something like so in my view:
<form data-bind="submit: Edit">
<input type="text" data-bind="value: ItemName" />
<input type="submit" value="Update" />
</form>
So how can I populate this with the data returned from my controller?
I don't have a any experience with knockout but it would seem to me that you would no longer want to return a view from your controller how about
return JSON(product)
that way you would get a json element of the product on your javascript success function you would need to collected the json element
$.ajax({
url: "Home/Edit",
data: ko.ToJson(this),
success: function(data) {
// map to knockout view model
}
});
and then from here you would call the map bindings.
When using knockout you have two ways to do this.
1. Load your textboxes, etc in one view. Upon loading that view for the first time convert your model to JSON upon in initial load to use by knockout.
ALL additional calls to/from go via JSON.
You can use in your View:
#Html.Raw(Json.Encode(yourModel))
Load your textboxes in your view (ie they are part of your vieW)
Trigger off on document.ready() your ajax calls to get your data from your controller, convert to JSON ie return Json(yourModel, JsonRequestBehavior.AllowGet) and bind those results roughly as you are already doing above
Note - the downside with this approach is with validation. If you have all client side validation, then this is OK as the attributes for data-* will have been written out by MVC to your textboxes, etc. If you have any server side validation, there is no 'smooth' built in integration here with knockout.
There's a decent article here:
http://www.codeproject.com/Articles/305308/MVC-Techniques-with-JQuery-JSON-Knockout-and-Cshar
but still lacks on server side validation mention.
You could serialize data to your page and then initialize knockout viewmodel with values from server.
ItemName = ko.observable(serializedModel.ItemName);
I want to pass two values from view to controller . i.e., #Model.idText and value from textbox. here is my code:
#using HTML.BeginForm("SaveData","Profile",FormMethod.Post)
{
#Model.idText
<input type="text" name="textValue"/>
<input type="submit" name="btnSubmit"/>
}
But problem is if i use "Url.ActionLink() i can get #Model.idText . By post action i can get textbox value using FormCollection . But i need to get both of this value either post or ActionLink
using ajax you can achieve this :
don't use form & declare your attributes like this in tags:
#Model.idText
<input type="text" id="textValue"/>
<input type="submit" id="btnSubmit"/>
jquery:
$(function (e) {
// Insert
$("#btnSubmit").click(function () {
$.ajax({
url: "some url path",
type: 'POST',
data: { textField: $('#textValue').val(), idField: '#Model.idText' },
success: function (result) {
//some code if success
},
error: function () {
//some code if failed
}
});
return false;
});
});
Hope this will be helpful.
#using HTML.BeginForm("SaveData","Profile",FormMethod.Post)
{
#Html.Hidden("idText", Model.idText)
#Html.TextBox("textValue")
<input type="submit" value="Submit"/>
}
In your controller
public ActionResult SaveData(String idText, String textValue)
{
return null;
}
I'm not sure which part you are struggling with - submitting multiple values to your controller, or getting model binding to work so that values that you have submitted appear as parameters to your action. If you give more details on what you want to achieve I'll amend my answer accordingly.
You could use a hidden field in your form - e.g.
#Html.Hidden("idText", Model.idText)
Create a rule in global.asax and than compile your your with params using
#Html.ActionLink("My text", Action, Controller, new { id = Model.IdText, text =Model.TextValue})
Be sure to encode the textvalue, because it may contains invalid chars
Essentially, you want to engage the ModelBinder to do this for you. To do that, you need to write your action in your controller with parameters that match the data you want to pass to it. So, to start with, Iridio's suggestion is correct, although not the full story. Your view should look like:
#using HTML.BeginForm("SaveData","Profile",FormMethod.Post)
{
#Html.ActionLink("My text", MyOtherAction, MaybeMyOtherController, new { id = Model.IdText}) // along the lines of dommer's suggestion...
<input type="text" name="textValue"/>
<input type="submit" name="btnSubmit"/>
#Html.Hidden("idText", Model.idText)
}
Note that I have added the #Html.Hidden helper to add a hidden input field for that value into your field. That way, the model binder will be able to find this datum. Note that the Html.Hidden helper is placed WITHIN your form, so that this data will posted to the server when the submit button is clicked.
Also note that I have added dommer's suggestion for the action link and replaced your code. From your question it is hard to see if this is how you are thinking of passing the data to the controller, or if this is simply another bit of functionality in your code. You could do this either way: have a form, or just have the actionlink. What doesn't make sense is to do it both ways, unless the action link is intended to go somewhere else...??! Always good to help us help you by being explicit in your question and samples. Where I think dommer's answer is wrong is that you haven't stated that TextValue is passed to the view as part of the Model. It would seem that what you want is that TextValue is entered by the user into the view, as opposed to being passed in with the model. Unlike idText that IS passed in with the Model.
Anyway, now, you need to set up the other end, ie, give your action the necessary
[HttpPost]
public ActionResult SaveData(int idText, string textValue) // assuming idText is an int
{
// whatever you have to do, whatever you have to return...
}
#dommer doesn't seem to have read your code. However, his suggestion for using the Html.ActionLink helper to create the link in your code is a good one. You should use that, not the code you have.
Recapping:
As you are using a form, you are going to use that form to POST the user's input to the server. To get the idText value that is passed into the View with the Model, you need to use the Html.Hidden htmlhelper. This must go within the form, so that it is also POSTed to the server.
To wire the form post to your action method, you need to give your action parameters that the ModelBinder can match to the values POSTed by the form. You do this by using the datatype of each parameter and a matching name.
You could also have a complex type, eg, public class MyTextClass, that has two public properties:
public class MyTextClass
{
public int idText{get;set}
public string TextValue{get;set;}
}
And then in your controller action you could have:
public ActionResult SaveData(MyTextClass myText)
{
// do whatever
}
The model binder will now be able to match up the posted values to the public properties of myText and all will be well in Denmark.
HTH.
PS: You also need to read a decent book on MVC. It seems you are flying a bit blind.
Another nit pick would be to question the name of your action, SaveData. That sounds more like a repository method. When naming your actions, think like a user: she has simply filled in a form, she has no concept of saving data. So the action should be Create, or Edit, or InformationRequest, or something more illustrative. Save Data says NOTHING about what data is being saved. it could be credit card details, or the users name and telephone...