We Keep Coding

Input Submit Button - Html.buttonfor

I am a bit new to mvc razor and building websites (front and backend). The break down is, I need a button that has a value stored in it be sent to the controller/model. Something similar to html boxtextfor. I have tried giving boxtextfor attributes similar to an input submit button, but it doesn't like that. I have tested the button using javascript and it does have the value within each individual button (# of buttons are dynamic based on previous submit).
I have seen posts like this but I am unsure how to add these to my controller or model so my index page can call it. My model is linked to my index page so I guess I could link these methods in my model.
There's no #Html.Button !
(tried this, but it needs to be linked to my model. A simple button doesn't work.)
Looking for a Html.SubmitButton helper that would accept class attributes in MVC3
I currently don't have access to my code in question. The button needs to be an input submit to go to [HTTPPOST]. However, if you need any more information please let me know.
Thank you for your time,
HtmlNooby

I solved it by wrapping a button with the following. This creates binds each individual button with the given item from an array. Kind of acts like a buttonfor if you will.
Foreach item in array{
#using(Html.BeginForm(…)
{
<button class=input value=item>item</button>
}
}

Setting a dynamic drop down value in JavaScript

I've been working on this issue for days and feel like I'm at a dead end so hoping someone can help out.
I have a form that's used to log calls. The form has two drop downs Reason and Resolution which are created using an array.
When a call is dropped for whatever reason I want the user to click a button called Lost Call and have it fill out the form with specific information.
It works for every field but the Resolution field. I can't get that one to populate.
The lost call button calls a function using onClick.
<Input type="button" value="Lost Call" onClick="LostCall()" />
All my code is HTML5 and JavaScript.
Here is my HTML code:
<select id="Reason"><option value=" "></option></select>
<select id="Resolution"><option value=" "></option></select>
The script I use to create the drop downs I got from here:
http://jsfiddle.net/bdhacker/eRv2W/
Other then changing the Variable names to suit my form and less options the code is the same.
The Question is how can I make it to where someone clicks lost call the form is filled out including the Reason and Resolution with specific values when the Resolution values are dynamically generated?
Here is the script for the Lost Call Button:
function LostCall() {
var Reason = document.getElementById("Reason");
Reason.Value = 'Misc/Other';
var Resolution = document.getElementById("Resolution");
Resolution.Value = 'Lost Call';
Using the above Reason is populated but not Resolution. Also note both Misc/Other and Lost Call are options available in the array I'm using.

EDIT: Updated fiddle.
Hmm, your code is working, as I've tried it in this quick fiddle
Are you simply missing a closing } or was that just a simple mistake when typing this question?

if the value you are assigning in the list of options, try this approach:
function LostCall() {
document.getElementById("Resolution").selectedIndex = "2";
}
check out the following resource (press the "try it yourself" button) : http://www.w3schools.com/jsref/prop_select_selectedindex.asp

Hiding Password field content from users

I'd like to know if its possible for me to do something from the following :
1) Replace the source code visible in view source , with an image , or nothing at all.
2) Hide the value attribute of <inpt type="password" ....> tag , so that the password entered by the user is not visible to anyone .
Thanks in advance.

You can minify your HTML to make it slightly unreadable, but it's trivial to unminify it. You can't do anything further to "remove" or "hide" it.
You mean to hide the value attribute after the user types something in, or to hide the value sent from the server? If the former, you could use JavaScript to extract the value as it's typed into some variable and replace the value with gibberish. If the latter, then the obvious answer is to not send that value.

View source is a representation of static HTML, so if you create any element dynamically, it will not be displayed in view source.
Note: These fields will still be accessible using dev tools.
Following is a sample code:
JSFiddle
function submit() {
var uName = document.getElementById("txtUserName").value;
var uPass = document.getElementById("txtUserPass").value;
console.log(uName, uPass);
}
function addPasswordField() {
var passInput = "<input type='password' id='txtUserPass' />";
document.getElementById("content").innerHTML += passInput;
}
(function() {
addPasswordField();
})()
<div id="content">
<input type="text" id="txtUserName">
</div>
<button onclick="submit()">submit</button>

