We Keep Coding

MVC form, input tag populated with other value

So I have a big form, which is divided in sections.
For simplyfying the thing, each section has input file tag for uploading a file, and an image of the previous file attached to that section (image in .png format).
<table>
<tr>
<td>
Upload Section Preview Image:
</td>
<td>
<div id="at-at-holder-N-TemplatePreview">
<input type="file" id="TemplateSectionPreview" name=#sectionScreenshotName title="Attach" />
</div>
</td>
</tr>
<tr>
<td>
<div class="section-panel">
<img class="thumbnail" src="/Content/screenshots/#sectionScreenshotName" />
<div id="section-image-preview-#sectionId" class="modal hide section-image-window">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<img src="/Content/screenshots/#sectionScreenshotName" style="max-height: 500px; padding: 4px;" />
</div>
</div>
</td>
</tr>
</table>
When I submit my form to save changes, in my controller I take a look at the Request.Files, and I find as many files as sections.
Digging more, I find out that MVC sends in every input I declare, the image I show next to it. Even if I attach a file with the input, nothing changes.
How can I just make my controller to read just the file/s attached with the input?
my controller heading:
[HttpPost]
public ActionResult QuestionEditor(FormCollection collection)
{
...

how to prevent button to trigger a postback on aspx

It has been a while since I last made a website with JQUERY-UI. I am have a aspx page, and I am trying to add a popup modal on click of
but it triggers a "submit" when I click the button, how do I prevent the submit? It displays the popup for 2 seconds and then "submit" occurs.
here is the html code
<div id="dialog-form" title="Create new user">
<p class="validateTips">All form fields are required.</p>
<form>
<fieldset>
<label for="name">Name</label>
<input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all">
<label for="email">Email</label>
<input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all">
<label for="password">Password</label>
<input type="password" name="password" id="password" value="" class="text ui-widget-content ui-corner-all">
</fieldset>
</form>
</div>
<div id="users-contain" class="ui-widget">
<h1>Existing Users:</h1>
<table id="users" class="ui-widget ui-widget-content">
<thead>
<tr class="ui-widget-header ">
<th>Name</th>
<th>Email</th>
<th>Password</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>john.doe#example.com</td>
<td>johndoe1</td>
</tr>
</tbody>
</table>
</div>
<button id="create-user">Create new user</button>

You can prevent submit action -
$('form').on('submit',function(e){
e.preventDefault();
});

In you Jquery code where you are setting the popup write
return false in the end... Thank you

Simplest way is to return false OnClientClick, <asp:Button OnClientClick="return false;"></button>.

Add the type attribute in the button, type="button". By default it is submit

Ajax call returning Partial View with Kendo datepicker not refreshing properly

I am adding to a list of elements through an ajax call. The ajax call sends information to controller, controller adds everything to database, then grabs all the items for the list from the database, adds the items to a view model, then returns a partial view with the model. I clear the div container for the list then add the returning HTML.
$('#container').empty().html(result);
My problem is, in the HTML, I have Kendo Datepickers. The page loads fine, and if I do a refresh everything is fine. But right after the Ajax call, the Kendo Datepickers are not there. I debugged and got the result HTML from the ajax call and the following is what is showing for the datepickers:
jQuery(function(){jQuery("#dueDate0").kendoDatePicker({"format":"M/d/yyyy","min":new Date(1900,0,1,0,0,0,0),"max":new Date(2099,11,31,0,0,0,0)});});
the 'dueDate0' is obviously the ID of the element, but it should not be zero it should be an actual ID number ( ex. 12 ). When I look at the HTML after the AJAX call, the datepickers are just input elements with a date type.
Any suggestions on what to do?
Thanks
EDIT: Here is the HTML that gets return in the AJAX call.
<div id="accordion">
<div class="ItemList">
<table class="tblPriorityElement">
<tr>
<td class="tdPrioritySelect">
<div class='handle'><span class='ui-icon ui-icon-carat-2-n-s'></span></div>
</td>
<td class="tdPriorityName">fasdfasr4</td>
<td class="tblType" tabindex="0">
<span class="txtType">Project</span>
</td>
<td class="tdPriorityDate" tabindex="0">
<time>10/8/2013</time>
</td>
<td class="tdAllocation" tabindex="0">
<span class="txtAllocation">0 hrs</span>
</td>
<td class="tdDeletePriority">;
<img src="../../Images/redx.png"/>
</td>
</tr>
</table>
<div class="content">
<form class="editItem">
<input id="ItemID" name="ItemID" type="hidden" value="0" />
<label>Name:</label>
<input class="text-box single-line" id="Item_Name" name="Item.Name" type="text" value="fasdfasr4" />
<label>Type:</label>
<input class="text-box single-line" id="Item_Type" name="Item.Type" type="text" value="Project" />
<label>Due date:</label>
<input class="k-input" id="dueDate0" name="dueDate0" type="date" value="10/8/2013" />
jQuery(function(){jQuery("#dueDate0").kendoDatePicker({"format":"M/d/yyyy","min":new Date(1900,0,1,0,0,0,0),"max":new Date(2099,11,31,0,0,0,0)});});
<br/>
<label>End Date:</label>
<input class="k-input" id="endDate0" name="endDate0" type="date" />
jQuery(function(){jQuery("#endDate0").kendoDatePicker({"format":"M/d/yyyy","min":new Date(1900,0,1,0,0,0,0),"max":new Date(2099,11,31,0,0,0,0)});});
<label>Start Date:</label>
<input class="k-input" id="startDate0" name="startDate0" type="date" value="10/8/2013" />
jQuery(function(){jQuery("#startDate0").kendoDatePicker({"format":"M/d/yyyy","min":new Date(1900,0,1,0,0,0,0),"max":new Date(2099,11,31,0,0,0,0)});});
<br/>
<input type="submit" value="save"/>
</form>
</div>
</div>
</div>

When generating the partial view,just define some kind of random id for the datepicker - for example Guid.NewGuid() or something. are you using the MVC helpers to define the datepicker?

Post form data to url in Razor

I'm trying to append data from a form to the Url of my page using Razor (adding a query string). I've done this in ASP.NET Web Controls okay, but I would prefer to do this in Razor if it is possible?
Here's a very basic version of my Razor script but currently the '#test' variable is empty on post:
#{
<form id="test" method="post">
<input type="text" />
<input type="submit" value="Submit" />
</form>
if(IsPost){
var test = Request.Form["test"];
Response.Redirect(#Model.Url + "?test=" + #test);
}
}
As a sidenote, is there a way of achieving this without a POST method at all?

As I understand you want to add input value in your test variable. You should define id for input[text] or you should change it to
Page:
#using (Html.BeginForm("ActionName", "ControllerName", FormMethod.GET, null))
{
<input type='text' name'test' id='test' />
<input type="submit" value="Submit" />
}
or your code
#{
<form method="get" action="#Model.Url">
<input type="text" name="test" id="test" />
<input type="submit" value="Submit" />
</form>
}
P.S. I'm not clearly understand your code, because you set POST method and want to process GET method.

