Multiple Submit buttons in Form neither appearing in FormCollection of ASP.Net MVC Method - asp.net-mvc

I'm at my wits end here...I have the following razor markup for my form:
<input class="k-button" type="submit" value="Post" name="SubmitButton" />
<input class="k-button" type="submit" value="Save" name="SubmitButton" />
The problem I'm experiencing is that the FormCollection parameter of the controller action method does not include SubmitButton in its Key/Value pairs.
I've come across this post here that seems to have had the same problem. The solution seemed to be to use a ActionMethodSelectorAttribute AND to remove the use of [Remote] validation. But I really need my [Remote] validator though, so it is not an option for me to remove that. Is there no other solution, or is this some bug I just have to deal with?
I'm thinking along the lines of having to replace my use of two buttons with a single Save button, and then add a "Post" checkbox. Then in the controller action I check for the presence of the Post KeyValue pair. But this is less than idea. I prefer the use of two buttons.
EDIT: more view markup following Igor's request:
#using (Html.BeginForm())
{
#Html.ValidationSummary(false)
<fieldset>
<legend>Edit details for Client Warehouse Request </legend>
#Html.HiddenFor(model => model.ModelObject.CustomerCode)
#Html.HiddenFor(model => model.ModelObject.ReqNr)
<div style="table-layout: initial;">
<div class="columnDivider">
<div class="editor-label">
#Html.LabelFor(model => model.ModelObject.ReqNr)
</div>
<div class="editor-field">
#Html.DisplayFor(model => model.ModelObject.ReqNr)
</div>
<div class="clear">
</div>
<div class="editor-label">
#Html.LabelFor(model => model.ModelObject.CreationDate)
</div>
... many other fields following the above structure...
<input class="k-button" type="submit" value="Post" name="SubmitButton" />
<input class="k-button" type="submit" value="Save" name="SubmitButton" />
</div>
<div class="columnDivider">
...some more fields
</div>
<div>
Here I have a Kendo UI datagrid that gets submitted with the form
</div>
</fieldset>
}

Try:
<input type="hidden" name="SubmitButtonValue" id="SubmitButtonValue" />
<input class="k-button" type="submit" value="Post" name="SubmitButton" />
<input class="k-button" type="submit" value="Save" name="SubmitButton" />
<script type="text/javascript">
$(document).ready(function(){
$(".k-button").click(function(){
$("#SubmitButtonValue").val($(this).val());
});
});
</script>
and check for "SubmitButtonValue" key in FormCollection.

Related

Is it possible to include a file with a form POST

I got a regular POST in my mvc app:
#using (Html.BeginForm("Update", "AController", FormMethod.Post))
{
<div style="margin-bottom:20px"></div>
#Html.AntiForgeryToken()
<div class="form-input">
<input class="form-control" type="text" name="#(nameof(Model.Name))" value="#(Model.Name)" />
</div>
<br />
<div class="form-input">
<input class="form-control" type="text" name="#(nameof(Model.Name2))" value="#(Model.Name2)" />
</div>
<br />
<div>
<input type="file" name="Image" id="Image" name="#(nameof(Model.Image))" value="#(Model.Image)" />
</div>
<button type="submit" class="btn btn-primary btn-sm">TEXT HERE</button>
}
Now when doing the submit the two regular text fields gets binded the model but the file does not.
After some reading it seems like the upload part should be in a separate form, is that correct?
I really want to avoid having two different POST as it does not fit the design of the page.
You should be able to get the posted file from the Request directly in the controller with following code
if(Request.Files.Count > 0)
{
var file = Request.Files[0];
...
}
But you need to add the multipart/form-data to your form
#using (Html.BeginForm("Update", "AController", FormMethod.Post, new { enctype="multipart/form-data" }))
Check What does enctype='multipart/form-data' mean? for reference on the multipart/form-data

Search box and asp-route