There is no way to hide source code in a browser since that is how these things are built. The web is an open platform and developers working with the web need to have the view source functionality while working on their project(s). May I ask why you feel the need to hide the source code and the password?

To answer the first question: No. This is how browsers are designed and there are lots of other ways to request the page to see the source. For example, you could use Fiddler to see the traffic passing between the server and the browser.
As for the second question...why are you trying to hide the password?
Using the password input type will prevent anyone from seeing the password on the screen. so I assume this is to stop the data being viewed in transit?
If you want to secure your connection between the client and the server, you should consider using a secure (https) connection. Thanks to LetsEncrypt this is free, so it is no longer a costly option.

Building my first Javascript Application (jQuery), struggling on something

I'd really appreciate recommendations on the most efficient way to approach this.
I'm building a simple javascript application which displays a list of records and allows the user to edit a record by clicking an "Edit" link in the records row. The user also can click the "Add" link to pop open a dialog allowing them to add a new record.
Here's a working prototype of this: http://jsfiddle.net/FfRcG/
You'll note if you click "Edit" a dialog pops up with some canned values. And, if you click "Add", a dialog pops up with empty values.
I need help on how to approach two problems
I believe we need to pass our index to our edit dialog and reference the values within the JSON, but I am unsure how to pass the index when the user clicks edit.
It bothers me that the Edit and Add div contents are so similiar (Edit just pre populates the values). I feel like there is a more efficient way of doing this but am at a loss.
Here is my code for reference
$(document).ready( function(){
// Our JSON (This would actually be coming from an AJAX database call)
people = {
"COLUMNS":["DATEMODIFIED", "NAME","AGE"],
"DATA":[
["9/6/2012", "Person 1","32"],
["9/5/2012","Person 2","23"]
]
}
// Here we loop over our JSON and build our HTML (Will refactor to use templating eventually)
members = people.DATA;
var newcontent = '<table width=50%><tr><td>date</td><td>name</td><td>age</td><td></td></tr>';
for(var i=0;i<members.length;i++)
{
newcontent+= '<tr id="member'+i+'"><td>' + members[i][0] + '</td>';
newcontent+= '<td>' + members[i][1] + '</td>';
newcontent+= '<td>' + members[i][2] + '</td>';
newcontent+= '<td><a href="#" class="edit" id=edit'+i+'>Edit</a></td><td>';
}
newcontent += "</table>";
$("#result").html(newcontent);
// Bind a dialog to the edit link
$(".edit").click( function(){
// Trigger our dialog to open
$("#edit").dialog("open");
// Not sure the most efficient way to change our dialog field values
$("#name").val() // ???
alert($());
return false;
});
// Bind a dialog to the add link
$(".edit").click( function(){
// Trigger our dialog to open
$("#add").dialog("open");
return false;
});
// Bind a dialog to our edit DIV
$("#edit").dialog();
// Bind a dialog to our add DIV
$("#add").dialog();
});
And here's the HTML
<h1>People</h1>
Add a new person
<!-- Where results show up -->
<div id="result"></div>
<!--
Here's our edit DIV - I am not clear as to the best way to pass the index in our JSON so that we can reference positions in our array to pre populate the input values.
-->
<div id="edit">
<form>
<p>Name:<br/><input type="text" id="name" value="foo"></p>
<p>Age:<br/><input type="text" id="age" value="33"></p>
<input type="submit" value="Save" id="submitEdit">
</form>
</div>
<!--
Here's our add DIV - This layout is so similiar to our edit dialog. What is the
most efficient way to handle a situation like this?
-->
<div id="add">
<form>
<p>Name:<br/><input type="text" id="name"></p>
<p>Age:<br/><input type="text" id="age"></p>
<input type="submit" value="Save" id="submitEdit">
</form>
</div>

1) Index can be passed via hidden value or by changing the form url. If you use a template for the form you might be able to just fill the form in on the fly and re-render it. If your site is RESTful the url change might be the more appropriate choice.
You may then need to also write a helper for the URL. The helper function will help figure out the appropriate url depending if it is "new" or a "edit". Next you can use "serialize" http://api.jquery.com/serialize/ to grab all the fields in the form and convert it to key-value pair for $.POST if needed.
2) You have 2 options: Try making 1 form, or use a template. If you just have 1 form at the start then your only option is to use .val() to change the form's values.
If you use the template approach you could either just have the template embedded on the page, or you can pull the final form using $.GET on the server. One nice approach might be to use haml or jade as your templating language. You can then mix and match the approaches. By that I mean you can actually create a template tag on your page and load up the template as the page is initially rendered and fill it with just the form partial. You can then use that form on various other pages including just a basic edit page not in a dialog box.