MVC3 retrieving partial view value by an element ID. What's the solution?

Sorry to bother, I'm fairly new to MVC3 and I've been looking for 3 days but no solution.
The problem looks like this. I have a view which has another partial view in it using #html.Partial.
In the partial view I have a double select box which allows me to move users from one side to another.
My question is when I post my main form how can I also post the information from my partial form also, more precisely the second select box data, because I've tried everything yet no success. Also here is the code, and your help is highly appreciated.
The Main View: (not copied from the beginning as I don't think it helps)
<div class="editor-field">
#Html.TextBoxFor(v => v.Voyage.DateOfArrival, new { #class = "date", id = "arrival" })
</div>
<div class="editor-label">
#Html.LabelFor(v => v.Voyage.MarginOfErrorTime, "Allowed margin of error")
</div>
<div class="editor-field">
#Html.EditorFor(v => v.Voyage.MarginOfErrorTime)
</div>
<p>
<input type="submit" value="Create" />
</p>
</div>
<div class="partial-view">
#Html.Partial("_UserAddingOptions", Model)
</div>
</fieldset>
}
<div>
#Html.ActionLink("Back to List", "Index")
</div>
This is the partial view:
<script language="javascript" type="text/javascript">
$(function () {
$.configureBoxes();
});
</script>
#using (Html.BeginForm())
{
<table>
<tr>
<td>
Filter:<br />
<input type="text" id="box1Filter" style="width: 160px;" />
<button type="button" id="box1Clear">
X</button><br />
<select id="box1View" multiple="multiple" style="height: 240px; width: 200px;">
#foreach (var user in Model.Users)
{
<option>#user.FirstName #user.LastName</option>
}
</select><br />
<span id="box1Counter" class="countLabel"></span>
<select id="box1Storage">
</select>
</td>
<td style="width: 28px; vertical-align: middle;">
<button id="to2" type="button">
></button>
<button id="to1" type="button">
<</button>
</td>
<td>
Filter:<br />
<input type="text" id="box2Filter" style="width: 160px;" />
<button type="button" id="box2Clear">
X</button><br />
<select id="box2View" multiple="multiple" style="height: 240px; width: 200px;">
</select><br />
<span id="box2Counter" class="countLabel"></span>
<select id="box2Storage">
</select>
</td>
</tr>
</table>
}
I only have a controller for the main view, what viable solutions do I have to post the partial view info from (id = box2View) to the controller when I submit the main form?

Two mistakes I can see, and one advisory:
1) You have a nested form there - unless there are other views on which the partial is used to submit stuff in its own right (probably not, since you are using BeginForm it's always posting back to the current Controller/View). Get rid of the form tag on the partial view.
2) ...And this is the main issue - none of your inputs on the partial have names. If they don't have names then they don't submit anything:
<select id="box2View" name="box2View" ...
3) You're a self-confessed beginner, I know - so you'll benefit from me advising you to look over some walkthrough guides on model-binding. Manually writing out all your form elements, manually spitting out option tags etc, is unnecessary. The simple MSDN topic Models and Validation in Asp.Net MVC is worth taking a look at - in particular note the view code there - everything is done from the model, no explicit <input type="textbox" etc.

You have the submot button outside the form, either you move it into the form that is inside the partial view within the code block #Html.BeginForm() or use javascript to post the form when it is clicked on.
<input type="button" onclick="$('#someForm').submit();" /> //someForm is id of the form.