I have just added search box to an index view
<form asp-action="Index" asp-route-account="#Model.First().AccountId" method="get">
<div class="form-actions ">
<p>
<input id="searchStringId" type="text" name="searchString" value="#ViewData["currentFilter"]" />
<input type="submit" value="Search" class="btn btn-primary">
<a asp-action="Index" asp-route-account="#Model.First().AccountId">Back to Full List</a>
</p>
</div>
</form>
This gives me:
https://localhost:44377/MainUsers/Funds?searchString=aldi
But I need
https://localhost:44377/MainUsers/Funds?account=1&&searchString=aldi In other words I need the search string to also include the route id.
Any ideas?
I need the search string to also include the route id. Any ideas?
You can try to achieve the requirement by using a hidden input field as below.
<input name="account" type="hidden" value="#Model.First().AccountId" />
<input id="searchStringId" type="text" name="searchString" value="#ViewData["currentFilter"]" />
Test Result

contact us form with email submision in asp.net mvc

I am trying to design the contact us page in asp.net mvc. I would like to build a contact us form that also work as to send email to our email. This is the code in of front end; it is a design of form but I just copy this from a template. Can any body guide me to how to make it work or highlight any mistakes?
//code
<div class="contact-form">
<h2>Contact Us</h2>
<form method="post" action="contact-post.html">
<div>
<span><label>Name</label></span>
<span><input name="userName" type="text" class="textbox"></span>
</div>
<div>
<span><label>E-mail</label></span>
<span><input name="userEmail" type="text" class="textbox"></span>
</div>
<div>
<span><label>Mobile</label></span>
<span><input name="userPhone" type="text" class="textbox"></span>
</div>
<div>
<span><label>Subject</label></span>
<span><textarea name="userMsg"> </textarea></span>
</div>
<div>
<span><input type="submit" class="" value="Submit us"></span>
</div>
</form>
</div>

Refreshing the whole jQuery mobile dialog programatically

I am developing a mobile application with jQuery mobile and backbone. I have backbone model change event function, if any changes in the model, I simply destroy the whole page and recreate with template binding. i use $('#pageId').page('destroy').page(); which works fine.
I want to do the samething for dialog (just destory the dialog and recreate the dialog and display it). Can you anyone tell me the right method to call.... I just tried with .dialog() but i didn't work.. thanks in advance.
my dialog code.
<div data-role="dialog" id="myDialog" data-close-btn="right">
<div data-role="header" class="ui-corner-top">
<h1>dialog</h1>
</div>
<div data-role="content">
<form id="myForm">
<fieldset>
<label for="fromDate">Date From</label>
<input id="fromDate" type="date" required placeholder="mm/dd/yyyy">
</fieldset>
<fieldset>
<label for="toDate">Date To</label>
<input id="toDate" type="date" required placeholder="mm/dd/yyyy">
</fieldset>
<input type="submit" value="submit" id="btnSubmit" data-inline="true" />
</form>
</div>
</div>

How do we represent the following piece of view code in a Spark view?

<% using (Html.BeginForm("AddToCart", "Cart")) { %>
<%= Html.Hidden("ProductID", pr.ProductID) %>
<%= Html.Hidden("returnUrl", ViewContext.HttpContext.Request.Url.PathAndQuery) %>
<input type="submit" value="+ Add to cart" />
<% } %>
Currently I am using
# using (Html.BeginForm("AddToCart", "Cart")) {
${Html.Hidden("ProductID", pr.ProductID)}
${Html.Hidden("returnUrl", ViewContext.HttpContext.Request.Url.PathAndQuery)}
<input type="submit" value="+ Add to cart" />
#}
Is this the right way? any better approach?
There is a much better way now with the latest version of Spark (v1.5) using the new Bindings feature. You can read my blog post on it here which has an example of Html Form for you.
Basically your html form code in your Spark view ends up using the MVC Html Form Helper properly, but looking awesome like this:
<Form class="form-default">
<ValidationSummary Message="Login was unsuccessful.
Please correct the errors and try again." ExcludePropertyErrors="true" />
<div class="editor-label">
<Label For="UserName" />
</div>
<div class="editor-field">
<TextBox For="UserName" /><ValidationMessage For="UserName"/>
</div>
<div class="editor-label">
<Label For="Password" />
</div>
<div class="editor-field">
<Password For="Password" /><ValidationMessage For="Password" />
</div>
<div class="editor-label">
<CheckBox For="RememberMe" />
<Label For="RememberMe" />
</div>
<input type="submit" value="Log On" />
</Form>
You can also see a code sample project that uses it in the Spark code base here.
Hope that helps,
Rob
I assume you are referring to how the form tags are handled. You can do this:
#Html.BeginForm("AddToCart", "Cart");
...
#Html.EndForm();

Resources