I made some significant edits to your demo with quite a few comments. http://jsfiddle.net/FfRcG/1/
First I remapped data from array of arrays, to array of objects. It's typically a lot easier parsing the html when you can write strings like '<td>'+item.name+'</td>' VS '<td>'+item[5]+'</td>'. It's simpler to read what's what and debug. Getting data from server this way is not a lot more code to add at server.
I added an ID for each member in the original data which will help when communicating with server and storing data. This id is also being added to the edit button as an html data- attribute that is easily read with jQuery data() method ( see fiddle example)
It will likely be easier to not worry about storing data local for now, and simply update server with ajax call every time an add/edit is made. For this reason I set up a row parser to update your edit form when edit button is clciked. Adding classes for each column helps simplify the form update process. My thinking about storing local is it's just one less step for now, and server will stay current with page.
Remember that element ID's must be unique in a page so the duplicates in forms need to be changed.
As for the visuals between the 2 forms, I added title option to dialogs, and changed "save" button text a bit. If you are wondering where css for dialogs comes from, it is set in the "Manage Resources" panel of fiddle and comes from Google CDN.
SOme of these ideas should help. good luck.

Look into using the clone method, and creating it on the fly when the user clicks the add/edit link (if you have more than one edit). You can then set values on the fly by selecting the inputs and setting their val property.
As for passing the id for the edit you can either use a:
<input type="hidden" name="index" value="" />
Or you can add a property to the div like so:
<div id="edit" data-index="1">
and then referencing it with a
$('#edit').click(function() {
$(this).attr('data-index');
});
inside the click handler to grab the id.

I try something about input values. You can use .attr() for change input value. Here working (only calls 1st Person from jSON.) copy http://jsfiddle.net/serkanalgur/zs3tW/
What i added;
// Bind a dialog to the edit link
$(".edit").click( function(){
// Trigger our dialog to open
$("#edit").dialog("open");
$('input#name').attr('value', people.DATA[0][1]); // for name
$('input#age').attr('value', people.DATA[0][2]); // for age. but needed dynamic ids
return false;
});

dojox.form.Rating Not Appearing in Post Data

I have a included a Dojo star rating widget (dojox.form.Rating) in a Dojo form but when submitted, it doesn't appear.
<div dojoType="dojox.form.Rating" numStars="5" id="field_3177" value="3"></div>
The documentation doesn't mention adding a name attribute, but even if I add one, it doesn't help.
<div dojoType="dojox.form.Rating" name="field_3177" numStars="5" id="field_3177" value="3"></div>
Examining the rendered HTML in Firebug, it seems the hidden input field has no name attribute - which would explain why it doesn't appear in the POSTed data.
<input type="hidden" dojoattachpoint="focusNode" value="3" id="field_3177" tabindex="0">
Is there something I should do before submitting?

You just need to add a name to the widget, i.e.
<div dojoType="dojox.form.Rating" numStars="5" id="field_3177" name="field_3177" value="3"></div>
This is nothing special to Dojo. All input elements must have a name in order to be submitted back to the server, see http://www.w3schools.com/tags/att_input_name.asp.
UPDATE:
Sorry, didn't see that you'd already tried adding a name param. I'd argue this is a bug in either the Form or (more likely) the rating widget. If you submit your form via XHR using dijit.form.Form.getValues() then you'll get the rating widget included - if you have a name. But if you use the native form submit then you don't.
I've created a test case at hhttp://telliott.net/dojoExamples/dojo-ratingInFormExample.html. You can get this to work for non-XHR form submission by quickly iterating through the values returned by getValues() and building the query string yourself. Not ideal. I suspect the template for the rating should be updated to put the name attribute onto the input node rather than the top level node.

Silly question:
have you added dojo.require("dojox.form.Rating"); to your code?
Hope it helps you.
//Daniel